KindEditor是一套很方便的html编译器插件

KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。

首先在官网上下载最新的KindEditor文件&＃xff08;里面有jsp&＃xff0c;asp等不同版本文件夹&＃xff0c;可以删掉你不需要的版本&＃xff09;&＃xff0c;

把整个文件夹放到你的web服务器里&＃xff08;放哪都行&＃xff0c;但放的位置需要有访问权限&＃xff0c;最好建立一个权限为777的public文件夹&＃xff0c;把KindEditor文件夹放进去&＃xff09;。

之后在需要用到KindEditor的页面引入以下两个js文件&＃xff08;具体js目录根据你的KindEditor文件夹位置而定&＃xff09;

之后再在这个页面写一个js脚本&＃xff0c;注意&＃xff1a;这个脚本的作用就是控制该页面的KindEditor编辑器&＃xff0c;js脚本如下&＃xff1a;

这个脚本里的 editor &＃61; K.create(&＃39;#你的textarea的id名&＃39;, {}); 这个&＃xff0c;对应的就是一个KindEditor编辑器。

例子&＃xff1a;

假设我们现在有一个textarea标签&＃xff0c;id设为"kindEditor_demo"

我们再引入刚刚提到的两个js文件后&＃xff0c;再写如下js代码到该页面&＃xff0c;

那么这个textarea标签就会变成KindEditor编译器

用法一&＃xff0c;自己选择需要的功能&＃xff1a;

按照上面的部署方式&＃xff0c;最终呈现的是一个完整版KindEditor编译器&＃xff0c;可其中很多功能不一定需要&＃xff0c;那么可以在刚刚提到的js脚本中对KindEditor编译器进行控制。

假设我们只需要&＃xff1a;插入表情和文字颜色的功能。则可以在js脚本中设定“items ”选项。如&＃xff1a;

其中的&＃39;forecolor&＃39;,&＃39;emoticons&＃39;代表“文字颜色功能”和“插入表情功能”。&＃xff08;具体更多的功能名可以查看官方网址的开发文档&＃xff09;。

&＃xff08;同理&＃xff0c;对于该编译器的很多设置都是通过这种方式来完成的&＃xff09;

用法二&＃xff0c;KindEditor的一个奇怪特性&＃xff1a;

在页面第一次加载时&＃xff0c;不能隐藏KindEditor所在的标签&＃xff0c;否则即使后面利用js将css的display设置为block&＃xff0c;KindEditor也不会显示。

解决的办法是先让网页将所有的KindEditor编辑器加载完后&＃xff0c;再用下面这种方法将需要隐藏的部分隐藏

这段js脚本是等页面加载完后才会执行&＃xff0c;所以此时KindEditor已经加载完了&＃xff0c;可以被隐藏了

用法三&＃xff0c;获取KindEditor编译器的内容。

我们看到的KindEditor编译器实际上不是我们之前自己写在页面中的textarea标签&＃xff0c;当我们在KindEditor编译器里输入完内容并提交表单后&＃xff0c;KindEditor会自动将我们输入的内容“同步”到之前我们自己建的textarea标签中&＃xff0c;之后再发送表单。

所以我们直接获取textarea标签的内容实际是没用的&＃xff0c;正确的做法是让KindEditor将数据“同步”到textarea标签中后&＃xff0c;再获取textarea标签中的内容。

我们可以利用我们之前建的KindEditor对象对KindEditor编译器进行操作&＃xff0c;令其进行同步数据。

上述代码之前提到过&＃xff0c;其中的editor就是“id为text_new_continue的textarea标签”所对应的KindEditor对象。

当我们想令KindEditor编译器将数据同步到“id为text_new_continue的textarea标签”时&＃xff0c;就可以操作editor对象。

如&＃xff1a;

其中value_content就是KindEditor编译器里的内容

文档&＃xff1a;http://kindeditor.net/docs/usage.html