UEditor 添加自定义下拉框

11 9 月

UEditor是一款很不错的Javascript富文本编辑器,其自带功能甚多,但是到特定项目中,总是会遇到不够用的时候,下面是添加一个下拉框的示例:

var objItems = [{id:1, name:'测试1'},{id:2, name:'测试2'},{id:3, name:'测试3'}];

UE.registerUI('replacekey', function(editor, uiName) {
    //注册按钮执行时的command命令,用uiName作为command名字,使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand:function(cmdName, item){
            var html = '<input style="border:#6CF solid 1px;" truevalue="'  + item.value +
                '" value="'+ item.label + '" type="button" />';
            this.execCommand('insertHtml', html);
        }
    });
    //创建下拉菜单中的键值对,这里我用字体大小作为例子
    var items = [];
    for (var i = 0; i < objItems.length; i++){
        var item = objItems[i];
        items.push({
            //显示的条目
            label: item['name'],
            //选中条目后的返回值
            value: item['id']
        });
    }
    //创建下拉框
    var combox = new UE.ui.Combox({
        //需要指定当前的编辑器实例
        editor : editor,
        //添加条目
        items : items,
        //当选中时要做的事情
        onselect : function (t, index) {
            //拿到选中条目的值
            editor.execCommand(uiName, this.items[index]);
            //t.setValue(t.initValue);
        },
        //提示
        title:'项目变量',
        //当编辑器没有焦点时,combox默认显示的内容
        initValue:'项目变量'
    });
    return combox;
});

需要注意的是UE.registerUI这个函数,第一个参数是你自定义功能的名称,但是文档没有说明的是,这个名称必须是全部小写的!因为这个导致我调了很久的说。

One Reply to “UEditor 添加自定义下拉框”

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注