
【基本介紹】
KindEditor 是一套開源的在線HTML編輯器,主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果,開發(fā)人員可以用 KindEditor 把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框。 KindEditor 使用 JavaScript 編寫,可以無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用【軟件特點(diǎn)】
快速:體積小,加載速度快開源:開放源代碼,高水平,高品質(zhì)
底層:內(nèi)置自定義 DOM 類庫,精確操作 DOM
擴(kuò)展:基于插件的設(shè)計,所有功能都是插件,可根據(jù)需求增減功能
風(fēng)格:修改編輯器風(fēng)格非常容易,只需修改一個 CSS 文件
兼容:支持大部分主流瀏覽器,比如 IE、Firefox、Safari、Chrome、Opera
【軟件特點(diǎn)】
1. 體積小,加載速度快,但功能十分豐富。2. 內(nèi)置自定義range,完美地支持span標(biāo)記。
3. 基于插件的方式設(shè)計,所有功能都是插件,增加自定義和擴(kuò)展功能非常簡單。
4. 修改編輯器風(fēng)格很容易,只需修改一個CSS文件。
5. 支持大部分主流瀏覽器,比如IE、Firefox、Safari、Chrome、Opera。
【使用教程】
KindEditor編輯器的使用方法你要把所需的文件下載下來。
你要把所需要的文件上傳到你的網(wǎng)站,接下來就是引用了。在需要顯示編輯器的位置添加textarea輸入框,注意ID在頁面中應(yīng)該是唯一的,不說你也知道。

在該HTML頁面添加以下腳本,第一個參數(shù)可用其它CSS選擇器,匹配多個textarea時只在第一個元素上加載編輯器。通過K.create函數(shù)的第二個參數(shù),可以對編輯器進(jìn)行配置,具體參數(shù)請參考 編輯器初始化參數(shù) (官網(wǎng)有詳細(xì)介紹)。


如果你想獲得編輯器中的數(shù)據(jù),可以用下面的代碼。

部署kindeditor編輯器
在“index.jsp”<body></body>中添加textarea輸入框,設(shè)置其寬度為800,高度為600,并且給其設(shè)置id和name屬性。

在<head></head>中引入kindeditor的js文件。

并在第一個textarea元素上加載kindeditor編輯器。

在MyEclipse展示窗口中找到“servers”,然后右擊“tomcat 8.0”,選擇“Add/Remove Deployments”。

進(jìn)入配置項(xiàng)目界面后,在左側(cè)選中我們的項(xiàng)目“Kindeditor”,然后Add添加到右側(cè)欄中。

然后選擇運(yùn)行該服務(wù)器中的項(xiàng)目。

等待服務(wù)啟動完成。

打開瀏覽器,輸入網(wǎng)址,看是否顯示我們需要的編輯器窗口。

注:網(wǎng)址若tomcat端口未更改則為“http://localhost:8080/Kindeditor/”
kindeditor在線編輯器配置上傳文件功能
我們把插件自帶的插件全部放入和kindeditor同等級的目錄下面,如圖:

找到對應(yīng)的后臺處理程序(個人以jsp為例,因?yàn)檎谧鲆粋€jsp項(xiàng)目):

打開 jsp文件夾,如圖一所示結(jié)構(gòu)。將lib下面的jar引入項(xiàng)目,如果以前存在對應(yīng)jar則選用較高版本(jar包為java的類庫包)。

然后將file_manager_json.jsp和upload_json.jsp放入對應(yīng)文件夾,能找到就行。這兩個為后臺處理程序。如圖:

打開file_manager_json.jsp。找到
//根目錄路徑,可以指定絕對路徑,比如 /var/www/attached/
String rootPath = pageContext.getServletContext().getRealPath("/") + "upload/";
//根目錄URL,可以指定絕對路徑,比如 http://www.yoursite.com/attached/
String rootUrl = request.getContextPath() + "/upload/";
將加粗的改為自己的文件目錄,以上是我的。如圖所示我的文件結(jié)構(gòu):

