序

其實，simditor真的是很好用的，只需要簡單的配置就可以用的，只是初步接觸到它的時候，不知道原理，然后內心又存在著對未知事物的“恐懼”，所以在使用的過程中還是糾結了一段時間的。

編輯文章

simditor的官方網址為http://simditor.tower.im/?
上面有它的一些使用幫助。但是，我在使用的過程中，發(fā)現很多問題寫的不是很清晰，需要自己去摸索和實驗。

下載simditor 并使用

首先需要下載simditor的相關js與css文件，放到自己的項目下面。需要引入的css以及js文件先進行引入。?
然后進行到很重要的一步，配置自己的js文件，達到真正引入simditor的目的。

(function() {$(function() {var editor,toolbar;Simditor.locale = 'zh-CN';toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];editor = new Simditor({textarea: $('#simditor'),placeholder: '這里輸入文字...',toolbar: toolbar,pasteImage: true,defaultImage: '/simditor/images/image.png',upload: false});});}).call(this);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

• 其中有一段是很重要的：

textarea: $('#simditor')

• 1

在你自己的html頁面中，必須要有一個textarea，它的id為”simditor”,當然你可以給它任何名字，只要不與其他元素有相同的id名。

• 配置說明：

Simditor.locale = 'zh-CN';

• 1

這個是將simditor的提示變成中文的，雖然simditor頁面簡潔美觀，很多選項我們一看圖標就知道是什么，但是呢，還是給一個中文的標注比較好。?
當然也可以設置成英文的。隨你喜歡啦！

• 建議：

  將這段代碼單獨的放在一個js文件里面，以后的頁面中，需要用到富文本編輯器，只需要把它包含進來就可以了。很方便的。

上傳圖片

上傳圖片我搜索了一下，本來想著有比較靠譜的答案，但是搜索出來的那些答案很雜，而且說法也不一，所以，最后還是安安心心的看文檔了，然后就是各種實驗。

editor = new Simditor({textarea: $('#simditor'),placeholder: '這里輸入文字...',toolbar: toolbar,pasteImage: true,defaultImage: '/simditor/images/image.png',upload: {url: '上傳地址',params: null,fileKey: "fileName",connectionCount: 1,leaveConfirm: "正在上傳,確定要取消上傳文件嗎?"}});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

如果需要使用上傳功能，需要將upload改成true，也就是允許上傳圖片。

上傳圖片的原理

• 1 upload選項中的url是你需要上傳的地址
• 2 上傳的名字就是filekey，在后臺接收圖片的時候，需要用到它。
• 3 傳回來的時候，是一個json格式字符串

{success: true/false,file_path:XXXX }

• 1
• 2
• 3
• 4

• 4 success一定要寫，simditor會通過這個來判斷上傳是否成功。
• 5 file_path 必須要寫。當回傳file_path成功的時候，simditor會重新發(fā)起一個GET請求，去請求file_path對應的地址，將圖片取回，并放倒內容框中進行顯示。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝?
更新：?
今天突然發(fā)現文章被回復了，而且對圖片上傳的這一塊有疑問。?
所以，我就再進行了一次測試。?
測試的結果如下：?

在上傳圖片的時候，設置好上傳的路徑.?
選擇要上傳的圖片，就會通過這個路徑將圖片信息POST到這個鏈接地址上去。?
當上傳成功的時候，也就是返回的信息為：

{file_path:XXXsuccess: true }

• 1
• 2
• 3
• 4

這個時候，Simditor會自己發(fā)起一個GET請求，將file_path中的圖片文件顯示在文本框中。

版權聲明：本文為博主原創(chuàng)文章，未經博主允許不得轉載。

總結

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

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