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

環(huán)境：Windows環(huán)境，Java開發(fā)，頁面與接口在同一個(gè)項(xiàng)目中，未進(jìn)行前后端隔離，服務(wù)器Tomcat
官網(wǎng)地址：Simditor文檔

第一步

去官網(wǎng)下載地址，導(dǎo)入到相應(yīng)目錄下，若是node開發(fā)，則只需要

$ npm install simditor $ bower install simditor

此處筆者用的是java項(xiàng)目開發(fā)，自然是放在了webapp目錄下

按照官網(wǎng)指示，如下導(dǎo)入相應(yīng)資源

<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版本有單獨(dú)的simditor-2.3.6.zip可以下載。
此處要注意的是如果你是下載的源碼，只要在simditor-2.3.8\site\assets中引入下面三個(gè)目錄的內(nèi)容即可：

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

第二步

開啟一個(gè)容器，創(chuàng)建一個(gè)textare元素，如下：

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

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

<div class="row cl"><label class="form-label col-xs-4 col-sm-2">文章內(nèi)容：&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代碼對(duì)應(yīng)起來。

第三步

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

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

筆者此處對(duì)option按照自己需求，進(jìn)行了下完善：

$(function(){Simditor.locale = 'zh-CN';//設(shè)置中文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'], //工具條都包含哪些內(nèi)容pasteImage: true,//允許粘貼圖片defaultImage: '/res/simditor/images/image.png',//編輯器插入的默認(rèn)圖片，此處可以刪除upload : {url : 'richtext_img_upload.do', //文件上傳的接口地址params: null, //鍵值對(duì),指定文件上傳接口的額外參數(shù),上傳的時(shí)候隨文件一起提交fileKey: 'upload_file', //服務(wù)器端獲取文件數(shù)據(jù)的參數(shù)名connectionCount: 3,leaveConfirm: '正在上傳文件'}});

這樣啟動(dòng)項(xiàng)目，simditor正常情況下都會(huì)正常啟動(dòng)。若有異常，注意下面幾點(diǎn)注意事項(xiàng)。

注意事項(xiàng)

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

我們一般直接使用，工具欄的圖片一般都會(huì)產(chǎn)生偏移，如下：

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

將對(duì)應(yīng)處注釋掉即可。

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

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

補(bǔ)充

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

placeholder（默認(rèn)值：”）編輯器的 placeholder，如果為空 Simditor 會(huì)取 textarea 的 placeholder 屬性；

toolbar （默認(rèn)值：true）是否顯示工具欄按鈕；

toolbarFloat （默認(rèn)值：true）是否讓工具欄按鈕在頁面滾動(dòng)的過程中始終可見；

toolbarHidden （默認(rèn)值：false）是否隱藏工具欄，隱藏后 toolbarFloat 會(huì)失效；

defaultImage（默認(rèn)值：’images/image.png’）編輯器插入混排圖片時(shí)使用的默認(rèn)圖片；

tabIndent（默認(rèn)值：true）是否在編輯器中使用 tab 鍵來縮進(jìn)；

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

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

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

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

最后，自定義樣式和交互

每個(gè)項(xiàng)目都有不同的設(shè)計(jì)風(fēng)格，大多數(shù)時(shí)候我們需要修改 Simditor 的樣式，讓它的樣式跟項(xiàng)目的風(fēng)格相符。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。