百度编辑器UEditor添加自定义按钮

百度编辑器UEditor添加自定义按钮

比如我需要加一个“插入摘要分隔符”的按钮,名为“abstract”

  1. 首先,在ueditor.config.js文件中的toolbars里(约在42行)添加“abstract”

  2. 其次,在ueditor.all.js文件中commands里(约在24003行)添加以下代码

    ,
    'abstract':{
      execCommand:function (cmd, name) {
        me.execCommand('inserthtml', "<!--more-->", true);
        //参数一:类型为插入html
        //参数二:所需的html
        //参数三:不过滤  因为插入html默认false为过滤无效代码,true则不过滤
      },
      queryCommandState: function () {
        return saveKey ? ( me.getPreferences( saveKey ) === null ? -1 : 0 ) : -1;
      },
      notNeedUndo: true,
      ignoreContentChange:true
    }
  3. 语言

    在/lang/en/en.js中添加

    ,'abstract': 'Insert summary separator'

    在/lang/zh-cn/zh-cn.js中添加

    ,'abstract': '插入摘要分隔符'
  4. 样式

    在ueditor.css中添加

    .edui-default  .edui-for-abstract  .edui-icon {   
        background-position: -262px -99px; /*根据自己的需要选择,也可以自定义其他图片*/   
    }

    本以为这样就可以正常显示了,其实不然

    查看了下所用的js,原来是ueditor.all.min.js

  5. 在ueditor.all.min.js文件中commands里添加以下代码(就是步骤2里代码的压缩)

    ,abstract:{execCommand:function(a,c){b.execCommand('inserthtml',"<!--more-->",1);},queryCommandState:function(){return e?null===b.getPreferences(e)?-1:0:-1},notNeedUndo:!0,ignoreContentChange:!0}
  6. 完成,可以正常使用,添加其他按钮同理

标签: UEditor

发表评论: