TinyMCE自定义按钮VUE

Question

我无法使用其他工具栏添加自定义按钮

此代码有效

tinyMCE.init({
  selector: '#d1',
  toolbar:'customButton',
  setup(editor) {
    editor.addButton('customButton', {
      text: 'My button',
      icon: false,
      onclick() {
        editor.insertContent("&nbsp;<b>It's my button!</b>&nbsp;")
      },
    })
  },
})

但是，如果我再添加一个工具栏，它就不起作用了，为什么？

toolbar: 'forecolor backcolor' + 
         'customInsertButton',

Answer 1

这与其说是一个 TinyMCE 问题，不如说是一个 JavaScript 问题。问题在于您的串联逻辑：

toolbar: 'forecolor backcolor' + 
         'customInsertButton',

这最终会变成 toolbar: 'forecolor backcolorcustomInsertButton'，如您所见，在 backcolor 和 customInsertButton 之间缺少一个 space/separator。所以要解决这个问题，只需确保添加一个 space，例如：

toolbar: 'forecolor backcolor ' + 
         'customInsertButton',

Answer 2

如果您想在 TinyMCE 中使用多个工具栏，您可以使用：

工具栏数组：https://fiddle.tiny.cloud/TBhaab

  toolbar: ['myCustomToolbarButton','forecolor backcolor'],

https://www.tiny.cloud/docs/configure/editor-appearance/#usingmultipletoolbars

工具栏（n）：https://fiddle.tiny.cloud/VBhaab

  toolbar1: 'myCustomToolbarButton',
  toolbar2: 'forecolor backcolor',

https://www.tiny.cloud/docs/configure/editor-appearance/#toolbarn

请注意，您展示的是 TinyMCE 4 按钮语法。如果您使用的是 TinyMCE 5（5.7.1 是当前版本），用于创建自定义按钮的 API 已更改：

TinyMCE 4 版本：https://fiddle.tiny.cloud/QBhaab

TinyMCE 5 版本：https://fiddle.tiny.cloud/SBhaab

editor.ui.registry.addButton('myCustomToolbarButton', {
  text: 'My Button',
    onAction: function () {
      editor.insertContent("&nbsp;<b>It's my button!</b>&nbsp;")
    }
 });

更多信息：https://www.tiny.cloud/docs/ui-components/toolbarbuttons/#howtocreatecustomtoolbarbuttons

TinyMCE自定义按钮VUE

TinyMCE custom button VUE

vue.js

tinymce