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编译器里的内容

KindEditor用法介绍的更多相关文章

  1. 好压(HaoZip)的命令行模式用法介绍

    好压压缩软件,又叫“2345好压”,是一款国产的优秀压缩软件,目前是免费的,据官网介绍,该软件永久免费.官网地址:http://haozip.2345.com/ 本文主要对该软件的命令行模式用法进行介 ...

  2. sql事务(Transaction)用法介绍及回滚实例

    sql事务(Transaction)用法介绍及回滚实例 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务, S ...

  3. STL vector用法介绍

    STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if()和f ...

  4. 怎么通过activity里面的一个按钮跳转到另一个fragment(android FragmentTransaction.replace的用法介绍)

    即:android FragmentTransaction.replace的用法介绍 Fragment的生命周期和它的宿主Activity密切相关,几乎和宿主Activity的生命周期一致,他们之间最 ...

  5. Oracle CASE WHEN 用法介绍[Z]

    Oracle CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ...

  6. LinqToXml高级用法介绍

    LinqToXml高级用法介绍 一.函数构造 什么是函数构造?其是指通过单个语句构建XML树的能力. 那么它有什么作用呢? 作用1.用单个表达式快速创建复杂的XML树 见实例代码CreateXml( ...

  7. Oracle学习笔记_06_CASE WHEN 用法介绍

    1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 CASE ' THEN ...

  8. mysql进阶(六)模糊查询的四种用法介绍

    mysql中模糊查询的四种用法介绍 这篇文章主要介绍了mysql中模糊查询的四种用法,需要的朋友可以参考下. 下面介绍mysql中模糊查询的四种用法: 1 %: 表示任意0个或多个字符.可匹配任意类型 ...

  9. object-fit 属性的用法介绍

    这个要在宽,高都是100%的情况下才能提现 object-fit 属性的用法介绍 fill(不保持纵横比缩放图片,使图片完全适应) contain(保持纵横比缩放图片,使图片的长边能完全显示出来) c ...

随机推荐

  1. Android adb的使用

    参考:http://blog.csdn.net/veryitman/article/details/6437090 1. 进入shell 进入设备shell adb shell 2. 安装 apk & ...

  2. 接着上一篇 《Is WPF dead》

    最近美国的PM传来消息,说微软在收集开发者的意见,会对WPF进行改进,微软会主要在1) performance 2) interop 3) touch and 4) access to WinRT A ...

  3. Codeforces VK Cup 2012 Round 3 A. Variable, or There and Back Again(dfs)

    题目链接:http://codeforces.com/problemset/problem/164/A 思路:用vector分别保留原图和发图,然后分别从val值为1的点正向遍历,va值为2的点反向遍 ...

  4. mob免费短信验证码安卓SDK调用方法

    很不错的一款免费验证码平台,支持IOS.安卓,比那些收费的稳定.开发容易.分享给大家,希望大家不要滥用 官网: http://mob.com/ 官方有开发文档,但是有几点要注意的官方没有提到,导致初始 ...

  5. JMeter中的关联-正则表达式提取(1)

    运用Jmeter正则提取器,可以从请求的响应结果中取到需要的内容,从而实现关联. jmeter之关联 的个人理解: 关联是请求与请求之间存在数据依赖关系,需要从上一个请求获取下一个请求需要回传回去的数 ...

  6. 性能测试-ORACLE性能监控

    通过lr做性能测试的过程,通过监控Oracle数据库的性能 采用的监控工具:PeOny PeOny安装 1. 安装服务端 1) LINUX平台安装 解压缩peony3.x.0.x.tar.gz文件,b ...

  7. MySql数据库安装&修改密码&开启远程连接图解

    相关工具下载地址: mysql5.6 链接:http://pan.baidu.com/s/1o8ybn4I密码:aim1 SQLyog-12.0.8 链接:http://pan.baidu.com/s ...

  8. Uva 839 Not so Mobile

    0.最后输出的yes no的大小写 1.注意 递归边界   一直到没有左右子树 即b1=b2=false的时候 才返回 是否 天平平衡. 2.注意重量是利用引用来传递的 #include <io ...

  9. DSP using MATLAB示例Example3.18

    代码: % Analog Signal Dt = 0.00005; t = -0.005:Dt:0.005; xa = exp(-1000*abs(t)); % Continuous-time Fou ...

  10. programing Python --Sys module

    Recall that every python module has a built_in __name__ variable that python sets to the __main__ st ...