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

Question

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

如果我在 config.js 文件中注释掉任何与 editor.ui 相关的代码，然后编辑器加载并使用 'Help' 插件，我可以看到我的插件加载正常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/ 中复制，将 "example" 更改为 "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

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

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

Answer 2

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

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

Creating a custom Rails tinyMCE plugin: editor.ui is undefined

tinymce

ruby-on-rails