Використання редактора TinyMCE у WordPress [Керівництво]

Хоча вони можуть і не знати його назви, кожен, хто використовує WordPress, знайомий з TinyMCE редактор. Це редактор, який ви використовуєте, коли ви створюєте або редагуєте свій вміст - той, що має кнопки для створення напівжирного тексту, заголовків, вирівнювання тексту і так далі. Ось що ми поглянемо на цей пост, і я покажу вам як можна додати функціональність і як ви можете використовувати його у своїх плагінах.

Редактор побудований на незалежній від платформи Javascript системі під назвою TinyMCE, яка використовується в ряді проектів в Інтернеті. Він має чудовий API, який WordPress дозволяє натискати, щоб створити свої власні кнопки і додати його в інші місця в WordPress.

Додавання доступних кнопок

WordPress використовує деякі опції, доступні в TinyMCE, для вимкнення певних кнопок - таких як верхній, нижній і горизонтальний - для очищення інтерфейсу. Їх можна додати назад без надмірної суєти.

Першим кроком є ​​створення плагіна. Погляньте на кодекс WordPress, як це зробити. У двох словах можна створити папку з назвою "my-mce-plugin" у папці wp-content / plugins. Створіть файл з такою назвою, з розширенням PHP: my-mce-plugin.php.

Усередині цього файлу вставте наступне:

  
Після цього ви зможете вибрати цей плагін у WordPress і активувати його. Весь код відтепер може бути вставлений у цей файл.
 
Отже, назад увімкнення деяких вбудованих, але прихованих кнопок. Ось код, який дозволяє нам увімкнути 3 згадані кнопки:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); function my_tinymce_buttons ($ buttons) $ buttons [] = 'верхній індекс'; $ buttons [] = 'індекс'; $ buttons [] = hr; return $ buttons;  
 
 
 
Щоб дізнатися, які кнопки можна додавати і які вони називаються, зверніться до списку, знайденого в документації TinyMCE для елементів керування.
 
Створення власних кнопок
 
Як щодо створення власних кнопок з нуля? Багато веб-сайтів використовують Prism для підсвічування коду, який використовує дуже семантичний підхід до розмітки сегментів коду. Ви повинні обернути код у межах  і 
 тегів:
 
$ variable = 'value'
 
Давайте створимо кнопку, яка зробить це для нас!
 
Це триступеневий процес. Вам потрібно буде додати кнопку, завантажити файл JavaScript і фактично написати вміст файлу Javascript. Давайте розпочнемо!
 
Додавання кнопки та завантаження файлу Javascript досить просте, ось код, який я використав для його виконання:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); функція pre_code_add_button ($ buttons) $ buttons [] = 'кнопка pre_code_button'; return $ buttons;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); функція pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; return $ plugin_array;  
 
Коли я бачу підручники про це я часто бачу 2 проблеми.
 
Вони не згадують про це ім'я кнопки, додане в функції pre_code_add_button (), має бути таким же, як ключ для змінної $ plugin_array у функції pre_code_add_javascript (). Ми також повинні використовувати той самий рядок в нашому Javascript в подальшому.
 
Деякі підручники також використовуйте додатковий гачок admin_head, щоб обернути все. Хоча це буде працювати, воно не є обов'язковим, і оскільки Кодекс не використовує його, його, можливо, слід уникнути.
 
Наступним кроком є ​​написання деяких Javascript для реалізації нашої функціональності. Ось що я використовував, щоб отримати 
 і  теги виводяться відразу.
 
 (function () tinymce.PluginManager.add ('pre_code_button', функція (редактор, url) editor.addButton ('pre_code_button', text: 'Prism', значок: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
'+ вибрано +'
'; editor.insertContent (вміст + "\ t ); ); ) (); 
 
Більшість з них диктується тим, як передбачається кодувати плагін TinyMCE, ви можете знайти деяку інформацію про це у документації TinyMCE. Поки що все, що вам потрібно знати, це назву вашої кнопки (pre_code_button) слід використовувати у рядках 2 і 3. Значення "текст" у рядку 4 буде показано, якщо ви не використовуєте піктограму (ми розглянемо додавання піктограм за хвилину).
 
Метод onclick диктує, що робить ця кнопка, коли вона натиснута. Я хочу використовувати його для перенесення виділеного тексту в структурі HTML, розглянутої раніше.
 
Вибраний текст можна захопити за допомогою tinyMCE.activeEditor.selection.getContent (). Потім я обертаю елементи навколо нього і вставляю його, замінюючи виділений вміст новим елементом. Я також додав нову лінію, щоб я міг легко почати писати після елемента коду.
 
Якщо ви хочете використовувати піктограму, я пропоную вибрати один з наборів Dashicons, який поставляється з WordPress. Довідник з розробників має прекрасний інструмент для пошуку іконок та їх CSS / HTML / Glyph. Знайдіть символ коду і зверніть увагу на unicode під ним: f475.
 
Потрібно буде приєднати таблицю стилів до нашого плагіна, а потім додати простий стиль для відображення нашої піктограми. Спочатку додамо наш стиль до WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); функція pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Поверніться до Javascript і поруч із піктограмою в функції addButton, замініть “помилковий” з класом, який ви хочете, щоб ваша кнопка була - я використав pre_code_button.
 
Тепер створіть файл style.css у каталозі плагінів і додайте наступний CSS:
 
 i.mce-i-pre_code_button: до font-family: dashicons; зміст: "f475";  
 
 
 
Зауважте, що кнопка отримає mce-i- [ваш клас тут] клас, який можна використовувати для націлювання та додавання стилів. Вкажіть шрифт як dashicons і вміст, використовуючи значення unicode раніше.
 
Використання TinyMCE в інших місцях
 
Додатки часто створюють текстові області для введення довшого тексту, не було б чудово, якби ми могли також використовувати TinyMCE? Звичайно, ми можемо, і це досить легко. Функція wp_editor () дозволяє виводити будь-де в адміністраторі.
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
Перший параметр встановлює початковий вміст для поля. Це може бути використано, наприклад, для завантаження опції з бази даних. Другий параметр встановлює ідентифікатор елемента HTML. Третій параметр - це масив налаштувань. Щоб дізнатися про точні налаштування, які ви можете використовувати, зверніться до документації wp редактора.
 
Найбільш важливим параметром є textarea_name. Це заповнює атрибут імені елемента textarea, що дозволяє легко зберігати дані. Ось як виглядає мій редактор при використанні на сторінці параметрів:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 
Це еквівалентно написанню наступного коду, який призведе до простого текстового поля:
 
<?php get_option( 'buyer_bio' ) ?>
 
Висновок
 
Редактор TinyMCE - це зручний спосіб надання користувачам більшої гнучкості при введенні контенту. Це дозволяє тим, хто не хоче форматувати свій вміст, просто вводити його і робити з ним, а також тим, хто хоче з ним возитися, щоб витрачати стільки часу, скільки їм потрібно.
 
Створення нових кнопок і функціональних можливостей можна здійснювати дуже модульно, і ми тільки подряпали поверхню можливостей. Якщо ви знаєте про дуже хороший плагін TinyMCE або випадок використання, який допоміг вам багато чого, повідомте нам у коментарях нижче!