Создание плагина в TinyMCE 5

Question

Я пытаюсь создать простой тестовый плагин в TinyMCE. Во-первых, в документации, похоже, нет страницы, рассказывающей, как именно это сделать.

Я нашел эту страницу для версии 4, которая устарела через поиск Google, хотя она якобы находится в разделе "Дополнительные темы", ни одна из ссылок не ведет на эту страницу !. Тем не менее, он генерирует исключения, которые я могу использовать. Это говорит мне, что мне нужно сменить «редактор». в "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, так как свойство context было удалено.Мы ищем альтернативные способы вернуть его обратно (см. https://github.com/tinymce/tinymce/issues/4835).

Вот скрипка, показывающая, как все это работает: http://fiddle.tinymce.com/VEgaab