创建自定义 Rails tinyMCE 插件：editor.ui 未定义

Question

我想将自定义插件添加到支持 rails 的 tinyMCE 编辑器，但是在控制台中我得到 editor.ui is undefined 并且它失败了

如果我在 config.js 文件中注释掉与 editor.ui 相关的任何代码，那么编辑器会加载并使用“帮助”插件，我可以看到我的插件从 getMetadata 函数加载正常

/config/tinymce.yml

toolbar:
    - bold italic underline superscript subscript underline | link | alignleft aligncenter alignright | bullist numlist | hr | forecolor | backcolor | table | myplugin | image | help
plugins:
  - link table lists textcolor myplugin image imagetools help

app/assets/javascripts/tinymce/plugins/myplugin/plugin.js （这只是直接从https://www.tiny.cloud/docs/advanced/creating-a-plugin/ 将“示例”更改为“myplugin”）

$(document).on("ready", function() {
  tinymce.PluginManager.add("myplugin", 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("myplugin", {
      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("myplugin", {
      text: "Example plugin",
      onAction: function() {
        // Open window
        openDialog();
      }
    });

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

Answer 1

您使用的是哪个版本的 TinyMCE？此代码在我们的小提琴网站上运行良好： http://fiddle.tinymce.com/PGgaab

Answer 2

如果没有看到您正在使用的完整代码，很难确定，但在 TinyMCE 本身初始化之前，jQuery 中的文档准备就绪很可能会触发。如果是这种情况，您不能在 TinyMCE 初始化之前使用 TinyMCE API 添加插件。

正如该文档页面所建议的那样，我会将插件代码放在一个文件中并像所有其他 TinyMCE 插件一样加载它。 TinyMCE 将在其初始化过程中的正确时间获取插件，这将不再是问题。