kindeditor自定义插件

kindeditor是一款比较好用的富文本，里面功能比较全面，还支持自定义插件。官网的自定义hello插件示例非常简单，想仿照此例做一个插入文本框的插件，一番折腾总算看到效果。

1.定义kindeditor/plugins/hello/hello.js

KindEditor.plugin('hello', function(K) {
        var editor = this, name = 'hello';
        editor.plugin.hello = {
        helloFunc: function(e) {
        editor.insertHtml('世界，你好！[百度官网：http://www.baidu.com]文本框: ');
        }
        };
        // 点击图标时执行
        editor.clickToolbar(name, editor.plugin.hello.helloFunc);
});

2.编写页面kedemo.html

实际操作结果：点击插件插入了文本框，但是点击“单击获取富文本框内容”按钮后，获取的内容不全，标签和标签部分都有，但期望的部分内容没有。

怀疑kindeditor脚本中对做了预置，所以支持它们，没有预置所有没有。

3.在kindeditor中添加对input标签的支持

做法：在kindeditor-all.js中找到htmlTags对象的定义代码，发现确实是对一些html标签做了预置，在htmlTags定义尾部加上对input的设置看看

             ,input : ['id', 'name', 'type', 'class', 'title', 'value', 'width', 'height']

实际操作结果：点击“单击获取富文本框内容”按钮后，看到期望输出的标签内容。

这只是简单扩展demo，实际应用时应该点击插件图标后要弹窗窗口，让用户设置id、name、width、height、title等信息后，再确定。

更进一步的kindeditor/plugins/hello/hello.js示例

KindEditor.plugin('hello', function(K) {
        var editor = this, name = 'hello';
        editor.plugin.hello = {
        helloFunc: function(e) {
        editor.insertHtml('世界，你好！[百度官网：http://www.baidu.com]文本框: ');
        },
        edit : function(){
        //console.log(1);
        html = '

' +
//url
        '

' +
        '' + 'id' + '' +
'

' +
'

' +
'' + 'name' + '' +
'

' +
'

' +
'' + '宽度' + '' +
'

' +
'

' +
'' + '高度' + '' +
'

' +
'

' +
'' + '标题' + '' +
'

' +
'

',
dialog = editor.createDialog({
name : name,
width : 450,
height : 300,
title : '插入文本框',
body : html,
yesBtn : {
name : '确定',
click : function(e) {
var inputId = K.trim(idBox.val());
var inputName = K.trim(nameBox.val());
var inputTitle = K.trim(titleBox.val());
var inputWidth = K.trim(widthBox.val());
var inputHeight = K.trim(heightBox.val());
if (!/^\d*$/.test(inputWidth)) {
alert("宽度必须是数字");
widthBox[0].focus();
return;
}
if (!/^\d*$/.test(inputHeight)) {
alert("高度必须是数字");
heightBox[0].focus();
return;
}
editor.insertHtml('').hideDialog().focus();
}
}
}),
div = dialog.div,
idBox = K('input[name="id"]', div),
nameBox = K('input[name="name"]', div),
widthBox = K('input[name="width"]', div),
heightBox = K('input[name="height"]', div),
titleBox = K('input[name="title"]', div);
        }
       
        };
        // 点击图标时执行
        editor.clickToolbar(name, editor.plugin.hello.edit);
});