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

    Використання редактора 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);

    Це еквівалентно написанню наступного коду, який призведе до простого текстового поля:

    Висновок

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

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

    © PHHSNEWS
    Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налаштування та перевстановлення WINDOWS. Створення сайтів і додатків з нуля.