CODEWITHSUNDEEP
tinymce
Michael
Michael

Reputation: 9402

Creating a plugin in TinyMCE 5

I'm trying to create a simple test plugin in TinyMCE. First off, the documentation doesn't seem to have a page telling how to do this exactly.

I found this page for v4 which is out of date via a Google Search, although it is purportedly under "Advanced topics", none of the links there lead to this page!. However, it throws exceptions I can use. It tells me I need to change "editor." to "editor.ui.register.". This makes the exception go away, but my toolbar and menu item don't appear anywhere!

I tried switching to v5 on the page and searching and found this example. Again, it leads me to a page with no links to it in the appropriate area.

I tried the sample code "as is" and get the same exceptions about the obsolete usage without "ui.registry"! But I fix that and then get this exception:

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)

I played around with it some more without success. For instance, if I remove the button the toolbar doesn't appear at all, but there are no errors. If I remove the toolbar reference the toolbar re-appears, but the menu option still doesn't appear.

All I want to do is create a simple example where I create a menu option that logs something to the console, and add a button to the toolbar that does the same when clicked.

How do I do this? All the other questions I have found seem to refer to older versions of TinyMCE.

Upvotes: 5

Views: 5736

Answers (1)

newso
newso

Reputation: 917

That page was actually removed from the navigation because it hadn't been updated for TinyMCE 5.0 yet, but it was actually updated today to include an example that works with 5.0. I'm guessing you might have hit a cached copy of the page, so I'll add the details here as well.

The menu and button API's have changed fairly significantly in 5.0 so the new docs for registering menus and buttons can be found here:

So to use them in a custom plugin, you'd do something like this:

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"
      };
    }
  };
});

To add the menu to the menubar, then you'd also have to include a menu and menubar configuration, as the context property has been removed. We're looking at alternative ways to bring it back though (see https://github.com/tinymce/tinymce/issues/4835).

Here's a fiddle showing this all working: http://fiddle.tinymce.com/VEgaab

Upvotes: 4

Related Questions