打開upload_json.jsp。找到
//文件保存目錄路徑
String savePath = pageContext.getServletContext().getRealPath("/") + "upload/";
//文件保存目錄URL
String saveUrl = request.getContextPath() + "/upload/";
將加粗的改為自己的文件目錄,以上是我的。相當(dāng)于和第五步一樣。
現(xiàn)在找到自己的kindeditor進(jìn)行相應(yīng)的配置。實(shí)際上就是找到后臺的這兩個文件。
在初始化配置中加上:
uploadJson :
'<%=request.getContextPath()%>/admin/upload_json.jsp',
fileManagerJson : '<%=request.getContextPath()%>/admin/file_manager_json.jsp',
allowFileManager : true
加粗改為自己對應(yīng)的。
如圖為我的完整配置:

現(xiàn)在應(yīng)該配置具體的插件了,我以image圖片處理插件為例子。找到圖片插件目錄。如圖路徑:

打開image.js,找到
uploadJson = K.undef(self.uploadJson, self.basePath + 'file_manager_json.jsp'),
加粗的路徑最好設(shè)置為正確的。(這兩個地址最好改成正確的,如果不能正確也可以使用,但是當(dāng)你主配置地址出錯了就不能使用了,我推測是這樣的)
然后在后臺對應(yīng)的upload下面創(chuàng)建image文件夾,(image是默認(rèn)名字,還有幾個默認(rèn)名字:file(文件),media(視頻),flash(動畫))如果你想用別的名字,你就需要在對應(yīng)的程序進(jìn)行文件名的修改。沒有這個必要吧。

我的是可以正常使用了,如圖:

如果是別的插件重復(fù)8--10的步驟就可以了。
【常見問題】
kindeditor上傳文件超過30M報錯的解決辦法點(diǎn)擊kindeditor上的文件上傳圖標(biāo),如下圖所示:

小于30M的文件都可以上傳成功,如下圖所示:

如果上傳超過30M的文件,如下圖所示:

上傳超過30M的文件會報錯,如下圖所示:

接下來我們打開IIS,找到對應(yīng)的應(yīng)用程序 ,點(diǎn)擊選擇“請求篩選”,如下圖所示:

然后選擇“編輯功能設(shè)置...”,如下圖所示:

在彈出的”編輯請求篩選設(shè)置“對話框中,默認(rèn)的文件大小是30M,可以根據(jù)需要自行修改大小,如下圖所示:

然后上傳,就可以上傳成功了,如下圖所示:

編輯器好像是UTF-8編碼的,可以在GB2312頁面上使用嗎?
可以使用。有兩種方法,一種方法是引入kindeditor.js文件時將script的charset屬性設(shè)置成utf-8。
還有一種方法是直接將html/js/css文件編碼都轉(zhuǎn)換成GB2312編碼(用Notepad++、editPlus等文本編輯器就可以轉(zhuǎn)換編碼),不過轉(zhuǎn)換格式后升級比較困難,建議使用第一種方法。
我取不到編輯器數(shù)據(jù),直接取得textarea的value也沒用。
KindEditor的可視化操作在新創(chuàng)建的iframe上執(zhí)行,代碼模式下的textarea框也是新創(chuàng)建的,所以最后提交前需要執(zhí)行 sync() 將HTML數(shù)據(jù)設(shè)置到原來的textarea。
KindEditor在默認(rèn)情況下自動尋找textarea所屬的form元素,找到form后onsubmit事件里添加editor.sync()函數(shù),所以用form方式提交數(shù)據(jù),不需要手動執(zhí)行editor.sync()函數(shù)。
為什么有些標(biāo)簽被過濾?
KindEditor默認(rèn)采用白名單過濾方式,可用 htmlTags 參數(shù)定義要保留的標(biāo)簽和屬性。當(dāng)然也可以用 filterMode 參數(shù)關(guān)閉過濾模式,保留所有標(biāo)簽。


































