Створення плагіна для TinyMCE в Publii

Вступ

Publii — це статичний CMS для створення блогів, який використовує TinyMCE як основний текстовий редактор. Якщо ви хочете додати власні кнопки або розширити функціонал редактора, можна створити власний плагін для TinyMCE.

У цьому матеріалі ми розглянемо процес створення плагіна, який додає дві кнопки для форматування тексту.

У файл config.json вашої теми додайте наступний розділ:

"extensions": {
    "postEditorConfigOverride": true,
    "postEditorCustomScript": true
}

1. Створення базового плагіна

Почнемо з базової структури плагіна. Всі плагіни для TinyMCE Publii реєструються у файлі tinymce.script.js через tinymce.PluginManager.add().

// Реєстрація плагіна
 tinymce.PluginManager.add('customplugin', function(editor, url) {

 });

Цей код створює плагін customplugin, але поки що він не додає ніякого функціоналу.

2. Додавання кнопок до панелі інструментів

Додамо дві кнопки до редактора:

• first_button — вставляє <span class="first-format">Текст</span>.

• second_button — вставляє <span class="second-format">Текст</span>.

Найпростіший варіант

tinymce.PluginManager.add('customplugin', function(editor, url) {
    // Перша кнопка
    editor.ui.registry.addButton('first_button', {
        text: 'First Button',
        icon: 'comment',
        tooltip: 'Insert first format',
        onAction: function () {
            editor.insertContent('<span class="first-format">Текст</span>');
        }
    });

    // Друга кнопка
    editor.ui.registry.addButton('second_button', {
        text: 'Second Button',
        icon: 'info',
        tooltip: 'Insert second format',
        onAction: function () {
            editor.insertContent('<span class="second-format">Текст</span>');
        }
    });
});

3. Підключення плагіна в Publii

Щоб плагін почав працювати в редакторі Publii, його потрібно підключити в конфігурації TinyMCE.

1. Відкрийте файл tinymce.override.json, який знаходиться у папці вашої теми Publii.

2. Додайте свій плагін до списку плагінів у конфігурації TinyMCE:

"plugins": "customplugin charmap template advlist autolink autosave",

3. Додайте кнопку до необхідного рядка панелі інструментів.

"toolbar3": "first_button second_button",

4. Отримуємо кнопки

На панелі інструментів отримуємо кнопки

Висновок

Тепер ваш плагін для TinyMCE у Publii працює! Він додає дві кнопки для вставки тексту у визначеному форматі.

Редагування коду здійснюється у tinymce.script.js, а підключення плагіна та кнопки потрібно оновити у tinymce.override.json. Також необхідно додати налаштування в config.json, щоб увімкнути кастомізацію редактора.

Цей підхід дозволяє легко додавати власні кнопки без додаткових перевірок і ускладнень.