Добавление собственной кнопки для tinymcerte [MODX]

09 Февраля 2023
javascript

Задача: добавить кнопку в редакторе текста TinyMCE Rich Text Editor

В данном примере мы добавим кнопку Clear Both, которая вставит блок div после курсора

  1. Создаем папку clear в папке assets/components/tinymcerte/js/vendor/tinymce/plugins/

  2. Создаем файл plugin.min.js в папке clear

  3. В файл assets/components/tinymcerte/js/vendor/tinymce/plugins/clear/plugin.min.js помещаем следующий код:

    !function(){"use strict";tinymce.util.Tools.resolve("tinymce.PluginManager").add("clear",function(n){var o,t;function e(){return t.execCommand("InsertClear")}(o=n).addCommand("InsertClear",function(){o.execCommand("mceInsertContent",!1,"
    ")}),(t=n).ui.registry.addButton("clear",{icon:"vertical-align",tooltip:"Clear Both",onAction:e}),t.ui.registry.addMenuItem("clear",{icon:"vertical-align",text:"Clear Both",onAction:e})})}();

    Документацию для написания код кнопки можно найти здесь https://www.tiny.cloud/docs/api/tinymce.util/tinymce.util.tools/

  4. Переходим в Системные настройки & События

    Для ключа tinymcerte.plugins и tinymcerte.toolbar1 добавляем нашу кнопку clear