zoukankan      html  css  js  c++  java
  • kindEditor编写插件遇到的问题

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

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

    .ke-icon-hello {
            background-image: url(../skins/default/default.gif);
            background-position: 0px -672px;
             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()等方法,到底是如何使用,用在什么地方,什么时间。这些问题还没弄明白,等到以后遇到在去学习,也希望有这方面经验的大神指点一二。

  • 相关阅读:
    Mycat学习笔记 第三篇. MySql 主从同步异常后,主从切换
    【转】MYSQL主从同步故障一例及解决过程!
    Mycat学习笔记 第二篇. MySql 读写分离与日志分析——主从多结点
    Mycat学习笔记 第一篇. MySql 读写分离与日志分析——主从单结点
    Leetcode 172 Factorial Trailing Zeroes
    Leetcode 7 Reverse Integer
    Leetcode 2 Add Two Numbers
    Leetcode 83 Remove Duplicates from Sorted List (快慢指针)
    Leetcode 141 Linked List Cycle(快慢指针)
    Leetcode 21 Merge Two Sorted Lists
  • 原文地址:https://www.cnblogs.com/fsh1542115262/p/4042217.html
Copyright © 2011-2022 走看看