前言：像編輯器之類的插件，一般使用都無非三個步驟，引入資源，開辟容器，JS初始化。

環境：Windows環境，Java開發，頁面與接口在同一個項目中，未進行前后端隔離，服務器Tomcat
官網地址：Simditor文檔

第一步

去官網下載地址，導入到相應目錄下，若是node開發，則只需要

$ npm install simditor $ bower install simditor

此處筆者用的是java項目開發，自然是放在了webapp目錄下

按照官網指示，如下導入相應資源

<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" /><script type="text/javascript" src="[script path]/jquery.min.js"></script> <script type="text/javascript" src="[script path]/module.js"></script> <script type="text/javascript" src="[script path]/hotkeys.js"></script> <script type="text/javascript" src="[script path]/uploader.js"></script> <script type="text/javascript" src="[script path]/simditor.js"></script>

script path為你simditor下載所存放的路徑。
2.3.6版本有單獨的simditor-2.3.6.zip可以下載。
此處要注意的是如果你是下載的源碼，只要在simditor-2.3.8\site\assets中引入下面三個目錄的內容即可：

如果想要按需加載，則只需要按照你引入的script鏈接來加載資源。

第二步

開啟一個容器，創建一個textare元素，如下：

<textarea id="editor" placeholder="Balabala" autofocus></textarea>

若想制定寬高，也可以如筆者這樣（用的是ACE）：

<div class="row cl"><label class="form-label col-xs-4 col-sm-2">文章內容：&nbsp;</label><div class="formControls col-xs-8 col-sm-9"><textarea id="editor" type="text/plain" name="content" style="width:100%;height:400px;"autofocus></textarea></div> </div>

注意容器里id的值，要與接下來初始化simditor的JS代碼對應起來。

第三步

用JS代碼初始化Simditor，官方初始化方式如下：

var editor = new Simditor({textarea: $('#editor')//optional options });

筆者此處對option按照自己需求，進行了下完善：

$(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: '/res/simditor/images/image.png',//編輯器插入的默認圖片，此處可以刪除upload : {url : 'richtext_img_upload.do', //文件上傳的接口地址params: null, //鍵值對,指定文件上傳接口的額外參數,上傳的時候隨文件一起提交fileKey: 'upload_file', //服務器端獲取文件數據的參數名connectionCount: 3,leaveConfirm: '正在上傳文件'}});

這樣啟動項目，simditor正常情況下都會正常啟動。若有異常，注意下面幾點注意事項。

注意事項

若是SSM框架，一定要注意到在你的dispatcher-servlet.xml中，simditor靜態資源是否加載！

我們一般直接使用，工具欄的圖片一般都會產生偏移，如下：

這是自帶的CSS問題，此時需要在simditor.css中修改一處代碼，如下：

將對應處注釋掉即可。

simditor對圖片上傳接口的格式要求如下:

//富文本中對于返回值有自己的要求,我們使用是simditor所以按照simditor的要求進行返回 // { // "success": true/false, // "msg": "error message", # optional // "file_path": "[real file path]" // }

補充

接下來我給出一些常用的Option選項的含義：
textarea 是初始化 Simditor 的必需選項，可以接受 jQuery Object、HTML Element 或者 Selector String。另外，Simditor 還支持這些可選 option：

placeholder（默認值：”）編輯器的 placeholder，如果為空 Simditor 會取 textarea 的 placeholder 屬性；

toolbar （默認值：true）是否顯示工具欄按鈕；

toolbarFloat （默認值：true）是否讓工具欄按鈕在頁面滾動的過程中始終可見；

toolbarHidden （默認值：false）是否隱藏工具欄，隱藏后 toolbarFloat 會失效；

defaultImage（默認值：’images/image.png’）編輯器插入混排圖片時使用的默認圖片；

tabIndent（默認值：true）是否在編輯器中使用 tab 鍵來縮進；

params（默認值：{}）鍵值對，在編輯器中增加 hidden 字段（input:hidden），通常用于生成 form 表單的默認參數；

upload（默認值：false）false 或者鍵值對，編輯器上傳本地圖片的配置，常用的屬性有 url 和 params；

pasteImage（默認值：false）是否允許粘貼上傳圖片，依賴 upload 選項，僅支持 Firefox 和 Chrome 瀏覽器。

更詳細的配置說明可以參考 Simditor 的配置文檔。

最后，自定義樣式和交互

每個項目都有不同的設計風格，大多數時候我們需要修改 Simditor 的樣式，讓它的樣式跟項目的風格相符。

simditor.css 是通過 Sass 自動生成的代碼，所以推薦大家修改 simditor.scss，然后再重新生成css代碼。

.editor-style 選擇符下面的樣式，是 Simditor 輸出 HTML 的中文排版樣式，大家可以根據自己項目的情況進行調整。另外，如果不想使用 font-awesome.css 來實現工具欄按鈕的 icon，可以將 font-awesome.css 去掉，然后增加 .toolbar-item-[button name] 選擇符來自定義按鈕樣式。

總結

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

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