Simditor 是Tower開源的一個基于瀏覽器所見即所得的文本編輯器，它的理念是保持簡單，避免過度的功能，使用方法如下：
Step1?. 點擊此處 ?下載路徑?下載最新版本的simditor的zip，如圖所示：

下載解壓后會發現是整個simditor項目，很多東西項目根本不需要，只需要將\site\assets下的images、scripts、styles文件夾拷
貝到我們項目中，如圖所示：

Step2. 在項目的webapp中新建文件夾smiditor，將上面的文件放到此文件夾中，如圖所示

Step3 . 在頁面中引用需要的文件 <!--css引用--><div class="page-sidebar-wrapper" th:include="/common/page_sidebar::pageSidebar"><!--js引用--><script type="text/javascript" th:src="@{/scripts/simditor/scripts/module.js}"></script><script type="text/javascript" th:src="@{/scripts/simditor/scripts/hotkeys.js}"></script><script type="text/javascript" th:src="@{/scripts/simditor/scripts/uploader.js}"></script><script type="text/javascript" th:src="@{/scripts/simditor/scripts/simditor.js}"></script>

注意：如果頁面中沒有引用jquery的js還需要引用jquery的js

Step4. 在頁面中創建一個textarea元素，代碼如下： <div class="form-group"><label class="col-md-3 control-label">詳情<span class="required"> * </span></label><div class="col-md-7" id="contextText"><div class="form-group" align="center" id="nochecke"><textarea id="editor" type="text/plain" hidden="true" autofocus></textarea></div></div><div style="display: none"><input type="input" id="content" name="content" value=''> </div></div>

注意：textarea 的id值要與接下來的初始化simditor 的JS代碼對應起來，隱藏的input 是 form表單提交時獲取不到textarea 的值，所以需要一個能獲取到的input，input 的 name 值要和后臺接收的字段一致。
為了能實時更新隱藏input的值，js中需要有個同步的方法
function contextTextOnblur() {$(document).on("blur", "#contextText", function() {var content = $(".simditor-body").html();$("#content").val(content);}); }

Step5. 初始化simditor，代碼如下： $(function(){Simditor.locale = 'zh-CN';//設置中文var editor = new Simditor({textarea: $("#editor"), //textarea的idplaceholder: '',toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'], //工具條都包含哪些內容pasteImage: true,//允許粘貼圖片defaultImage: '/simditor/images/image.png',//編輯器插入的默認圖片，此處可以刪除upload : {url : '/smiditor/uploadSimditorImg', //文件上傳的接口地址params: null, //鍵值對,指定文件上傳接口的額外參數,上傳的時候隨文件一起提交fileKey:'file', //服務器端獲取文件數據的參數名connectionCount: 3,leaveConfirm: '正在上傳文件'}});});

注意：文件上需要返回特定的字段，成功時返回
{"success":true,"file_path":"" }

失敗時返回：
{"success":false }Step6. 實現的controller中
@Controller @RequestMapping("/smiditor") public class SmiditorUploadImageController extends BaseController {@AutowiredUploadSmiditorImageServie uploadSmiditorImageServie;@RequestMapping("/uploadSimditorImg")@ResponseBodypublic JSONObject uploadSimditorImg(MultipartFile file) {JSONObject json = new JSONObject();try {json = uploadSmiditorImageServie.uploadSimditorImg(file);} catch (Exception e) {LogWriter.writeErrorLog("上傳編輯器圖片失敗：" + e);}return json;}}

?注意： 參數名要和前臺的js中的filekey一致，做圖片上傳的時候無論圖片上傳成功與否都會顯示出來，二者唯一的區別就是圖片的路徑， 如果圖片上傳成功，圖片的路徑應該是正常的路徑，如果圖片上傳失敗圖片的路徑是被base64加密過的路徑。

Step7. 實現service方法
public JSONObject uploadSimditorImg(MultipartFile file) {JSONObject json = new JSONObject();try {//調用圖片上傳的方法ResultObject<UploadResult> resultObject = fileUploadService.uploadSingleImage(file);if(ValidateUtil.validateStringIsNullOrEmpty(resultObject.getData().getFileUrl()) == false){json.put("success", true);json.put("file_path", resultObject.getData().getFileUrl());}else{json.put("success", false);}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}return json;}

至此simditor 就可以正常使用啦。
注意：simditor默認的寬高是隨內容的長短變化的，如果想固定寬高，找到simditor/styles/simditor.css文件中141行，可以加上固定寬高。 .simditor {position: relative;border: 1px solid #c9d8db;width: 80%; }

總結

以上是生活随笔為你收集整理的Simditor 富文本编辑器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。