在线HTML编辑器Kindeditor-4.1.10简易示例
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。下载地址:http://www.kindsoft.net/down.php
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 参数关闭过滤模式,保留所有标签。