Добавить пользовательские пункты меню в tinymce

Вы можете сделать это напрямую через объект конфигурации TinyMCE (плагин не нужен). Вы можете добавить функцию setup в объект конфигурации, а затем добавить либо кнопку панели инструментов, либо пункт меню, чтобы делать то, что вы хотите.

Функция настройки Объект конфигурации TinyMCE может иметь функцию настройки, с помощью которой вы можете добавлять функциональные возможности в редактор. Это простая функция:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  .
  .
  .
  setup: function (editor) {
    //Your setup code here... 
  }
});

Затем вы можете добавить либо кнопку панели инструментов, либо пункт меню с помощью этой функции настройки, как описано ниже.

Пример кнопки панели инструментов:

setup: function (editor) {
    editor.addButton('customButton', {
        text: 'My Custom Button',
        context: 'tags',
        onclick: function () { 
            editor.insertContent('content to insert goes here');
        }
    });
}

Не забудьте добавить эту кнопку на панель инструментов в конфигурации TinyMCE.

Пример меню

setup: function (editor) {
    editor.addMenuItem('custommenuitem', {
        text: 'Text for Menu Item', 
        context: 'insert',
        onclick: function () { 
            editor.insertContent('content to insert goes here');
        }
    });
}

Теперь он появится в меню "Вставка" (в зависимости от настройки контекста)

Вот пример плагина, который модифицирует TinyMCE http://market.impresspages.org/plugins/JustifyAlign

В качестве примера можно взять другие плагины, связанные с TinyMCE: http://market.impresspages.org/plugins.

Сначала вам нужно прочитать документацию плагина ImpressPages, чтобы понять, как создать плагин https://www.impresspages.org/docs/plugin.

Вы перейдете к той части, где вы добавите папку с ресурсами, в которую вы поместите файл конфигурации tinymce.

как этот:

var originalConfigFunction = ipcustomMceConfig;

var ipcustomMceConfig = function () {
var originalConfig = originalConfigFunction();



return originalConfig;
}

var Custom = ipcustomMceConfig;
var ipcustomMceConfig = function () {
var originalConfig = Custom();
originalConfig.toolbar2 = originalConfig.toolbar2 + ' example ';
originalConfig.external_example_path = ip.baseUrl + 'Plugin/example/';


if (!originalConfig.external_plugins) {
    originalConfig.external_plugins = {};
}
originalConfig.external_plugins.example = ip.baseUrl + 'Plugin/Custom/assets/example/plugin.min.js';
originalConfig.content_css = 'url/sample/css';
originalConfig.extended_valid_element = 'span[class]';

return originalConfig;

}

Вот как вы добавляете элемент на панель инструментов в качестве плагина. Обратите внимание на ip.baseUrl, который очень важен для вас, чтобы он оставался динамичным, избегая использования жестко запрограммированных путей.

Посмотрите на этот плагин, например https://github.com/impresspages-plugins/TinyMceFileBrowser, один раз вы просматриваете структуру и каждый файл в ней, вы получите хорошее представление.