KindEditor用法介绍「建议收藏」

KindEditor用法介绍「建议收藏」KindEditor是一套很方便的html编译器插件。在这里做一个简单的使用介绍。首先在官网上下载最新的KindEditor文件(里面有jsp,asp等不同版本文件夹,可以删掉你不需要的版本),把

大家好,又见面了,我是你们的朋友全栈君。

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

首先在官网上下载最新的KindEditor文件(里面有jsp,asp等不同版本文件夹,可以删掉你不需要的版本),

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

 

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

<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”

<textarea id="kindEditor_demo"></textarea>

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

<script type="text/javascript">
    //KindEditor脚本
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('#kindEditor_demo', {
        });
    });
</script>

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

 

用法一,自己选择需要的功能:

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

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

KindEditor.ready(function(K) {
        editor = K.create('#你的textareaid名', {
            items : ['forecolor','emoticons']
        });
    });

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

(同理,对于该编译器的很多设置都是通过这种方式来完成的)

 

用法二,KindEditor的一个奇怪特性:

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

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

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编译器进行操作,令其进行同步数据。

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对象。

如:

editor.sync();//将KindEditor的数据同步到textarea标签。
var value_content = $("#text_new_continue").val();

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

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

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

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

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

(1)


相关推荐

  • 手机号码归属地服务[转载]「建议收藏」

    手机号码归属地服务[转载]「建议收藏」服务地址:http://webservice.webxml.com.cn/WebServices/MobileCodeWS.asmxWebXml.com.cn国内手机号码归属地查询WEB服务,提供最新的国内手机号码段归属地数据,每月更新。使用本站WEB服务请注明或链接本站:http://www.webxml.com.cn/感谢大家的支持!支持下列操作。有关正式定义,请查看服务说明。…

  • LAN8720A网络模块的使用问题

    LAN8720A网络模块的使用问题一、LAN8720A模块驱动电路最近在调试STM32F4驱动LAN8720A网络模块,在做方案前参考是正点原子的LAN8720A的驱动电路方案,但是从网上买回来的LAN8720A模块用正点原子的例程一直驱动不起来,在windows系统下一直都ping不通,后面对比正点原子的LAN8720A与网上买回来的微雪LAN8720A模块的电路有差异。下图为网上买回来微雪的LAN8720A驱动电路:下…

  • JAVA的一般输入输出 和 快速输入输出 (BufferedReader&BufferedWrite)

    JAVA的一般输入输出 和 快速输入输出 (BufferedReader&BufferedWrite)JAVA基础知识和常用算法合集:https://blog.csdn.net/GD_ONE/article/details/104061907目录1.主类的命名必须是Main2.输入输出:2.1输入:(1)使用Scanner类进行输入(2)hasNext()方法2.2输出3快速输入输出3.1使用StreamTokenizer和PrintW…

  • 可取回的国内csgo开箱网站incsgo开箱[通俗易懂]

    可取回的国内csgo开箱网站incsgo开箱[通俗易懂]可取回的国内csgo开箱网站incsgo开箱官方链接:www.incsgo.gg注册登录自动免费获得$1.00美金优惠码:csgogo(充值使用csgogo可增加5%充值金额)支付:微信支付宝状态:直接取回

  • java中的泛型(二)

    java中的泛型(二)

  • 国产数据库乱象_四代户户通怎么开户

    国产数据库乱象_四代户户通怎么开户其实这篇文章是我周末开始写的,写这篇文章的这个周末,我的很多时候都是在思考一个数据库国产化替代的建设方案,翻阅了大量的资料。今年正好是我参加工作后的第31个年头,工作的最初十年,我写了十年代码,从汇编、COBOL到C语言,写了几十万行代码;随后的十几年,我一直在帮助用户用好数据库,也在帮助Oracle推广RAC技术;2015年开始,我一边继续从事数据库优化的工作,一边在帮助客户如何从Oracle迁移到成本更低的数据库系统上。所以对国产数据库我一直有一种十分特殊的情感,这是一种爱恨交织的情感。所以今天最后用“

发表回复

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

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