简介
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();
更多推荐
Kindeditor在线 HTML 编辑器使用
发布评论