如果你想要制作一個網站那一款實用且好用的html編輯器是非常有必要的，所以小編在這里就為大家推薦一款功能強大的開源在線html編輯器——kindeditor編輯器。該編輯器有著強大的執(zhí)行功能和跨平臺性，它可以無縫的于Java、.NET、PHP、ASP等程序相接合，同時能夠完美兼容IE、Firefox、Chrome、Safari、Opera等各種主流瀏覽器而且本次的更新還新增單元格編輯功能，可以讓各種按鈕（確定、取消、上傳等按鈕）在不同瀏覽器上保持相同外觀。此外，開發(fā)人員也可以利用這款編輯器把傳統(tǒng)的多行文本輸入框(textarea)替換為可視化的富文本輸入框，并且還基于插件的設計，編輯器所有功能都是插件，用戶可以根據(jù)需求增減功能，使用起來也是非常地高效快捷。不僅如此，這款編輯器還提供了編輯代碼時必備的各種功能，而且修改編輯器風格也是非常的容易只需修改一個CSS文件即可，可以說這款編輯器非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網應用上使用。有需要的小伙伴們歡迎前來3322站免費下載使用。

功能特色

1、快速：體積小，加載速度快。
2、開源：開放源代碼，高水平，高品質。
3、底層：內置自定義 DOM 類庫，精確操作DOM。
4、擴展：基于插件的設計，所有功能都是插件，可根據(jù)需求增減功能。
5、風格：修改編輯器風格非常容易，只需修改一個CSS文件。
6、兼容：支持大部分主流瀏覽器，比如IE、Firefox、Safari、Chrome、Opera等。

kindeditor編輯器使用方法

1、將本站下載的壓縮包進行解壓得到如下文件；

2、在tomcat的webapps目錄下新建文件夾kindeditor，然后把下載的KindEditor下的這些文件Copy到上面創(chuàng)建的文件夾jsp、lang、plugins、themes、kindeditor-all.js、kindeditor-all-min.js；

3、因為jsp代碼依賴第三方jar，需要把jsp/lib下的三個jar，commons-fileupload-1.2.1.jar、commons-io-1.4.jar、json_simple-1.1.jar，copy到tomcat下的kindeidtor/WEB-INF/lib目錄；

4、啟動tomcat；

5、在瀏覽器中輸入地址：http://127.0.0.1:8080/kindeditor/jsp/demo.jsp，回車，沒有看到KindEditor官網展示的界面；

6、查看下源碼發(fā)現(xiàn)這個名字與Copy過來的不同，把Copy過來的kindeditor-all.js或kindeditor-all-min.js更改為kindeditor.js；

7、重新刷新下瀏覽器，OK，KindEditor官網上的demo又展示出來了。

kindeditor編輯器圖片上傳教程

在編輯器中添加上傳圖片的按鈕功能并不是簡單的添加按鈕即可，需要先進行代碼的編輯，在軟件中完成表單的制作，圖片上傳前后端接口的添加，然后和服務器進行連接，一系列的復雜操作之后，才能成功添加該功能，下面小編為大家?guī)碓摻坛獭?br /> 1、首先將工具欄中圖片上傳的表單name值為imgFile；

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

3、請求參數(shù)
1）imgFile：文件form名稱
2）ir：上傳類型，分別為image、flash、media、file

4、服務器響應數(shù)據(jù)
5、回調函數(shù)
1）url：表示上傳成功時返回的文件url地址
2）data：服務器響應的json對象
3）name：上傳類型，如：圖片上傳，多圖片上傳，文件上傳。取值： image multiimage insertfile
注意：參數(shù)是按照位置給值的，如果回調只有一個參數(shù)，那么就表示 url , 如果回調有2個參數(shù)，那么依次表示 (url, data) , 如果回調有3個參數(shù)，那么依次表示 (url, data, name)

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

常見問題

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

更新日志

v4.1.11版本
1、新增: 俄語語言包，感謝Valery Votintsev (http://codersclub.org/)。
2、改善: 語言包文件名標準化，zh_CN -> zh-CN, zh_TW -> zh-TW。
3、修復: [IE6] 當前頁面設置了document.domain，銷毀編輯器會報錯。
4、修復: 行首全角空格被過濾。
5、修復: 修復多語言包的一些小錯誤。
6、修復: [IE11] 有些設備報錯不能顯示，對象不支持attachEvent屬性或方法。
7、修復: retina屏幕上按鈕裂開。
8、修復: 編輯圖片后點擊插入圖片，彈出兩個dialog。