kindEditor是一个功能强大的在线文本编辑器,而且提供了插件扩展功能,更好的满足用户各方面的需求。在项目中,我们就有如此的需求:在kindEditor编辑器中,添加一条下划线,并且在下划线的中间位改下划线编号类似填空题的要求:。因此需要自己写一个插件,kindEditor插件的编写在官方文档中都写的很明白,主要分为几个步骤,

1、首先设置插件按钮(工具栏上的按钮)的样式,

.ke-icon-hello {
background-image: url(../skins/default/default.gif);
background-position: 0px -672px;
width: 16px;
height: 16px;
}

2、设置插件按钮的提示内容

KindEditor.lang({
hello : '你好'
});

3、编写插件按钮的点击事件

KindEditor.plugin('hello', function(K) {
var editor = this, name = 'hello';
// 点击图标时执行
editor.clickToolbar(name, function() {
editor.insertHtml('你好');
});
});

这个点击事件需要定义相应的js文件放到kindEditor文件下plugs目录下面。

4、初始化kindEditor时,加上我们的插件按钮

K.create('#id', {
items : ['hello']
});

这样一个kindEditor插件就写好了。然而我的问题来了,因为我要监听我的插件按钮的点击事件,没添加一个下划线,我就需要对下划线上的数字重新排序,(就是一个input,数字就是input的value)在点击事件里就需要遍历input,然而在改方法里就一直获得不到这个元素,用kindEditor文档推荐的query,queryAll ,K()等方法得到的都是null。最后查看编辑器在页面上渲染的效果后发现,编辑器是渲染在一个iframe中的。由此恍然大悟得到了解决方法。

因为渲染在一个iframe中,并且又是一个新的html因此要拿到该body里面的document元素,有如下方法可以实现该功能

document.getElementById(Iframe_Id).contentDocument.getElementById(Element_Id);

使用该方法,顺利的拿到了下划线元素,也完成了排序。

新的问题又来了,在编辑框内,如果删除一条下划线,又需要对下划线上的序号重新排序;这里用到了kindEditor的事件——afterChange,在该方法中遍历下划线元素,重新排序。这里设置下划线的值时,如果使用document.getElementById("id").value = "newValue" ;时,在页面上是改变了,其实html中value是没有改变的,解决方法就是使用方法设置元素的值。

document.getElementById("id").setAttribute("value","newValue");

最后留下一些疑问:

kindEditor文档中的那些和jquery操作元素十分相似的方法,如K.attr(),K.val()...K()等方法,到底是如何使用,用在什么地方,什么时间。这些问题还没弄明白,等到以后遇到在去学习,也希望有这方面经验的大神指点一二。

kindEditor编写插件遇到的问题的更多相关文章

  1. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  2. 再谈:jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  3. jQuery自己编写插件()

    引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可 ...

  4. 【原】jQuery编写插件

    分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js.该插件用来实现以下两个功能1.设置元素的颜色.2.获取元素的颜色. 先在搭建好如下编写插件的框架: ;(fun ...

  5. jquery编写插件

    jquery编写插件的方法    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...

  6. Qt中如何 编写插件 加载插件 卸载插件

    Qt中如何 编写插件 加载插件 卸载插件是本文要介绍的内容.Qt提供了一个类QPluginLoader来加载静态库和动态库,在Qt中,Qt把动态库和静态库都看成是一个插件,使用QPluginLoade ...

  7. vscode编写插件

    vscode编写插件详细过程 前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程.然而文章还没有写 ...

  8. Kindeditor编辑插件的使用

    1.首先kindeditor这个插件需要配合着asp.net的自生带的控件textbox来实现 2.首先前台界面代码 <f:FormRow runat="server"> ...

  9. saltstack主机管理项目:编写插件基类-获取主机列表-提取yaml配置文件(四)

    一.编写插件基类 1.目录结构 1.我是如何获知我有多少种系统? 当客户端第一连接过来的时候,我就已经把这些文件存下来了 ,存在到哪里了?存到数据库了 每次对主机发送命令的动作时,我从库里把数据取出来 ...

随机推荐

  1. Java环境安装配置好了却不能运行xxx.jar程序?

    1,检查Java环境是否已安装或配置成功. WIN+R → cmd → java -version,查看是否可以读取到Java版本信息,如果读取不到,说明Java环境安装或配置有问题,重新装一下. 2 ...

  2. python中set集合的使用

    集合(set):把不同的元素组成一起形成集合,是python基本的数据类型. python 的集合类型和 其他语言类似, 是一个无序不重复元素集 基本功能包括关系测试和消除重复元素.集合对象还支持un ...

  3. Log4net根据日志等级输出到不同文件

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...

  4. LeetCode224. Basic Calculator (用栈计算表达式)

    解题思路 用两个栈分别存字符和数字. 顺序读入字符,处理方式分为字符和数字两种. 处理字符分为')'和非')'两种. 处理数字需要读取字符栈栈顶,分为'+'.'-'和非'+'.'-'. 代码 clas ...

  5. 快速新建一个纯净的java pom项目 project

    前期的java环境安装就不再阐述了使用步骤java -jar project-creator-0.1.jar projectName [war] 1> 比如你要创建一个项目名字叫 smile-o ...

  6. uva 11082 Matrix Decompressing 【 最大流 】

    只看题目的话~~怎么也看不出来是网络流的题目的说啊~~~~ 建图好神奇~~ 最开始不懂---后来看了一下这篇-- http://www.cnblogs.com/AOQNRMGYXLMV/p/42807 ...

  7. ABBYY迎国庆·庆中秋限时折扣狂潮,再来一波

    继ABBYY 早秋限时活动之后,ABBYY官方为迎国庆,庆中秋,折扣狂潮,又来一波.上次活动由于时间短,任务急,数量少,使得不少小伙伴抱憾而止,选择默默等待良机.现在,良机来了,即便没有上次的打折力度 ...

  8. JS怎样写闰年

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 紫书 例题8-2 UVa 11605(构造法)

    这道题方法非常的巧妙, 两层的n*n, 第一层第I行全是第I个国家, 第二层的第j列全是第j个国家.这样能符合题目的条件.比如说第1个国家, 在第一层的第一行全是A, 然后在第二层的第一行就有ABCD ...

  10. 【【henuacm2016级暑期训练】动态规划专题 J】Red-Green Towers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然最多1000行的样子. 从上到小做dp 设f[i][j]为前i行,使用了j个红色方块的方案数. f[1][r] = 1;如果r& ...