KindEditor

概念

KindEditor是一套開(kāi)源的HTML可視化編輯器，主要用于讓用戶(hù)在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。 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依靠出色的用戶(hù)體驗(yàn)和領(lǐng)先的技術(shù)不斷擴(kuò)大編輯器市場(chǎng)占有率，目前在國(guó)內(nèi)已經(jīng)成為最受歡迎的編輯器之一。

主要特點(diǎn)

體積小，加載速度快，但功能十分豐富。

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

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

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

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

使用許可

KindEditor源代碼在LGPL開(kāi)源協(xié)議下發(fā)布，免費(fèi)使用KindEditor必須遵守LGPL協(xié)議，下面是LGPL協(xié)議的概要，詳細(xì)內(nèi)容請(qǐng)參考原文。

您可以自由使用、修改、分發(fā)源代碼，但要符合開(kāi)源精神。

源代碼的版權(quán)歸KindEditor開(kāi)發(fā)團(tuán)隊(duì)所有，無(wú)論修改程度如何，您不得擁有對(duì)源代碼的版權(quán)。

如果有人向您要編輯器源代碼，您有義務(wù)提供修改后的源代碼。

最好在您的網(wǎng)站或程序上添加KindEditor官方網(wǎng)站鏈接。

使用方法

1. 下載KindEditor。下載地址在上邊

2. 解壓文件，并把所有文件上傳到您的網(wǎng)站程序目錄下，例如：http://你的域名/editor/。

3. 要添加編輯器的頁(yè)面頭部添加以下代碼，id為textarea控件的ID。

-----------------------------------------------------------------------

<script type="text/javascript" charset="utf-8" src="/editor/kindeditor.js"></script>

<script type="text/javascript">

KE.show({id : 'content_1'});

</script>

-----------------------------------------------------------------------

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

2、部署編輯器

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

3、修改HTML頁(yè)面

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

<a class="ed_inner_link" target="_blank" href="/lemma/ShowInnerLink.htm?lemmaId=106445&ss_c=ssc.citiao.link">name</a>="content" </a>style="width:700px;height:300px;">

&lt;strong&gt;HTML內(nèi)容&lt;/strong&gt;

</textarea>

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

<link rel="stylesheet" href="/editor/themes/default/default.css" />

<script charset="utf-8" src="/editor/kindeditor.js"></script>

/zh_CN.js">]]>]]>

<script>

var editor;

KindEditor.ready(function(K) {

editor = K.create('#editor_id');

});

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

html = editor.html();

editor.sync();

html = document.getElementById('editor_id').value;

html = K('#editor_id').val(); // KindEditor Node API

html = $('#editor_id').val(); // jQuery

editor.html('HTML內(nèi)容');

目錄列表

1、編輯器使用方法

2、編輯器初始化參數(shù)

3、更改編輯器外觀

4、添加自定義插件

5、上傳文件

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

7、基礎(chǔ)(Base) API

8、事件(Event) API

9、選擇器(Selector) API

10、Node API

11、Range API

12、Command API

13、Ajax API

14、Widget API

15、下拉菜單(Menu) API

16、取色器(ColorPicker) API

17、彈出窗口(Dialog) API

18、Tabs API

19、上傳按鈕(UplaodButton) API

20、編輯器(Editor) API