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 - 演示文件
<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
效果如下图