tinymce - 将自定义简码占位符添加到 TinyMCE 5

Question

我在 tinymce 中编辑的文档中有一些系统代码。该代码应由所见即所得编辑器中的交互式占位符表示。

它就像普通图像，但结果应该是这个代码（而不是解析为 HTML）：

[img]id=123&text=bla[/img]

我找不到有关如何为自定义元素创建此交互式占位符元素的任何信息...

有什么建议么？

标签： tinymce

Answer 1

像这样，并设置为工具栏项

editor.ui.registry.addMenuButton('plugins', {
   text: 'Plugin',
  fetch: function (callback) {
      var items = [
           {type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
          ];
callback(items);
    }
});