Главная Часть 1. Создание блога Глава 8. Техническая часть Урок 178. Как вывести свою иконку на панель инструментов TinyMCE?

Урок 178. Как вывести свою иконку на панель инструментов TinyMCE?

своя иконка на tinymce

Привет!

В данный момент я пишу сразу 2 статьи: одну про заработок, вторую про написание плагина с нуля. Для публикации второй статьи мне необходимо было опубликовать эту, т.к. во второй статье мы будем внедрять знания, которые получим тут. Итак, как же вставить свою иконку в панель инструментов TinyMCE? В этом нет ничего сложного. А что вообще такое этот TinyMCE?

TinyMCE - это один из WYSIWYG редакторов. Молодец, здорово объяснил, подумаете Вы 🙂 Дело в том, что без всех этих иностранных слов мы не поймем сути. Итак, WYSIWYG расшифровывается как: "What You See Is What You Get". В переводе это значит: "Что ты видишь - то и получаешь". Другими словами это визуальный редактор. В WordPress используется именно эта технология.

То окно, в котором я сейчас пишу эту статью - и есть визуальный редактор. Выглядит он вот так:

WYSIWYG wordpress

Соответственно, как я уже писал выше, TinyMCE - это один из подобных редакторов. На скрине запечатлен именно он, т.к. в движке WordPress свой выбор остановили на нем. А так существует еще множество похожих редакторов, одни лучше, другие хуже.

Итак. На такой панели есть множество различных кнопок с иконками: ссылки, цитаты, список и так далее. Как же добавить свою кнопку с иконкой (или без иконки) на эту панель инструментов, чтобы при нажатии на нее происходило какое-нибудь действие? Для этого откроем файл functions.php в папке с Вашей темой и начнем.

Как вывести свою кнопку на панели инструментов TinyMCE?

Теперь добавляем в наш файл в самый конец (но перед ?>) следующий код:

Теперь опять немного теории. Думаю многие знают, что для более удобного взаимодействия с тем или иным сервисом, или программой, и чем угодно похожим придумали API. API это набор функций облегчающий Ваши задачи. Например, нужно нам написать программу, которая бы проставляла лайки в вк. Нам бы пришлось писать целую страницу кода, в котором мы бы пытались воспроизвести действие пользователя, создать событие клика по кнопке "лайк", ну и все в таком формате.

С помощью API нам достаточно использовать одну функцию, которая уже встроена в вк, и лайк будет поставлен. Тоже самое и у нас. У TinyMCE есть свое АПИ. Т.е. свой набор функций для более удобной и комфортной работы. Для того, чтобы можно было работать с АПИ от этого редактора, нам достаточно создать файл btn.js в папке с нашей темой. Название это придумал я, т.к. мы будем работать с кнопкой, а Вы можете назвать этот файл как Вам угодно, главное, чтобы расширение было js.

Создали? Отлично! Давайте внесем туда следующий код:

Сохраним файл, и перейдем обратно в functions.php. Нам необходимо подключить файл btn.js, а то код мы в него записали, но никому не сообщили, что этот файл вообще существует. Давайте исправим это путем вставки следующего кода:

Теперь сохраните изменения, и перейдите в редактирование записи. Ну или добавление новой, не важно. Как мы увидим, появилась кнопка:

наша кнопкаЕсли на нее нажать, то появится надпись: "Кнопка работает!". Отлично!

Как вывести свою иконку на панель инструментов TinyMCE?

Кнопку мы вывели, но чтобы не выбиваться из общей картины давайте вставим иконку вместо текста. Так будет симпотичнее. Потом не знаю как Вам, а мне больше нравится именно цветная иконка. Особенно среди обилия черно-белых. Поэтому находим в интернете иконку по вкусу, главное чтобы ее размер не превышал 40 на 40.

Теперь откроем файл btn.js, т.к. именно он отвечает как за нашу кнопку, так и за действия, происходящие после нажатия на нее. Меняем код таким образом, чтобы получилось как в примере ниже:

Мы здесь заменили слово text на title (чтобы не было текста, но была подсказка), а вместо icon:false добавили классы: icon и wpguru-icon. Если у Вас сложности с html и css, просто скажу, что класс нужен для того, чтобы можно было задать какие-то правила. В нашем случае, нам нужно будет этим классам присвоить картинку. Помещаем ее в папку с нашей темой, туда же, где лежит и файл btn.js.

Теперь создадим опять же в этой папке файл: btn.css. Зачем выбиваться из темы, верно? В этом файле пропишем следующее:

Остался последний штрих - сообщить системе о том, что у нас появился файл btn.css. А то опять же - код есть, а кто о нем знает? Для этого в очередной раз открываем файл functions.php, и вставляем туда следующий код:

Наконец все! Хватит кода. Теперь можем полюбоваться на наше творение. Перейдем в редактор записей или страниц. И увидим следующее:

наша иконка

Вот и появилась наша иконка! При наведении мы увидим текст, который вписали в графе title в файле btn.js. При нажатии будет появляться все то же окно.

В дальнейшем еще выйдут статьи о том, как добавить сюда свое подменю, как сделать еще что-нибудь интересное. А то статья и так затянулась. Пишите в комментариях, нужно ли расширять данную статью? Или тем из Вас, кто занимается разработкой, достаточно только одной иконки? Или может стоит написать о том, как сделать те или иные события при нажатии на кнопку? Пишите в комментариях, я их, разумеется, читаю, и отвечаю по мере возможностей.

А пока у меня все, до скорых встреч!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Андрей Николаев
1

Очень красивая миниатюрка у записи! Тему так или иначе стоит дополнить, на мой взгляд. Несмотря на то, что там и так интуитивно понятно как сделать вложенное меню, у многих людей могут возникнуть вопросы. Поэтому я бы рекомендовал дополнить. А по поводу событий да, мне интересно, например. Я вот давно хочу написать свой плагин, но даже близко не знаю, как сделать, чтобы при нажатии на кнопку появилось какое-нибудь событие...Так что жду продолжения)

07.10.2016
3

Ок, значит буду дополнять)

08.10.2016
Виталий
0

А еще статьи будут?) Очень нравится Вас читать. Хотелось бы продолжения про фриланс и заработок в интернете.

02.11.2016
1

Будут. Как раз сейчас пишу одну здоровую, думаю, будете рады 🙂

02.11.2016
0

Стили к кнопке не добавляются как ни крути 🙁

18.11.2016
0

А Вы точно все сделали по инструкции? И файл со стилями создали в нужной директории?

27.11.2016

Оставить комментарий