在 TinyMCE 5 中创建插件

Question

我正在尝试在 TinyMCE 中创建一个简单的测试插件。首先，文档似乎没有页面告诉我们如何准确地执行此操作。

我通过 Google 搜索找到了v4 的此页面，该页面已过时，尽管据称它位于“高级主题”下，但那里的链接都没有指向此页面！但是，它会引发我可以使用的异常。它告诉我我需要更换“编辑器”。到“editor.ui.register”。这使得异常消失，但我的工具栏和菜单项没有出现在任何地方！

我尝试在页面上切换到 v5 并搜索并找到了这个示例。再次，它引导我到一个页面，在适当的区域没有链接到它。

我“按原样”尝试了示例代码，并在没有“ui.registry”的情况下得到了有关过时用法的相同异常！但我修复了这个问题，然后得到了这个异常：

Uncaught Error: Errors: 
Failed path: (toolbarbutton)
Could not find valid *strict* value for "onAction" in {
  "type": "button",
  "text": "My button",
  "icon": false
},Failed path: (toolbarbutton > icon)
Expected type: string but got: boolean

Input object: {
  "type": "button",
  "text": "My button",
  "icon": false
}
    at theme.min.js:9
    at Object.getOrDie (theme.min.js:9)
    at theme.min.js:9
    at theme.min.js:9
    at Object.fold (theme.min.js:9)
    at theme.min.js:9
    at Object.fold (theme.min.js:9)
    at dE (theme.min.js:9)
    at theme.min.js:9
    at _ (theme.min.js:9)

我又尝试了一些，但没有成功。例如，如果我删除按钮，工具栏根本不会出现，但没有错误。如果我删除工具栏引用，工具栏会重新出现，但菜单选项仍然不会出现。

我想做的就是创建一个简单的示例，在其中创建一个菜单选项，将某些内容记录到控制台，并向工具栏添加一个按钮，单击时执行相同的操作。

我该怎么做呢？我发现的所有其他问题似乎都涉及旧版本的 TinyMCE。

Answer 1

该页面实际上已从导航中删除，因为它尚未针对 TinyMCE 5.0 进行更新，但实际上今天已更新以包含适用于 5.0 的示例。我猜您可能已经访问了该页面的缓存副本，因此我也会在此处添加详细信息。

菜单和按钮 API 在 5.0 中发生了相当大的变化，因此可以在此处找到用于注册菜单和按钮的新文档：

• https://www.tiny.cloud/docs/ui-components/menuitems/
• https://www.tiny.cloud/docs/ui-components/toolbarbuttons/

因此，要在自定义插件中使用它们，您需要执行以下操作：

tinymce.PluginManager.add('example', function(editor, url) {
  var openDialog = function () {
    return editor.windowManager.open({
      title: 'Example plugin',
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'title',
            label: 'Title'
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onSubmit: function (api) {
        var data = api.getData();
        // Insert content when the window form is submitted
        editor.insertContent('Title: ' + data.title);
        api.close();
      }
    });
  };
  
  // Add a button that opens a window
  editor.ui.registry.addButton('example', {
    text: 'My button',
    onAction: function () {
      // Open window
      openDialog();
    }
  });

  // Adds a menu item, which can then be included in any menu via the menu/menubar configuration
  editor.ui.registry.addMenuItem('example', {
    text: 'Example plugin',
    onAction: function() {
      // Open window
      openDialog();
    }
  });

  return {
    getMetadata: function () {
      return  {
        name: "Example plugin",
        url: "http://exampleplugindocsurl.com"
      };
    }
  };
});

要将菜单添加到菜单栏，您还必须包含menu和menubar配置，因为上下文属性已被删除。我们正在寻找其他方法将其恢复（请参阅https://github.com/tinymce/tinymce/issues/4835）。

这是一个小提琴，显示这一切正常工作：http ://fiddle.tinymce.com/VEgaab