百度编辑器 umeditor 自定义按钮

第一步：toolbar 里面加上要自定义的按钮英文名

umeditor.config.js 文件
我加的‘selfupload’
//工具栏上的所有的功能按钮和下拉框，可以在 new 编辑器的实例时选择自己需要的从新定义
,toolbar:[
'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify |',
'link unlink | emotion image video | map',
'| horizontal print preview fullscreen', 'drafts', 'formula','selfupload'
]

第二步：labelMap 里面加上中英文对照名

umeditor.zh-cn.js 文件

'labelMap':{
'selfupload': '上传文件'
},

第三步：css 文件里面加上按钮的样式

umeditor.css 文件

.edui-btn-toolbar .edui-btn .edui-icon-selfupload {
background-position: -560px -40px;
}

第四步：按钮注册

umeditor.js 文件
//自定义上传文件按钮注册
UM.registerUI('selfupload',
function(name) {
var me = this;
这里可以自己定义代码*
var btn = .eduibutton({
icon : name,
click : function(){
me.execCommand(name);
},
title: this.getLang('labelMap')[name] || ''
});

    this.addListener('selectionchange',function(){
        var state = this.queryCommandState(name);
        $btn.edui().disabled(state == -1).active(state == 1)
    });
    return $btn;
}

);

第五步：按钮事件绑定

umeditor.js 文件

//自定义上传文件按钮事件绑定
UM.commands['selfupload'] = {
execCommand: function() {
这里可以自己定义代码*
return true;
},
queryCommandState: function() {

    } 
};

其他：一些要用到常量的配置

umeditor.config.js 文件

就像这样配置

window.UMEDITOR_CONFIG = {

    //为编辑器实例添加一个路径，这个不能被注释
    UMEDITOR_HOME_URL : URL

    //图片上传配置区
    ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
    ,imagePath:URL + "jsp/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
    ,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数
    ,selfuploadUrl:"http://localhost:8199/file/add"                   //自定义上传文件的提交地址