Kindeditor在线 HTML 编辑器使用

简介

KindEditor 是一套开源的 HTML 可视化编辑器，主要用于让用户在网站上获得所见即所 得编辑效果，兼容 IE、Firefox、Chrome、Safari、Opera 等主流浏览器。 
 
 1.下载

下载KindEditor

2.解压，开发中只需要导入选中的文件（通常在 webapp 下，建立 editor 文件夹 ） 

3.在使用 kindeditor 页面 导入 

 <!--导入在线HTML编辑器 -->
		<script type="text/javascript" src="../../editor/kindeditor.js" ></script>
		<script type="text/javascript" src="../../editor/lang/zh_CN.js" ></script>
		<link rel="stylesheet" href="../../editor/themes/default/default.css" />

4.应用 kindeditor，页面提供<textarea>文本框  

<td colspan="3">
	<textarea id="description" name="description" style="width:80%" rows="20"></textarea>
</td>

KindEditor.ready(function(K) {
	window.editor = K.create('#description')
});

 在线 HTML 编辑器定制开发  

1． 编辑器初始化参数使用 

语法： K.create('#id',{options});  参数采用 key-value 格式  采用 items 属性，定制工具栏按钮显示  

2.  使用 kindeditor 使用图片上传编辑显示功能，需要指定 uploadJson 和 fileManagerJson

 

 默认实现文件上传程序是 php 程序  ，如果使用 java 实现，需要设置初始化参数

KindEditor.ready(function(K) {
	window.editor = K.create('#description',{	
		allowFileManager:true,
		uploadJson : '../../image_upload.action',
        fileManagerJson : '../../image_manage.action'
	});
});

 注意：当使用 kindEditor 进行编辑数据时，编辑后内容，不会自动随表单进行提交  
 

·KindEditor的可视化操作在新创建的rame上执行，代码模式下的tesxtarea框也是新创建的，所以最后提交前需要执行Sync）将HTL数据设置到原来的textarea。

·KindEditor在默认情况下自动寻找textarea所属的form元素，我到form/后onsubmit事件里添加syna策，所以用form万式提交数据，不需更手动执行sync（)函数。

·KindEdito认采用白名单过滤方式，可用htmITags参数定义要保留的标签和属性。当然也可以用fil能erMode参数关闭过滤模式，保留所有标签。

//通过KindEditor将数据加到textarea中
	window.editor.sync();