在线HTML编辑器Kindeditor-4.1.10简易示例

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上得到所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。下载地址：http://www.kindsoft.net/down.php

解压文件以后的文件目录以下图：

 

其中，asp、asp.net、jsp和php文件夹是后台处理程序，examples是演示文件，能够根据本身需求删除后上传至本身的服务器。

接下来就是调用kindeditor，在页面上实如今线HTML编辑功能。

第一步，先在须要调用编辑器的表单中添加文本域textarea，做为KindEditor实现的载体，示例代码以下：

1 <textareaid="editor_id"name="content"style="width:700px;height:300px;">
2 　　默认显示的内容
3 </textarea>

第二步，引入KindEditor的js文件。因为KindEditor是用JS编写的，所以在初始化编辑器以前，必须引入KindEditor的js文件，引入方法示例代码以下：

1 <script charset="utf-8" src="/你的目录/kindeditor.js"></script>
2 <script charset="utf-8" src="/你的目录/lang/zh_CN.js"></script>

第三步，初始化KindEditor编辑器，初始化示例以下：

1 <script>
2 　　KindEditor.ready(function(K) {
3 　　　　window.editor = K.create('#editor_id');
4 　　});
5 </script>

Note：id在当前页面必须是惟一的值。

第四步，获取KindEditor中的HTML数据。KindEditor的可视化操做在新建立的iframe上执行，代码模式下的textarea框也是新建立的，因此最后提交前须要执行 sync() 将HTML数据设置到原来的textarea。示例代码以下：

 1 <script>
 2 　　// 取得HTML内容
 3 　　html = editor.html();
 4 
 5 　　// 同步textarea["#editor_id"]和KindEditor数据后,能够直接取得textarea的value,不然textarea的值为空或者默认值
 6 　　editor.sync();
 7 　　// 在下列方法中选择其一便可获取到KindEditor的HTML数据
 8 　　html=document.getElementById('editor_id').value;// 原生API
 9　　 html=K('#editor_id').val();// KindEditor Node API
10 　　html=$('#editor_id').val();// jQuery// 设置HTML内容editor.html('HTML内容');
11 </script>

Note：
1.在textarea里设置HTML内容便可实现编辑，在这里须要注意的是，若是从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
2.KindEditor在默认状况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，因此用form方式提交数据，不须要手动执行sync()函数。
3.KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。固然也能够用 filterMode 参数关闭过滤模式，保留全部标签。
 

参考内容：

1. KindEditor： http://kindeditor.net/docs/usage.html