序

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

編輯文章

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

下載simditor 并使用

首先需要下載simditor的相關(guān)js與css文件，放到自己的項(xiàng)目下面。需要引入的css以及js文件先進(jìn)行引入。?
然后進(jìn)行到很重要的一步，配置自己的js文件，達(dá)到真正引入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頁(yè)面中，必須要有一個(gè)textarea，它的id為”simditor”,當(dāng)然你可以給它任何名字，只要不與其他元素有相同的id名。

• 配置說明：

Simditor.locale = 'zh-CN';

• 1

這個(gè)是將simditor的提示變成中文的，雖然simditor頁(yè)面簡(jiǎn)潔美觀，很多選項(xiàng)我們一看圖標(biāo)就知道是什么，但是呢，還是給一個(gè)中文的標(biāo)注比較好。?
當(dāng)然也可以設(shè)置成英文的。隨你喜歡啦！

• 建議：

  將這段代碼單獨(dú)的放在一個(gè)js文件里面，以后的頁(yè)面中，需要用到富文本編輯器，只需要把它包含進(jìn)來(lái)就可以了。很方便的。

上傳圖片

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

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選項(xiàng)中的url是你需要上傳的地址
• 2 上傳的名字就是filekey，在后臺(tái)接收?qǐng)D片的時(shí)候，需要用到它。
• 3 傳回來(lái)的時(shí)候，是一個(gè)json格式字符串

{success: true/false,file_path:XXXX }

• 1
• 2
• 3
• 4

• 4 success一定要寫，simditor會(huì)通過這個(gè)來(lái)判斷上傳是否成功。
• 5 file_path 必須要寫。當(dāng)回傳file_path成功的時(shí)候，simditor會(huì)重新發(fā)起一個(gè)GET請(qǐng)求，去請(qǐng)求file_path對(duì)應(yīng)的地址，將圖片取回，并放倒內(nèi)容框中進(jìn)行顯示。

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

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

{file_path:XXXsuccess: true }

• 1
• 2
• 3
• 4

這個(gè)時(shí)候，Simditor會(huì)自己發(fā)起一個(gè)GET請(qǐng)求，將file_path中的圖片文件顯示在文本框中。

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

總結(jié)

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

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