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”的“ example”）

$(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本身初始化之前，jQuery中准备就绪的文档很可能会触发。如果是这种情况，您将无法在TinyMCE初始化之前使用TinyMCE API添加插件。

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

Answer 2

您正在使用哪个版本的TinyMCE？此代码可在我们的提琴网站上正常工作： http://fiddle.tinymce.com/PGgaab

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

2 个答案: