kindeditor編輯器是一款完美免費(fèi)的開源性HTML可視化編輯器。kindeditor采用JavaScript編寫而成，功能強(qiáng)大，簡便易用，最大的特色就是能夠?qū)崿F(xiàn)Word文檔中編輯時的所見即所得的編輯效果，由于基于插件的方式設(shè)計，其所有功能可以以插件形式實(shí)現(xiàn)，兼容多個主流瀏覽器，與Java、.NET、PHP、ASP等程序無縫鏈接。
開源：開放源代碼，高水平，高品質(zhì)
底層：內(nèi)置自定義 DOM 類庫，精確操作 DOM
擴(kuò)展：基于插件的設(shè)計，所有功能都是插件，可根據(jù)需求增減功能
風(fēng)格：修改編輯器風(fēng)格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
2. 內(nèi)置自定義range，完美地支持span標(biāo)記。
3. 基于插件的方式設(shè)計，所有功能都是插件，增加自定義和擴(kuò)展功能非常簡單。
4. 修改編輯器風(fēng)格很容易，只需修改一個CSS文件。
5. 支持大部分主流瀏覽器，比如IE、Firefox、Safari、Chrome、Opera。
你要把所需的文件下載下來。
你要把所需要的文件上傳到你的網(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的步驟就可以了。
點(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)簽。
【基本介紹】
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)簽。
