KindEditor使用

1.关于KindEditor

(1).简介

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

(2).其他

官网：http://kindeditor.net/about.php

下载：http://kindeditor.net/down.php

文档：http://kindeditor.net/doc.php

2.使用编辑器（kindeditor-4.1.11）

(1).解压 kindeditor-x.x.x.zip 文件，根据需求删除以下目录

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件

(2).HTML页面上添加textarea标签

<textarea id="editor" name="content" style="width:700px;height:300px;"></textarea>

(3).引入CSS和相关JS

<link  href="js/kindeditor-4.1.11/themes/default/default.css" rel="stylesheet"/>
<script charset="utf-8" src="js/kindeditor-4.1.11/kindeditor-all-min.js"></script>
<script charset="utf-8" src="js/kindeditor-4.1.11/lang/zh-CN.js"></script>

(4).初始化编辑器

<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('#editor');
	});
	// 自定义工具栏（具体可以参照文档）
	//var options = {
	        //items : ['code', '|', 'justifyleft', 'justifycenter', 'justifyright',  'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',  
			   //  'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen',  'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',  
			   //  'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat',  '|', 
		           //  'image', 'multiimage', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',   'anchor', 'link', 'unlink'  
		           // ]
	        //}
	//KindEditor.ready(function(K) {
         	//editor = K.create('#editor', options); 
	//});
</script >

3.常用方法

(1).获取HTML（包含标签）

html = $("#editor").val();// jquery方式
html = K("#editor").val();// KE API
html = editor.html();// 
text = editor.text();// 获取纯文本，不包含标签

(2).设置值

editor.html('HTML内容');
editor.sync();// 同步数据后可以直接取得textarea的value，否则$("#id").val()为空

(3).其他

editor.isEmpty();// 判断是否为空
editor.selectedHtml();// 获取选中的HTML
editor.text('<h3>Hello KindEditor</h3>');// 设置文本，标签不起作用，区别html('<h3>Hello KindEditor</h3>')
editor.insertHtml('<strong>插入HTML</strong>');// 在光标后添加HTML
editor.appendHtml('<strong>添加HTML</strong>');// 在末尾添加HTML

效果如下图