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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112580.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 【交换机】MAC-VLAN的功能作用是什么,如何设置[通俗易懂]

    【交换机】MAC-VLAN的功能作用是什么,如何设置[通俗易懂]MACVLAN就是基于MAC地址划分的VLAN,MACVLAN的最大优点就是用户不需要固定在某些端口下,可以随意移动,比如当用户物理位置移动时,即从一台交换机换到其它的交换机时,VLAN不用重新配置,所以,可以认为这种根据MAC地址的划分VLAN方法是基于用户的MAC地址信息来的。MACVLAN的缺点是初始化时,所有的用户都必须进行配置MAC与VLAN的对应关系。主要有两个配置步骤:1、所

  • 文本分类常用算法比较

    文本分类常用算法比较本文对文本分类中的常用算法进行了小结,比较它们之间的优劣,为算法的选择提供依据。 一、决策树(DecisionTrees)优点: 1、决策树易于理解和解释.人们在通过解释后都有能力去理解决策树所表达的意义。 2、对于决策树,数据的准备往往是简单或者是不必要的.其他的技术往往要求先把数据一般化,比如去掉多余的或者空白的属性。 3、能够同时处理数据型和常规型属性。其他的

  • 腾讯云PHP环境ssl,Windows 64位下为wampserver或phpstudy 腾讯云免费SSL证书安装

    腾讯云PHP环境ssl,Windows 64位下为wampserver或phpstudy 腾讯云免费SSL证书安装目录如文章对你有用的话请点个赞1.下载证书​解压后复制Apache文件夹​2.打开httpd.ini配置文件LoadModulessl_modulemodules/mod_ssl.so将这行的注释的“#”去掉Includeextra/httpd-ssl.conf将这行的注释的“#”去掉ps:没有就添加3.接下来:extra/httpd-ssl.conf文件ServerName后面改成你…

  • python android开发_python编制应用程序

    python android开发_python编制应用程序本节目录:1.下载和安装ScriptingLayerforAndroid(SL4A)2.下载和安装Pythonforandroid3.第一个HelloWorld程序1.下载和安装ScriptingLayerforAndroid(SL4A)ScriptingLayerforAndroid(SL4A)是一个开源项目,目标是为android系统提供脚本语言的支持,使用…

  • 通达信常用颜色及图标「建议收藏」

    通达信常用颜色及图标「建议收藏」颜色代码大全:1)COLOR自定义色格式为COLOR+“RRGGBB”:RR、GG、BB表示红蓝色、绿色和蓝色的分量,每种颜色的取值范围是00-FF,采用了16进制)例如:MA5:MA(CLOS

  • [转载].SDRAM时钟相移估算

    [转载].SDRAM时钟相移估算

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号