KindEditor編輯器是一款代碼編輯器，使用JavaScript編寫(xiě)，可以用于Java、.NET、PHP、ASP等各種代碼語(yǔ)言的編輯，軟件中提供了編輯代碼時(shí)必備的各種功能，比如高亮功能等等，另外軟件還支持插件，你有需要的功能，可以直接通過(guò)安裝插件的方式來(lái)進(jìn)行新功能的添加。

軟件介紹

KindEditor中文版使用JavaScript編寫(xiě)，可以無(wú)縫的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用，2006年7月首次發(fā)布2.0以來(lái)，KindEditor依靠出色的用戶體驗(yàn)和領(lǐng)先的技術(shù)不斷擴(kuò)大編輯器市場(chǎng)占有率，目前在國(guó)內(nèi)已經(jīng)成為最受歡迎的編輯器之一。

軟件特色

1. KindEditor中文版體積小，加載速度快，但功能十分豐富。

2. 內(nèi)置自定義range，完美地支持span標(biāo)記。

3. 基于插件的方式設(shè)計(jì)，所有功能都是插件，增加自定義和擴(kuò)展功能非常簡(jiǎn)單。

4. 修改編輯器風(fēng)格很容易，只需修改一個(gè)CSS文件。

5. 支持大部分主流瀏覽器，比如IE、Firefox、Safari、Chrome、Opera。

使用說(shuō)明

KindEditor是一款富文本編輯器，這款軟件需要先進(jìn)行安裝，然后在瀏覽器中輸入正確的地址才能打開(kāi)使用，軟件的使用有不小的門(mén)檻，很多的用戶不知道軟件的使用方法，下面小編為大家?guī)?lái)入門(mén)使用教程，快來(lái)一起看看吧。

1. 下載編輯器

下載 KindEditor 最新版本，下載之后打開(kāi) examples/index.html 就可以看到演示。

2. 部署編輯器

解壓 kindeditor-x.x.x.zip 文件，將所有文件上傳到您的網(wǎng)站程序目錄里，例如：http://您的域名/editor/

3. 修改HTML頁(yè)面

在需要顯示編輯器的位置添加textarea輸入框。

在該HTML頁(yè)面添加以下腳本。

4. 獲取HTML數(shù)據(jù)

一鍵排版教程

作為一款編輯器，一鍵排版功能是非常重要的，可以一鍵幫助用戶刪除內(nèi)容中一些無(wú)用的空格、空行和無(wú)用的內(nèi)容，不用用戶手動(dòng)去進(jìn)行一項(xiàng)項(xiàng)檢查和刪除，節(jié)約用戶大量的時(shí)間，下面小編為大家?guī)?lái)一鍵排版功能的制作教程。

修改文件

引用kindeditor-all-min.js 就修改 kindeditor-all-min.js

我是直接引用 kindeditor-all.js，則修改kindeditor-all.js

直接快速搜索 關(guān)鍵詞 quickformat

找到 KindEditor.plugin(‘quickformat’, function (K) ｛｝方法

修改其中的代碼

注意：其他方法說(shuō)修改 plugin文件夾下的quickformat的JS文件中，

其中(下圖)，并沒(méi)起作用

于是我只得自己探索了，終于在我拖拖拉拉的尋找中，找到了這個(gè)方法

可行方法，具體代碼如下

以上利用child.css添加的樣式，是會(huì)添加到p的style中

由于行距的樣式 放在span中才起作用，因此需要直接加到內(nèi)容的兩側(cè)

加粗的樣式 也是標(biāo)簽在起作用，因此也是直接加到內(nèi)容的兩側(cè)

如果你想恢復(fù)到默認(rèn)樣子，可以對(duì)照plugin文件夾下的quickformat的JS文件

上傳圖片教程

在編輯器中添加上傳圖片的按鈕功能并不是簡(jiǎn)單的添加按鈕即可，需要先進(jìn)行代碼的編輯，在軟件中完成表單的制作，圖片上傳前后端接口的添加，然后和服務(wù)器進(jìn)行連接，一系列的復(fù)雜操作之后，才能成功添加該功能，下面小編為大家?guī)?lái)該教程。

工具欄中圖片上傳的表單 name 值為 imgFile

圖片上傳前后端接口，必須返回這樣格式的 json 字符串，才會(huì)回調(diào) afterUpload 屬性指定的回調(diào)函數(shù)。

1、請(qǐng)求參數(shù)

​ imgFile: 文件form名稱(chēng)

​ dir: 上傳類(lèi)型，分別為image、flash、media、file

2、服務(wù)器響應(yīng)數(shù)據(jù)

3、回調(diào)函數(shù)

url 表示上傳成功時(shí)返回的文件url地址

data 服務(wù)器響應(yīng)的json對(duì)象

name 上傳類(lèi)型，如：圖片上傳，多圖片上傳，文件上傳。取值： image multiimage insertfile

注意：參數(shù)是按照位置給值的，如果回調(diào)只有一個(gè)參數(shù)，那么就表示 url , 如果回調(diào)有2個(gè)參數(shù)，那么依次表示 (url, data) , 如果回調(diào)有3個(gè)參數(shù)，那么依次表示 (url, data, name)

（點(diǎn)擊圖片查看大圖）

單圖片上傳交互數(shù)據(jù)

常見(jiàn)問(wèn)題

編輯器好像是UTF-8編碼的，可以在GB2312頁(yè)面上使用嗎?

可以使用。有兩種方法，一種方法是引入kindeditor.js文件時(shí)將script的charset屬性設(shè)置成utf-8。

還有一種方法是直接將html/js/css文件編碼都轉(zhuǎn)換成GB2312編碼(用Notepad++、editPlus等文本編輯器就可以轉(zhuǎn)換編碼)，不過(guò)轉(zhuǎn)換格式后升級(jí)比較困難，建議使用第一種方法。

  我取不到編輯器數(shù)據(jù)，直接取得textarea的value也沒(méi)用。

KindEditor的可視化操作在新創(chuàng)建的iframe上執(zhí)行，代碼模式下的textarea框也是新創(chuàng)建的，所以最后提交前需要執(zhí)行 sync() 將HTML數(shù)據(jù)設(shè)置到原來(lái)的textarea。

KindEditor在默認(rèn)情況下自動(dòng)尋找textarea所屬的form元素，找到form后onsubmit事件里添加editor.sync()函數(shù)，所以用form方式提交數(shù)據(jù)，不需要手動(dòng)執(zhí)行editor.sync()函數(shù)。

  為什么有些標(biāo)簽被過(guò)濾?

KindEditor默認(rèn)采用白名單過(guò)濾方式，可用 htmlTags 參數(shù)定義要保留的標(biāo)簽和屬性。當(dāng)然也可以用 filterMode 參數(shù)關(guān)閉過(guò)濾模式，保留所有標(biāo)簽。

更新日志

新增: extraFileUploadParams初始化參數(shù)，文件上傳時(shí)，支持添加別的參數(shù)一并傳到服務(wù)器;

變更: filterMode默認(rèn)值改成true，根據(jù)htmlTags配置過(guò)濾HTML代碼;

Bugfix: [Chrome] 粘貼內(nèi)容代碼中出現(xiàn)white-space:nowrap導(dǎo)致不換行;

Bugfix: [IE6] 本地圖片上傳按鈕錯(cuò)位;

Bugfix: 開(kāi)啟過(guò)濾模式后，預(yù)覽內(nèi)容顯示KindEditor。