Kindeditor在线 HTML 编辑器使用

编程知识 行业动态 更新时间:2024-06-13 00:22:45

简介

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 编辑器使用

本文发布于:2023-04-03 05:47:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/dab21477c421aa95eb5fb9238fa86b41.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:在线   编辑器   Kindeditor   HTML

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!