kindeditor編輯器(html在線編輯器)

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

功能特色

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

kindeditor編輯器使用方法

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

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

3、因?yàn)閖sp代碼依賴第三方j(luò)ar，需要把jsp/lib下的三個(gè)jar，commons-fileupload-1.2.1.jar、commons-io-1.4.jar、json_simple-1.1.jar，copy到tomcat下的kindeidtor/WEB-INF/lib目錄；

4、啟動(dòng)tomcat；

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

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

7、重新刷新下瀏覽器，OK，KindEditor官網(wǎng)上的demo又展示出來(lái)了。

kindeditor編輯器圖片上傳教程

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

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

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

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

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

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

一、編輯器好像是UTF-8編碼的，可以在GB2312頁(yè)面上使用嗎？
1、可以使用。有兩種方法，一種方法是引入kindeditor.js文件時(shí)將script的charset屬性設(shè)置成utf-8。
2、還有一種方法是直接將html/js/css文件編碼都轉(zhuǎn)換成GB2312編碼(用Notepad++、editPlus等文本編輯器就可以轉(zhuǎn)換編碼)，不過(guò)轉(zhuǎn)換格式后升級(jí)比較困難，建議使用第一種方法。
二、我取不到編輯器數(shù)據(jù)，直接取得textarea的value也沒(méi)用怎么辦？
1、KindEditor的可視化操作在新創(chuàng)建的iframe上執(zhí)行，代碼模式下的textarea框也是新創(chuàng)建的，所以最后提交前需要執(zhí)行 sync() 將HTML數(shù)據(jù)設(shè)置到原來(lái)的textarea。
2、在默認(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)簽。

更新日志

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