kindEditor编写插件遇到的问题
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编写插件遇到的问题的更多相关文章
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- jQuery自己编写插件()
引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可 ...
- 【原】jQuery编写插件
分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js.该插件用来实现以下两个功能1.设置元素的颜色.2.获取元素的颜色. 先在搭建好如下编写插件的框架: ;(fun ...
- jquery编写插件
jquery编写插件的方法 版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...
- Qt中如何 编写插件 加载插件 卸载插件
Qt中如何 编写插件 加载插件 卸载插件是本文要介绍的内容.Qt提供了一个类QPluginLoader来加载静态库和动态库,在Qt中,Qt把动态库和静态库都看成是一个插件,使用QPluginLoade ...
- vscode编写插件
vscode编写插件详细过程 前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程.然而文章还没有写 ...
- Kindeditor编辑插件的使用
1.首先kindeditor这个插件需要配合着asp.net的自生带的控件textbox来实现 2.首先前台界面代码 <f:FormRow runat="server"> ...
- saltstack主机管理项目:编写插件基类-获取主机列表-提取yaml配置文件(四)
一.编写插件基类 1.目录结构 1.我是如何获知我有多少种系统? 当客户端第一连接过来的时候,我就已经把这些文件存下来了 ,存在到哪里了?存到数据库了 每次对主机发送命令的动作时,我从库里把数据取出来 ...
随机推荐
- webpack配置的学习
1.把不需要打包的文件复制到打包后的文件夹里 2.通过 Plugin 把注入到 bundle.js 文件里的 CSS 提取到单独的文件中
- 腾讯测试工程师:你以为会打LOL就能做测试了?
周日参加完公司团建,回家路上拼到一个IT界的老司机,他和几个朋友组件团队承接开发项目,知道我是做测试的,问了我一个问题: “你们大公司的测试都做什么?” “测试应该不好模仿吧?” 刚开始我也不清楚他的 ...
- ZBrush中如何做不同图案的遮罩
ZBrush®软件中不仅可以创建矩形遮罩还可以创建有图案的遮罩,且是非常简单有效的,那么究竟怎样做出神奇的效果,本文将为您详细讲解. 有关反转遮罩.清除遮罩的详细内容,请点击:ZBrush中如何反选遮 ...
- Eclipse中删除GIT分支
删除GIT分支: 删除分支时不能直接删除本分支,所以要切换到另一分支,即非删除分支. 1.右击项目——Team——Advanced——Delete Branch...: 2. 在弹出的Delete b ...
- Pyhton学习——Day33
#并发式编程# 操作系统是一个用来协调.管理和控制计算机硬件和软件资源的系统程序,它位于硬件和应用程序之间.# (程序是运行在系统上的具有某种功能的软件,比如说浏览器,音乐播放器等.)# 操作系统的内 ...
- CSS布局总结(二)
前言:今天实训课依旧很水,继续总结,今天主要补了一下布局的知识.响应式的作业还没做完... 一.两列布局 html部分 <div class="parent"> < ...
- splay 文艺平衡树 (数据结构)
题目大意:略 splay维护区间翻转裸题,为了减少不必要的麻烦,多插入两个点,分别是0和n+1 每次找区间的第K个值,就在splay上二分即可 顺便学了一下splay的完美建树,而且splay有一些小 ...
- python_字典的使用
'''info = { "stu1":"Lie","stu2":"Weite","stu3":&qu ...
- Unity 多场景打包
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50580641 作者:car ...
- iText、poi操作word2007(读取,生成)
关于生成word文件以及插入文字.表格.图片等功能,我使用了poi和itext,因为poi插入图片的jar包我在网上查并不是太完全,也可能我没找到如何使用,所以插入图片我用的是itext iText所 ...