簡單好用的文字編輯器《Simditor》外掛快速入門例項

Creabine發表於2016-07-07

專案需要文字編輯器，我在網上找到了Simditor這個外掛，感覺簡單好用，在這裡記錄一下，也推薦給更多的人。

Simditor能做什麼

簡單來說，Simditor能夠將web頁面中的textarea文字域變成一個簡單的富文字編輯器。能夠實現常用的加粗加斜下劃線，標題表格字型顏色等功能，並且輸出所見即所得的html程式碼。

Simditor如何使用

可以在Simditor的官網檢視demo，文件和github下載地址。

下載最新版本的Simditor檔案後解壓，並且引入：

//引入css
<link rel="stylesheet" type="text/css" href="js/simditor-2.3.6/styles/simditor.css" /> 
//引入js，若不需要上傳則可以不引用uploader.js檔案
<script type="text/javascript" src="js/simditor-2.3.6/scripts/jquery.min.js"></script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/module.min.js"></script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/hotkeys.min.js"></script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/uploader.min.js"></script>
<script type="text/javascript" src="js/simditor-2.3.6/scripts/simditor.min.js"></script>

然後初始化即可：

$(document).ready(function(){
    //初始化文字編輯器
    var editor = new Simditor({
        //textarea的id
        textarea: $('#remark'),
        //工具條都包含哪些內容
        toolbar:['title','bold','italic','underline','table','color','ol','ul','image','hr'],
        //若需要上傳功能，上傳的引數設定。
        upload : {
                url : 'ImgUpload.action', //檔案上傳的介面地址
                params: null, //鍵值對,指定檔案上傳介面的額外引數,上傳的時候隨檔案一起提交
                fileKey: 'fileDataFileName', //伺服器端獲取檔案資料的引數名
                connectionCount: 3,
                leaveConfirm: '正在上傳檔案'
         } 
    });
});

需要注意的地方：

我下載之後直接使用時，發現工具條的圖片會產生偏移，如下圖：
這裡寫圖片描述

看了下發現是Simditor自帶的css有問題。我已經反饋在github上，一開始以為是我下載的版本不對，後來重新下載了最新版本，發現直接引入依然有這個問題。再次提交給作者但是目前還沒得到回覆。如果有小夥伴遇到這個問題，只要如下圖這樣處理即可：
這裡寫圖片描述
在simditor.css中去掉該屬性即可正常顯示。

其他設定

1.fileKey: ‘upload’ 設定插入圖片的按鈕點選之後的選單僅有圖片上傳

2.locale:’en-US’, Simditor的預設語言為中文。其實是可以支援英文的，修改之後工具條中的文字會變成英文。

相關文章