TinyMCE — це потужний редактор тексту, який широко використовується в веб-застосунках. У WordPress він інтегрований за замовчуванням, але іноді виникає потреба в його налаштуванні або розширенні функціональності відповідно до конкретних вимог проекту. У цьому пості я поділюся своїм досвідом налаштування TinyMCE в плагіні для WordPress, використовуючи Vue.js для змін, замість того щоб залежати від бекенду WordPress.
Спочатку я переконався, що TinyMCE вже підключений на сайті WordPress. Оскільки я не встановлював його через npm, я додав скрипт TinyMCE вручну, використовуючи функцію wp_enqueue_script() WordPress.
Цей крок гарантує, що TinyMCE буде завантажено кожного разу, коли користувач відкриває адмін-панель WordPress, і він буде доступний для використання в компоненті редактора, який я створював.
Далі я перейшов до фронтенду, де почав налаштовувати редактор за допомогою Vue.js. Я створив Vue-компонент, який ініціалізує та керує екземпляром TinyMCE. У цьому компоненті я використав хук життєвого циклу mounted(), щоб ініціалізувати TinyMCE, націлюючись на відповідний DOM елемент (зазвичай це textarea).
Я також підключив плагіни для створення списків, додавання посилань та зображень, а також налаштував панель інструментів з такими опціями як undo, redo, bold, italic тощо. Крім того, я додав свою власну кнопку на панель інструментів, яка виводила повідомлення в консоль при натисканні.
Оскільки в дизайні Figma було вказано інше розташування панелі інструментів, я налаштував кнопки на панелі, використовуючи SVG іконки, щоб відповідати заданому макету. Я також замінив стандартні іконки на власні SVG, додаючи їх через CSS.
Одним із важливих налаштувань був незмінний футер, який завжди з'являвся внизу редактора. Я використав метод setup() для додавання цього футера, який став незмінним і не міг бути змінений користувачем.
Щоб обробляти зміни контенту в редакторі, я слухав подію change і, кожного разу, коли контент змінювався, відправляв оновлений контент для подальшої обробки.
Налаштування TinyMCE за допомогою Vue.js дає велику гнучкість у створенні інтерфейсів та дозволяє налаштовувати редактор під конкретні потреби, що є важливим для створення динамічних і зручних редакторів контенту в рамках WordPress. Цей підхід дозволив мені точно реалізувати дизайн і створити редактор, який безперешкодно працює у середовищі WordPress, одночасно використовуючи потужність Vue.js для динамічної та реактивної поведінки.
Перекладено з: Customizing TinyMCE in Vue 3 for WordPress: A Step-by-Step Guide