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()等方法，到底是如何使用，用在什么地方，什么时间。这些问题还没弄明白，等到以后遇到在去学习，也希望有这方面经验的大神指点一二。