速记:给Ueditor添加一个插件 2018-12-26 14:13:08

添加一个Button

  1. 新建一个js文件,模板如下
// UE.registerUI('name', func, index, editorId) 其中index和editorId为可选项,index指定在toolbar的位置,editorId指定绑定到哪个editor上,默认全绑。
// 取名尽量不要用短横线这个符号,容易在css样式那里出问题
UE.registerUI('thedemo', function (editor, uiName) {
  editor.registerCommand(uiName, {
    // 如果要手动执行传参,第一个参数预留的是此action名称,后边的才是你的参数
    execCommand: function (actionName, ...otherArgs) {
      // 点击按钮执行的逻辑
    }
  })

  var btn = new UE.ui.Button({
    name: uiName,
    title: '演示',
    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)
    }
  })

  return btn
})
  1. 在ueditor.css中添加样式
/* /75% 是通过百分比让图片在toolbar上大小得当,可自行调整 */
.edui-default .edui-for-thedemo .edui-icon {
  background: url('../images/thedemo.png') center/75% no-repeat !important;
}
  1. 引入js文件

在引入ueditor.all.js的地方引入此js文件