欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ueditor编辑器添加自定义按钮

程序员文章站 2022-05-26 13:19:37
...

首先在ueditor根目录找到文件ueditor.all.js,在最后大括号里添加:

UE.registerUI('button', function(editor, uiName) {
   //注册按钮执行时的command命令,使用命令默认就会带有回退操作
   editor.registerCommand(uiName, {
       execCommand: function() {
            setTimeout(function(){
            	alert('execCommand:' + uiName)
            }, 500);
            alert('execCommand:' + uiName)
       }
   });
   //创建一个button
   var btn = new UE.ui.Button({
       //按钮的名字
       name: uiName,
       //提示
       title: "编辑器目前支持从word单点复制和从文件夹拖拽上传图片!",
       //添加额外样式,指定icon图标,这里默认使用一个重复的icon
       cssRules: 'background-position: -340px 0;',
       //点击时执行的命令
       onclick: function() {
           //这里可以不用执行命令,做你自己的操作也可
           editor.execCommand(uiName);
       }
   });
   //当点到编辑内容上时,按钮要做的状态反射
   editor.addListener('selectionchange', function() {
       var state = editor.queryCommandState(uiName);
       if (state == -1) {
           btn.setDisabled(true);
           btn.setChecked(false);
       } else {
           btn.setDisabled(false);
           btn.setChecked(state);
       }
   });
   //因为你是添加button,所以需要返回这个button
   return btn;
});