KindEditor

概念

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。

KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

主要特点

体积小，加载速度快，但功能十分丰富。

内置自定义range，完美地支持span标记。

基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。

修改编辑器风格很容易，只需修改一个CSS文件。

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

使用许可

KindEditor源代码在LGPL开源协议下发布，免费使用KindEditor必须遵守LGPL协议，下面是LGPL协议的概要，详细内容请参考原文。

您可以自由使用、修改、分发源代码，但要符合开源精神。

源代码的版权归KindEditor开发团队所有，无论修改程度如何，您不得拥有对源代码的版权。

如果有人向您要编辑器源代码，您有义务提供修改后的源代码。

最好在您的网站或程序上添加KindEditor官方网站链接。

使用方法

1. 下载KindEditor。下载地址在上边

2. 解压文件，并把所有文件上传到您的网站程序目录下，例如：http://你的域名/editor/。

3. 要添加编辑器的页面头部添加以下代码，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 最新版本，下载之后打开 examples/index.html 就可以看到演示。

2、部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

3、修改HTML页面

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内容&lt;/strong&gt;

</textarea>

b: 在该HTML页面添加以下脚本

<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数据

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内容');

目录列表

1、编辑器使用方法

2、编辑器初始化参数

3、更改编辑器外观

4、添加自定义插件

5、上传文件

6、常见问题

7、基础(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