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

举报
lxw1844912514 发表于 2022/03/27 00:54:10 2022/03/27
【摘要】 KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。 首先在官网上下载最新的KindEditor文件(里面有jsp,asp等不同版本文件夹,可以删掉你不需要的版本), 把整个文件夹放到你的web服务器里(放哪都行,但放的位置需要有访问权限,最好建立一个权限为777的public文件...

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

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100028659

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200