百度编辑器 umeditor 自定义按钮

本贴最后更新于 2337 天前,其中的信息可能已经时移世易

第一步: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"                   //自定义上传文件的提交地址
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 192 关注
  • UMeditor
    1 引用
  • 编辑器
    32 引用 • 778 回帖 • 2 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...