KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。
首先在官网上下载最新的KindEditor文件（里面有jsp，asp等不同版本文件夹，可以删掉你不需要的版本），
把整个文件夹放到你的web服务器里（放哪都行，但放的位置需要有访问权限，最好建立一个权限为777的public文件夹，把KindEditor文件夹放进去）。
之后在需要用到KindEditor的页面引入以下两个js文件（具体js目录根据你的KindEditor文件夹位置而定）
|
1
2
|
< script charset="utf-8" src="kindeditor文件夹所在目录/kindeditor文件夹名/kindeditor.js"></ script >
< script charset="utf-8" src="kindeditor文件夹所在目录/kindeditor文件夹名/lang/zh-CN.js"></ script >
|
之后再在这个页面写一个js脚本，注意：这个脚本的作用就是控制该页面的KindEditor编辑器，js脚本如下：
<script type="text/javascript">
//KindEditor脚本
var editor;
KindEditor.ready(function(K) { editor = K.create('#你的textarea的id名', { }); }); </script>
这个脚本里的 editor = K.create('#你的textarea的id名', {}); 这个，对应的就是一个KindEditor编辑器。
例子：
假设我们现在有一个textarea标签，id设为"kindEditor_demo"
|
1
|
< textarea id="kindEditor_demo"></ textarea >
|
我们再引入刚刚提到的两个js文件后，再写如下js代码到该页面，
|
1
2
3
4
5
6
7
8
|
<script type= "text/javascript" >
//KindEditor脚本
var editor;
KindEditor.ready( function (K) {
editor = K.create( '#kindEditor_demo' , {
});
});
</script>
|
那么这个textarea标签就会变成KindEditor编译器
用法一，自己选择需要的功能：
按照上面的部署方式，最终呈现的是一个完整版KindEditor编译器，可其中很多功能不一定需要，那么可以在刚刚提到的js脚本中对KindEditor编译器进行控制。
假设我们只需要：插入表情和文字颜色的功能。则可以在js脚本中设定“items ”选项。如：
|
1
2
3
4
5
|
KindEditor.ready( function (K) {
editor = K.create( '#你的textareaid名' , {
items : [ 'forecolor' , 'emoticons' ]
});
});
|
其中的'forecolor','emoticons'代表“文字颜色功能”和“插入表情功能”。（具体更多的功能名可以查看官方网址的开发文档）。
（同理，对于该编译器的很多设置都是通过这种方式来完成的）
用法二，KindEditor的一个奇怪特性：
在页面第一次加载时，不能隐藏KindEditor所在的标签，否则即使后面利用js将css的display设置为block，KindEditor也不会显示。
解决的办法是先让网页将所有的KindEditor编辑器加载完后，再用下面这种方法将需要隐藏的部分隐藏
|
1
2
3
4
5
|
window.onload = hidden_box;
function hidden_box(){
$( '#inner_wrap' ).css( 'display' , 'none' );
}
|
这段js脚本是等页面加载完后才会执行，所以此时KindEditor已经加载完了，可以被隐藏了
用法三，获取KindEditor编译器的内容。
我们看到的KindEditor编译器实际上不是我们之前自己写在页面中的textarea标签，当我们在KindEditor编译器里输入完内容并提交表单后，KindEditor会自动将我们输入的内容“同步”到之前我们自己建的textarea标签中，之后再发送表单。
所以我们直接获取textarea标签的内容实际是没用的，正确的做法是让KindEditor将数据“同步”到textarea标签中后，再获取textarea标签中的内容。
我们可以利用我们之前建的KindEditor对象对KindEditor编译器进行操作，令其进行同步数据。
|
1
2
3
4
5
|
KindEditor.ready( function (K) {
editor = K.create( '#text_new_continue' , {
});
});
</script>
|
上述代码之前提到过，其中的editor就是“id为text_new_continue的textarea标签”所对应的KindEditor对象。
当我们想令KindEditor编译器将数据同步到“id为text_new_continue的textarea标签”时，就可以操作editor对象。
如：
|
1
2
|
editor.sync(); //将KindEditor的数据同步到textarea标签。
var value_content = $( "#text_new_continue" ).val();
|
其中value_content就是KindEditor编译器里的内容
文档：http://kindeditor.net/docs/usage.html
评论（0）