Категории Хуков — Виз. редактор (TinyMCE) — WordPress

Содержание материала:

Категории Хуков — Виз. редактор (TinyMCE) — WordPress

Редактор используемый по умолчанию в WordPress подходит для 80% пользователей. Он довольно прост в использовании и в понимании, а также в плане возможностей.

Тем не менее, продвинутые пользователи WordPress часто нуждаются в дополнительных функциях редактора и плагин Ultimate TinyMCE является хорошим вариантом для них.

Это краткое руководство по Ultimate TinyMCE.

Шаг 1: Установка

  • Установите плагин, для этого перейдите в Плагины> Добавить новый и найдите Ultimate TinyMCE.
  • Нажмите ссылку Установить.
  • После установки, нажмите на ссылку Ultimate Tinymce Settings Page, чтобы начать настройку. Вы также можете получить доступ к настройкам в любое время из панели меню: Настройки> Ultimate TinyMCE.

Шаг 2: Добавьте кнопки для вашей панели инструментов

  • Перейдите на вкладку Default Settings (Параметры по умолчанию).
  • Отметьте чекбокс над Load Defaults. Если вы этого не сделаете, то вы увидите только стандартные кнопки и не сможете воспользоваться расширенными возможностями Ultimate TinyMCE .

    Ниже приведен вид по умолчанию Ultimate TinyMCE. Когда вы откроете редактор, запомните, что вам, возможно, полезно будет сначала выбрать кнопку «show/h >

Шаг 3: Настройте вид редактора, если это необходимо

В редакторе Ultimate TinyMCE довольно широкая панель инструментов. В некоторых случаях, она может быть настолько широкой, что будет частично перекрыта виджетами вашей админки, как показано на рисунке ниже. Если это произойдет, то вы можете отредактировать список кнопок, удалив или переместив некоторые кнопки.

Внизу страницы с настройками редактора вы можете увидеть элементы управления кнопками, где вы можете их показать/скрыть, или переместить в другие ряды.

Вы также можете сгруппировать кнопки, разделив их по функциональности.

В настройках экрана вы можете отключить показ правой колонки, чтобы освободить больше места на экране.

Совет: Нажмите и удерживайте клавишу CTRL, затем попытайтесь покрутить колесо мыши, чтобы отрегулировать размер экрана.

Отличительные особенности TinyMCE

Редактор Ultimate TinyMCE имеет выпадающее меню Shortcodes, которое позволяет автоматически вставлять в содержание различные шорткоды.

Обратите внимание также на Дополнительные возможности и Настройки администратора, которые содержат немало полезных опций для вебмастера.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Плагин TinyMCE Advanced – wordpress текстовый редактор

Есть у меня небольшой набор плагинов wordpress, которые смело можно называть «must have» для каждого блоггера, то есть обязательными к использованию. Устанавливаю по возможности практически одну и ту же сборку на все свои блоги, что позволяет сделать работу с системой более продуктивной, функциональной и удобной для посетителей. Думаю, в дальнейшем обзоры их всех вы найдете на страницах этого блога, про кое-какие модули уже успел рассказать, но большинство из них еще впереди. Сегодня речь пойдет о продвинутом текстовом редакторе TinyMCE Advanced – штука очень классная и практичная.

Вообще в текстовом редакторе, по сути, вы проводите больше всего времени в wordpress – публикуете и форматируете текст, добавляете теги, категории wordpress, картинки вставляете, иногда приходится размещать таблицы и т.п. В общем, очень важно иметь под ругой функциональный, качественный инструмент. По умолчанию в системе wordpress есть свой редактор, но я бы все равно рекомендовал устанавливать TinyMCE Advanced. Вот так он выглядит в действии сейчас в админке блога wordpress inside:

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

  • форматирование wordpress шрифта (жирным, курсивом, с подчеркиванием и т.п.)
  • создание обычных и нумерованных списков, а также отступов для текста
  • выравнивание текста по краям, центру и всей ширине колонки
  • создание и удаление ссылок
  • вставка изображения
  • редактирования css
  • создание цитат
  • вставка разделителей в wordpress читать далее и следующей страницы
  • включение проверки орфографии, нахождения строки в тексте
  • включение полноэкранного режима, а также отображение дополнительной строки функциональных клавиш для текстового редактора TinyMCE Advanced
  • последняя кнопка – вставка голосования плагина wp-polls.

Вторая строка не менее важная и также содержит ряд интересных функций:

  • выбор шрифта текста и форматирование абзаца
  • вставка текста, вставка из Word, удаление всего форматирования
  • добавление в текст произвольного символа и печать
  • цвет для шрифта и фона, вставка смайлов (для их отображения нужно в настройках админки в меню «Написание» поставить галочку напротив пункта преобразования текстовых символов для смайлов в картинки)
  • выделение текста в качестве верхнего и нижнего индексов
  • вставка медиафайла
  • отмена действия и его возобновление, редактирование атрибутов и помощь.

Этого, думаю, будет вполне достаточно дабы понять, что редактор TinyMCE Advanced просто супер функционален. Кстати, это лишь часть его возможностей, о других расскажу чуть дальше.

Установка и настройка TinyMCE Advanced

Скачать текстовый редактор TinyMCE Advanced можно с официального сайта вордпресс здесь. Следует заметить, что для разных версий wordpress (2.6, 2.7, 2.8+) нужно использовать свой дистрибутив. На момент написания статьи последняя версия плагина есть 3.2.7.

Установка стандартная – после скачивания разархивируем и загружаем на фтп блога в папку wp-content/plugins. Далее активируем TinyMCE Advanced из админки, после чего заходим в меню «Параметры» — «TinyMCE Advanced», где нужно произвести его настройку. Финальным аккордом есть очистка кэша браузера.

Перед тем как рассказать о настройке еще пару слов про функциональность модуля. По описанию на официальном сайте в него входит аж 15 других плагинов: Advanced HR, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters и XHTML Extras. Все это возможно получить, установив лишь один TinyMCE Advanced! Кроме английского языка плагин поддерживает и некоторые другие локализации (немецкую, французскую, итальянскую, испанскую, русскую и т.д.). В общем, сомневаться в широких возможностях модуля не приходится.

Настройка TinyMCE Advanced производится в админке блога в одноименном пункте меню. Процесс не сложный, скорее даже интересный. На странице вы увидите 4 строки текстового редактора, куда можно будет разместить различные функциональные клавиши:

Видите сколько там еще все припасено? Вникать в детали вам уже придется самостоятельно, благо все элементы подписаны и достаточно наглядные. Выделил бы отдельно, пожалуй, блок с функциями для работы с таблицами – позволит быстро и легко создавать, изменять их в тексте. Еще в TinyMCE Advanced можно импортировать в редактор пользовательский css файл стилей – тоже может пригодиться. В целом, как я и сказал с самого начала поста, модуль must have!

Дополнения для TinyMCE Advanced

В блоге есть парочка статей, рассказывающих о расширении возможностей плагина:

    Изменяем цвет текста в WordPress с помощью модуля TinyMCE Color Gr >Думаю, эти заметки вам пригодятся в работе. Если есть какие-то вопросы, задавайте их в комментариях.

Текстовый визуальный редактор WordPress — плагин TinyMCE Advanced и CKEditor.

Из статьи ты узнаешь :

Всем привет! На этой странице блога WebMasterMaksim.ru вы узнаете о двух плагинах которые должны войти в сборку WordPress у каждого вебмастера.

Лучший брокер

А именно я расскажу о продвинутом текстовом визуальном редакторе WordPress которые реализовываются при помощи плагина TinyMCE Advanced или плагина CKEditor на ваш выбор.

Как вы наверное знаете стандартный редактор WordPress обладает очень скромным функционалом и порой в нем очень трудно красиво и максимально быстро оформить текст для улучшения зрительного восприятия.

Текстовый визуальный редактор WordPress — плагин TinyMCE Advanced и CKEditor.

Каждый блогер именно в текстовом редакторе проводит больше всего времени, поэтому нужно стремиться сделать данную работу вебмастера наиболее удобнее и комфортнее.

7,0,1,0,0

Вот, для начала смотрим это видео, а потом читаем дальше:

Первый визуальный текстовый редактор WordPress о котором я расскажу называется TinyMCE Advanced.

Расширенный текстовый редактор WordPress TinyMCE Advanced — функционал, установка, настройка.

Скачать плагин TinyMCE Advanced вы можете внизу страницы, устанавливается он как и все плагины, как обычно разархивируете скаченный архив и закачиваете его на хостинг в папку wp-content/plugins или через админку WordPress — плагины > добавить плагин > загрузить с компьютера.

Теперь коротко расскажу о функционале текстового редактора TinyMCE Advanced:

  • Легкое и быстрое форматирование текста (жирным — тегом strong, наклонное выделение тегом em и подчеркивание с зачеркиванием), вы наверное знаете какое важное значение имеют эти теги для seo WordPress. Для такого форматирования выделяем нужный участок текста и жмем на кнопку которая вам нужна.
  • Создание нумерованных и обычных списков
  • Отступы между строк
  • Выделение цитат
  • Выравнивание текста по центру, по левому или правому краю.
  • Удобная вставка тега more (разделитель страницы для публикаций анонсов на главную или в rss)
  • Можно включить проверку орфографии
  • Кнопка вставки и редактирования изображений в статью
  • Активация полноэкранного режима для более удобной работы с текстом
  • Имеется выбор типа шрифта
  • Вставка текста из word
  • Простая вставка текста
  • Отмена действия (очень полезная функция плагина TinyMCE Advanced)
  • Выделение текста различным цветом
  • Выделение фона текста
  • Имеется кнопка для вставки медиафайла
  • Создание таблиц
  • Удобное проставление якорей
  • Режим переключение — визуально/HTML

В общем как видите визуальный текстовый редактор TinyMCE Advanced WordPress обладает широкими возможностями облегчающие жизнь успешного вебмастера.

Настройка TinyMCE Advanced.

14,1,0,0,0

Настройка плагина TinyMCE Advanced осуществляется в админке WordPress > настройки > TinyMCE Advanced

Настройка плагина TinyMCE Advanced WordPress

Вы видите четыре строки куда вам нужно обыкновенным перетягиванием перетащить кнопки которые вам нужны для редактирования текста, все очень просто! Не забывайте сохранить настройки плагина.

В принципе этого функционала для оформления текста вполне хватит, но есть более мощная штука под названием визуальный текстовый редактор CKEditor.

Продвинутый текстовый редактор WordPress CKEditor.

Плагин CKEditor обладает тем же функционалом, что и плагин TinyMCE Advanced, но и в дополнении имеет ряд очень полезных фишек, которые облегчают мне жизнь.

В редакторе WordPress CKEditor имеется кнопка «шаблон» которая уже содержит в себе готовый макет оформления текста, что очень экономит время.

настройки плагина wordpress CKEditor для создания шаблона оформления текста

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

Имеется кнопка выделить все, форма, флаг.

21,0,0,1,0

И функция создание блока (добавление кнопок в редактор wordpress)

О последней уникальной возможности плагина CKEditor я хочу рассказать подробнее, так как пользуюсь ей постояно.

Кто читает мои статьи, тот заметил что текст я частенько оформляю при помощи CSS:

Я создал в файле стилей своего шаблона определенные свойства CSS, и чтобы выделить таким образом, кусок текста мне нужно поместить в контейнер div.

Но постоянно делать это затруднительно, нужно переводить текстовый редактор с режима визуально в режим HTML, потом набирать нужный код, который не всегда помнишь как пишется, приходится заходить в старые статьи и копировать его, в общем потеря времени на элементарное действие.

CKEditor предлагает очень простое решение, это добавление кнопок в редактор wordpress.

плагина wordpress CKEditor создание кнопки настройки плагина wordpress CKEditor- создание контейнера div

Все, теперь что-бы мне установить контейнер div, достаточно выделить нужный участок текста (оставаясь в режиме визуально) и нажать на кнопку.

29,0,0,0,1

Также плагин CKEditor обладает другими возможностями которых нет в других редакторах, но я ими не пользуюсь поэтому рассказывать о них не буду.

(4 оценок, среднее: 4,50 из 5)

Расширенный визуальный редактор WordPress TinyMCE Advanced и плагин AddQuicktag для добавления кнопок панели форматирования

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Очевидно, что функционала редактора Вордпресс (как визуальной его части, так и текстовой), встроенного по умолчанию, недостаточно для того, чтобы с максимальным комфортом писать грамотные статьи для своего сайта или блога, не отвлекаясь на какие-то дополнительные телодвижения.

Поэтому сегодняшний пост посвящен плагинам WordPress, которые расширяют возможности этого инструмента, благо разработчики позаботились об этом. Речь пойдет, во-первых, о TinyMCE Advanced, который заменит родной визуальный редактор (вкладка «Визуально»), тем более, что еще с ранних версий WP он не всегда работает корректно и выдает ошибки.

Ну и во-вторых, мы рассмотрим настройки AddQuicktag, способного дополнить недостающий комплект HTML кнопок в раздел «Текст». Кстати, для меня именно этот плагин окончательно склонил чашу весов в пользу применения текстового редактора, поскольку с его помощью можно добавить практически любые символы языка гипертекстовой разметки (не только теги).

Плагин TinyMCE Advanced для WordPress — настройки и использование

Итак, если, несмотря на все «танцы с бубнами», в WordPress не работает визуальный редактор, но вы все равно решили применять в дальнейшем исключительно вкладку «Визуально», поскольку нет ни желания, ни времени возиться с тегами, то попробуйте упомянутый TinyMCE Advanced.

Его можно скачать с официального сайта, откуда, к слову, я рекомендую брать все необходимые плагины. Устанавливаете расширение по известной схеме (в этой публикации вы найдете описание всех действий с плагинами WP).

Затем в разделе «Настройки» — «TinyMCE Advanced» найдете два блока (вверху действующий набор кнопок, который будет установлен по умолчанию, а внизу «запасной» арсенал):

Настройка заключается в перетаскивании нужных кнопок из нижней части в верхнюю. И, наоборот, если какие-то опции вам не нужны, то можете спокойно их разместить внизу. Тут же можно отключить меню, которое по умолчанию включено, просто сняв галочку.

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

Скажем, если вам необходимо подчеркнуть фрагмент текста, а в наборе по умолчанию нет необходимой кнопки, то этот недочет можно восполнить, выбрав из раскрывающегося списка «Формат» пункт «Подчеркнутый». Естественно, предварительно нужно выделить нужное слово или словосочетание:

Или же вы пожелаете вставить в текст какую-нибудь химическую формулу. В таком случае в том же разделе выбираете «Нижний индекс» и применяете его к тому символу, который будет объектом данного действа:

Также в дефолтном наборе нет опции «Исходный код». Ее находим в разделе «Инструменты», щелкнув по соответствующей строчке:

Для чего вообще это нужно? Дело в том, что если вы работаете в визуальном редакторе и переходите в область HTML редактора WordPress, то текст там отразится без некоторых тегов форматирования, а иногда это необходимо. Ну, к примеру, мы форматируем заголовок какого-нибудь подраздела статьи:

Топ-пост этого месяца:  Moguta.CMS — бесплатный и быстрый способ создания интернет-магазина (полностью ориентирован на

Если теперь перейти со вкладки «Визуально» в «Текст», то картина будет следующей:

После использования кнопки «Исходный код» тот же фрагмент после перехода во вкладку текстового редактора обретет недостающие теги:

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

Достаточно сказать, что TinyMCE Advanced позволяет:

  • выделять текст жирным, курсивом, подчеркиванием;
  • помещать цитаты;
  • размещать маркированные и нумерованные списки;
  • выравнивать текст по левому, правому краю и по центру;
  • вставлять и удалять ссылки;
  • осуществлять возврат на несколько шагов назад и вперед (отменять либо повторять ранее произведенные действия);
  • выбирать шрифт, его размеры, цвет;
  • увеличивать-уменьшать отступ;
  • отменять форматирование;
  • вставлять тег «more» («читать далее»).

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

Если вы активируете кнопочку «Вставить как текст», то все скопированное содержание будет вставляться в чистом виде. Это может пригодиться, если вы пожелаете дополнить написанное фрагментом, который вы скопировали из документа Word, и вставить его без форматирования:

В случае необходимости поместить какой-либо спецсимвол HTML жмете соответствующую кнопку «Произвольный символ»:

Из появившегося диалогового окна выбираете нужный знак, который будет вставлен в окно редактора TinyMCE Advanced:

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

Если кликните по значку вопроса, то получите список «горячих клавиш» в качестве альтернативного варианта, которые помогут отображать нужные вам символы.

Дополнительные настройки TinyMCE Advanced

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

Поэтому разберем немного и этот аспект. Итак, пониже основных опций идут три блока, первым из которых является «Параметры»:

В принципе, здесь все корректно переведено на русский язык и интуитивно понятно. По умолчанию включен лишь пункт «Список настроек стилей», который вносит разнообразие в создание маркированных и нумерованных списков, что вполне полезно для всех без исключения.

Я лишь попробовал активировать второй сверху пункт, но родное контекстное меню того же Хрома мне понравилось больше.

Опция «Альтернативный диалог ссылок» позволяет добавить туда атрибут nofollow, но это можно сделать и с помощью добавления соответствующей кнопки, о чем было сказано выше. Так что тут каждый решает сам, насколько это удобнее.

Последний пункт этого блока позволит вам заменить имеющийся размер шрифта на один из указанных тут.

Вторым идет блок «Дополнительные параметры»:

Тоже не вполне бесполезные настройки. Например, активированная опция «Создание меню классов CSS» дает возможность загрузить стили CSS, которые содержатся в файле editor-style.css и служат для отображения элементов, расположенных на странице редактора.

«Сохранять тэги параграфов». Обычно при переходе из текстового редактора в визуальный и обратно теги абзацев p и тег переноса не сохраняются. Это опция сохраняет полностью код гипертекстовой разметки. Но при включении этой функции нужно быть внимательными и вначале протестировать корректность ее работы.

«Включить вставку исходного кода изображения» — эту опцию я даже не тестировал, поскольку она годится только для самых мелких картинок и к тому же не работает в моем любимом Google Chrome (здесь читайте об установке и настройках этого браузера).

Ну и третий блок — «Управление», где можно осуществить импорт и экспорт настроек, отметить галочками усовершенствования для редактора (которые, впрочем, включены уже по умолчанию), а также в любой момент восстановить дефолтные настройки:

В завершение этой части статьи очень качественный видеоролик, который поможет вам надежнее усвоить материал по данной теме:

Добавление недостающих кнопок форматирования в редактор текста Вордпресс посредством AddQuicktag

Кажется, я уже не раз упоминал, что в самом начале своей интернет деятельности по созданию блогов на WordPress я был разочарован вкладкой «Визуально», поскольку ее применение создавало некоторые неудобства, связанные с ошибками в отображении содержания страницы.

Поэтому после нескольких неудачных попыток выправить ситуацию я сразу же приступил к освоению текстовой версии (вкладка «Текст») редактора WP, что ускорило приобретение навыков в практическом освоении языка гипертекстовой разметки (тут читайте о том, что такое HTML).

Однако, дефолтная текстовая версия, как, впрочем, и визуальный вариант, по функционалу не выдерживает никакой критики, поскольку набор кнопок форматирования очень скуден и его явно не хватает для комфортной работы при написании статей. Кстати, здесь я уже описывал действия кнопочек, которые установлены по умолчанию.

По этой причине я начал искать подходящий плагин, способный расширить возможности вордпрессовского редактора, и нашел таковой в лице AddQuicktag. Это расширение мне сразу приглянулось, поскольку дает возможность вводить какие угодно символы, лишь бы они были валидными в отношении кода веб-страницы.

После установки AddQuicktag (тут ссылка на скачивание, а при описании WordPress TinyMCE Advanced я предоставил линк на материал, в котором вся информация о порядке установки и всех возможных действиях с плагинами) переходите к его настройке:

Вписываем названия кнопок панели форматирования так, как вам будет удобнее их идентифицировать. Можно указать заголовок (всплывающую подсказку), который будет проявляться после сохранения настроек при подводе курсора к панели форматирования в окне редактора (но это не обязательно):

Далее указываем начало и конец HTML тегов (тут вы можете найти их примеры) и прописываем порядок расположения конкретной кнопки на панели форматирования.

Здесь еще есть опция «Access Key» (хоткей), которая не является ничем иным как возможностью определить «горячие клавиши». Но, к великому сожалению, она почему-то не работает, поэтому я, например, оставил это поле пустым.

После этого определяем порядковый номер расположения кнопочки на панели и заполняем чекбоксы, каждый из которых соответствуют определенному виду записей. То есть вы можете указать, куда будут добавлены кнопки форматирования:

  • «Визуально» — в визуальный редактор WordPress;
  • post — собственно во вкладку «Текст» для написания статей на страницах записей;
  • page — в текстовый редактор при заполнении контентом статических страниц;
  • attachment — для веб-страниц вложения;
  • comment — для формы комментариев, чтобы пользователям было удобнее вводить свои сообщения;
  • edit comment — для редактирования комментариев в админ панели;
  • widgets — для заполнения содержанием виджетов.

Но здесь надо иметь ввиду, что по умолчанию кнопочки будут работать только для постов, статических страниц и формы комментариев.

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

В принципе, можно отметить все чекбоксы, хуже точно не будет. Чтобы сделать это единым махом, просто поставьте галочку в колонке «✔»:

Вот пример выполненных настроек для тега абзаца p, который является, пожалуй, самым востребованным при написании постов:

Плагин AddQuicktag позволяет добавлять не только кнопочки тегов, но и любой шорткод, который вы часто используете на страницах своего ресурса. Более того, у вас существует реальная возможность дополнить функционал текстового редактора, поместив на панель фрагмент простого текста или кода.

К примеру, я практически для каждого объемного поста использую оглавление для подразделов, поэтому посчитал уместным поместить эту частичку кода на панель форматирования, чтобы вставлять ее одним кликом:

Теперь при переходе в текстовый редактор и нажатии на кнопочку «div » шаблон оглавления появится в окне редактирования:

Мне остается лишь вписать заголовки разделов статьи и проставить нужные ссылки. Кроме всего прочего, я нередко применяю при написании постов типографские кавычки, поэтому и такое форматирование добавил на панель HTML-редактора:

Также я установил кнопки тегов заголовков H2 и H3, «nofollow» для вставки одноименного атрибута во внешние ссылки (поскольку Вордпресс такой возможности не предоставляет), операторов [php][/php], между которыми у меня вставляются фрагменты HTML, CSS или PHP кода с подсветкой, оформляемые замечательным плагином SyntaxHighlighter Evolved:

Если на странице настроек AddQuicktag проследовать чуть ниже, то вы встретите раздел Remove Core Quicktag buttons, который содержит список имеющихся в текстовом редакторе кнопочек, которые можно удалить с панели форматирования, если отметите нужные галочками.

В разделе Enhanced Code Quicktag buttons есть еще возможность добавить дополнительное форматирование, включая тег , в который можно заключить любой код или фрагмент текста.

Тут же можно активировать весьма полезную опцию «htmlentities»,что даст возможность кодировать и декодировать любой спецсимвол. Продемонстрирую это на практике. Допустим, вам нужно просто отобразить на странице какой-нибудь тег, скажем, p.

Если заключить его в угловые скобки прямо в окне текстового редактора, то на веб-странице заключенный в него фрагмент текста будет отформатирован в виде абзаца. Если текст отсутствует, то ничего не отобразится.

А вот ежели закодировать его с помощью специальных знаков (тут информация о кодировании и декодировании спецсимволов и мнемоник, а также их полная таблица), используя кнопку «HTML Entities»:

То на странице в браузере такая запись отразится как

. Как вы понимаете, обратная операция производится посредством кнопочки «Decode HTML».

Ну и в заключение хочу отметить, что в AddQuicktag можно также экспортировать и импортировать настройки, используя созданные для этой цели файлы.

Как добавить свою кнопку в редактор WordPress

В этой статье рассмотрим небольшой пример создания своей кнопки для текстового редактора движка WordPress.
Если кто не в курсе, то в качестве редактора, WP использует бесплатный скрипт web редактора TinyMCE. Это бесплатный скрипт, и судя по тому что он используется в данной CMS (раньше использовался также и в Joomla, как сейчас не знаю), то он имеет некоторые преимущества перед другими редакторами.

В качестве примера, будет создавать кнопку, при клике по которой в текст редактора будет вставляться код символа ударения.

Что бы создать свою кнопку, нам понадобится файл functions.php нашей темы. Хотя для этого мы можем создать отдельный плагин, но т. к. наш код будет содержать не так уж и много кода, обойдемся файлом функций.

Открываем файл, и пишем в нем следующий код:

Используя фильтр «mce_external_plugins», мы добавляем в массив дополнительных плагинов, url файла нашего плагина, указав в качестве индекса массива «$plugin_array[‘msn__mce_plugins’]» его название.

Вторым хуком, добавляем нашу кнопку в редактор:

И самый важный момент, это код нашего плагина (файл «mxs__mce_plugin.js»):

Выше рассмотрен простой пример возможностей редактора TinyMCE. В котором, при клике по кнопке с надписью«ударение» (в нашем случае она выполнена в виде текста), будет вызвано событие onclick, после чего в месте расположения курсора, будет вставлен код знака ударения «́».

Как видите, все достаточно просто, и при хороших знаниях API TinyMCE, можно разрабатывать многооконные приложения с богатым функционалом.

Визуальный редактор для вашего сайта (TinyMCE)

Наверно мой уважаемый читатель не раз сталкивался с ситуацией, когда конечный веб-проект ориентировался не на узкий круг веб-программистов или людей «введенных» в систему, а исключительно начинающих людей, для которых наиболее важным аспектом является, безусловно, простота и практичность, а самое основное это конечно ассоциативность и красота.

Недавно мне пришлось разрабатывать проект для организации писателей Украины, в которой, безусловно, программистов «очень много», и нужно было искать решение для упрощения интерфейса системы, особенно это касалось написания статей, и прочего редактируемого вручную содержания сайта.

Я испробовал приличное множество систем визуального редактирования, и безусловно о каждой из них у меня сложилось определённое впечатление: как хорошее, так и плохое.

В рамках данного проекта я испробовал три системы визуального редактирования, которые, безусловно, достойны внимания, и будут рассмотрены в данной статье. Это следующие программы: TinyMCE, WYM Editor, HTMLArea.

Ну конечно в один ряд эти программы ставить нельзя, хотя бы по их функционалу и назначению. Это было бы равносильно сравнивать возможности встроенного редактора Notepad и коммерческого Microsoft Word. Ведь каждая эта программа особенная, и относится к определённому классу. Посему сегодня мы поговорим именно о ней.

Сказание о TinyMCE

Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, «портативностью», ассоциативностью, и при всё при этом — относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW — W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.

Что ж, чтобы не быть голословным, и не занимать большую часть статьи рекламой и похвалами, я покажу вам систему в режиме реального времени.

Чтобы загрузить себе версию системы, вам необходимо зайти на сайт http://tinymce.org и скачать себя последнюю версию, после чего читать дальше моё повествование.

Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?

Да очень просто, для этого вам сначала необходимо подключить основной класс TinyMCE, после чего в документе автоматически станет доступным прототип объекта TinyMCE, который и является основным API-интерфейсом системы, через который происходит общение с программой, и её настройка.

Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:

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

Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса — init().

Мы передаём в качестве параметра некоторый хеш, в котором значение элемента mode соответствует ‘textareas’, а элемента theme — ‘simple’. Элемент `mode` означает метод «замены» стандартных текстовых полей (textarea), на WYSIWYG. Он может принимать значения ‘textareas’ , ‘exact’ и ‘specify_textareas’.

В случае ‘textareas’ мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.

В свою очередь элемент ‘theme’ означает ничто иное, как текущий тип оформления редактора и может принимать значения: ‘simple’ и ‘advanced’.

В нашем случае, когда мы используем тип ‘simple’, мы подключаем исключительно стандартные функции редактора, и при этом не может особо менять его функционал, как я уже говорил — это вполне сгодится для малых проектов, а так же для тех, в которых необходима высокая скорость соединения.

Топ-пост этого месяца:  Урок 2. Плагин Brute Force Stop

Теперь давайте рассмотрим работу с редактором во время включённого режима темы ‘advanced’.

В этом случае мы имеем гибкий в редактировании интерфейс, полное редактирование всех используемых редактором функций, а так же ещё несколько моментов.

Что ж, допустим, вы начали проект некоторого электронного журнала или Интернет-издания, в котором принципиальной является возможность создание статей со стороны администрации. При этом следует учитывать, что интерфейс программы должен быть как можно более схожим с привычным для нас интерфейсом наиболее используемого Word’а, а так же иметь достаточное количество функций для воплощения всех идей редактора относительно форматирования текста статьи, и никогда не должно возникать таких вопросов как: «А куда нужно нажать?», «А почему оно не показывает:.», «А куда делся весь текст»:

Для более редкого возникновения подобных вопросов (но ведь от них никуда не деться �� мы сейчас немного изменим, текущий вариант редактора и добавим следующие функции:

1. Автоматическое форматирование вставляемого текста
2. Добавим функции форматирования
3. Изменим расположение панелей управления
4. Зададим язык редактора
5. Добавим проверку орфографии

Что ж, давайте обсудим точнее, что мы хотим увидеть в редакторе:

1. Панель форматирования находится сверху
2. Панель состояния отсутствует
3. Язык редактора — русский
4. Функции форматирования: полужирный, курсив, подчёркивание, шрифт, размер, стиль текста, цвет, заливка.
5. Функции структурного форматирования: таблица, выравнивание, табуляция, список
6. Дополнительные функции: вставка изображения, вставка, предпросмотр, вставка гиперссылки, функции «отката» и «возврата», ну и, наверное, введём печать.

Что ж, формализация задания есть, теперь давайте решим, как мы будем это воплощать в жизнь.

Для воплощения функции авторформата вставляемого извне текста необходимо указать параметр хеш-списка — ‘paste_auto_cleanup_on_paste’, который принимает в качестве значения булев (true || false), и в зависимости от этого форматирует или нет внешний текст, переданный из буфера обмена.

При использовании данного параметра следует так же использовать и следующие параметры:

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

Существует два вида панелей, а именно: панель инструментов (toolbar) и панель состояния (statusbar).

На первой панели размещаются функциональные кнопки, а так же другие средства для форматирования и редактирования текста.

Каждая из этих панелей может иметь своё положение (снизу или сверху), то есть у нас есть возможность довольно гибко менять их положения в редакторе. Для этого можно воспользоваться параметрами:

При этом в зависимости от значения параметра и будет установлено конечное положение панели, или если параметр стоит в значении ‘none’, то панель вообще не будет отображена.

И ещё, панель инструментов имеет такой параметр как выравнивание, в соответствии значения которого, и будет центрированы элементы панели. За центрирование элементов отвечает параметр theme_advanced_toolbar_location, и может принимать стандартные значения: center, left, right (по-умолчанию установлен параметр center).

Итак, с панелями разобрались, но ведь на них следует добавить что-то?

Ведь по-умолчанию он будут просто пустовать, с минимальным набором значений, на ведь не нужен такой редактор?

Для размещения, элементы, или же другими словами — кнопки, должны разбиваться на несколько категорий, в каждой из которых могут находиться элементы (не)разделённые знаком разделителя. Для абстракции групп в программе используется понятие кнопок, и для задания группы в качестве значения параметра theme_advanced_button(n+1), где n-текущий номер группы, задается набор элементов, которые к ней должны относится.

Хотя про набор вы можете, особо не беспокоится, так как по-умолчанию в панели инструментов вы и так сможете найти стандартный набор необходимых функций выравнивания, форматирования и прочего, но это доступно лишь в режиме темы ‘advanced’.

Для задания языка редактора нужно всего лишь добавить параметр ‘language’ со значением ‘ru’.

Что ж, давайте посмотрим, что вышло у меня:

Вот — это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания.

Что ж, давайте рассмотрим его анатомию. Сначала мы передаём наиболее важные параметры, а именно: метод «замены» текстовых полей, тип темы редактора, язык редактора, а так же список подключаемых плагинов. Кстати о них. Насколько вы заметили, если внимательно читали, то в рамках данного текста мы их ещё не разу не упоминали.

Плагины — некоторые внешние модули, которые необходимы для воплощения тех либо иных функций программы. Плагины размещаются в папке `plugins`, откуда подключатся к программе в момент вызова. Для использования плагинов в программе, их сначала необходимо перечислить через запятую, в качестве параметров элемента `plugins`, после чего добавить соответствующую кнопку на панель, для их использования.

Так же в рамках примера в листинге 1.2, мы использовали плагин inserdate, для котрого позже задали параметр dateFormat и timeFormat, которые вводят формат используемого времени и даты, соответственно. Они задаются в соответствии со спецификацией функции временных меток.

Так же стоит упомянуть другие интересные функции, использованные в примере:

* paste_remove — при режиме true, редактор фильтрует все поступившие из буфера обмела данные, и удаляет контеинеры spaи.
* paste_convert_headers_to_strong — при режиме true, редактор изменяет все заголовки (h1,h2,h3,h4,h5,h6) в буффере обмена на элементы
* paste_auto_cleanup_on_paste — фильтр для данных из буфера обмена (применимо к данным из MS Word)

Вот, по-моему, для общего обзора системы хватит. Однако мы ещё не рассмотрели довольно большое количество методов API-интерфейса, без которых часто очень сложно представить себе работу с редактором. Но обещаю, что мы рассмотрим их в следующих выпусках МК.

SEO Маяк

Блог Виталия Кириллова | Все о создании,
продвижении сайтов и заработке в интернете

Создание и продвижение сайтов, заработок в интернете

Добавляем свои кнопки в редактор TinyMCE WordPress

Все привет! Сегодня на seo-mayak.com очень интересный урок на тему, как добавить свои кнопки в редактор TinyMCE WordPress.

По умолчанию редактор TinyMCE имеет ограниченный функционал, который можно и нужно расширить для облегчения собственного труда.

В начале своей деятельности в качества веб-мастера, в силу своей некомпетентности, я понятия не имел о возможности настроить редактор, как говориться, под себя.

Для расширения функционала TinyMCE я пробовал использовать различные плагины, коих предостаточно, но быстро от них отказался, так как они создавали не хилую нагрузку на сервер.

Позже я выяснил, что некоторые функции редактора WordPress просто не активны и их надо включать. В конце статьи я расскажу как это делается.

Конечно функции у кнопок могут быть разные, но я продемонстрирую их создание и применение на примере shortcode (коротких кодов), о которых я писал тут.

Вы когда-нибудь создавали плагины самостоятельно? Я думаю, что нет. Тогда самое время написать плагин собственными руками. Поехали!

Регистрация плагина в WordPress

Итак, поставим перед собой такую задачу, добавить кнопку в 3 ряд. Т.е. мы будем создавать еще один ряд кнопок, для удобства их использования.

Шаг№1. С помощью редактора Notepad++ (о функциях редактора читайте здесь) открываем для редактирования файл functions.php и в самый конец перед знаком «?>» вставляем следующее:

Немного поясню, в строчке:

Мы указали номер ряда кнопок в редакторе:

Если поменять цифру 3 на 2, то создаваемые кнопки будут располагаться на втором ряду. Надеюсь понятно.

Мы, немного опережая события, зарегистрировали плагин, который еще пока не создали. Так давайте его уже создадим.

Создания плагина для добавления кнопок в редактор WordPress

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

Шаг №2. В редакторе Notepad++ создаем новый файл, который назовем «newbuttons.js». Расширение «.js» файлу ставить обязательно потому, что плагин написан на языке JavaScript.

В созданный файл вставляем следующий код:

Теперь давайте разберемся, что тут надо переделать под себя.

В четвертой строке функции:

В одинарных кавычках (‘yellow’) мы пишем название кнопки, чтобы не путаться, указываем короткий код, за вывод которого будет отвечать данная кнопка.

В пятой строке, опять же в одинарных кавычках, пишем title для кнопки. В данном случаи при наведении курсора на кнопку в редакторе всплывет подсказка — «Желтый фон».

В шестой строке нам надо будет указать путь до изображения кнопки, которое надо будет создать в фотошопе, но об этом чуть позже.

И наконец в восьмой строке в квадратных скобках еще раз пишем короткий код. Т.е. данная кнопка будет обрамлять выделенный участок текста в теги:

Сохраняем файл в кодировке:

Больше в функции ничего настраивать не надо.

Шаг №3. С помощью FTP клиента Filezilla закидываем его в папку «js», которая находится в папке с Вашей темой. Если такой папки нет, то надо ее создать.

Итак, плагин мы написали, теперь его надо подключить к файлу funtions.php. Чуть ниже кода, который мы вставили на первом шаге, вставляем следующее:

Шаг №4. Далее нам надо зарегистрировать в редакторе TinyMCE нашу новую кнопку. В файл functions.php вставляем такую функцию:

Во-второй строке функции в двойных кавычках пишем название кнопки, которое мы прописали в плагине на 2 шаге.

Шаг №5. В фотошопе создаем изображение кнопки размером 20х20 пикселей в формате «.png» с любой картинкой или буквой, это неважно. У меня получилось вот такое изображение:

Шаг №6. В папке «js» создаем новую папку и называем ее «images» и закидываем в нее созданное изображение.

Шаг №8. В файле newbuttons.js в шестой строке прописываем название изображения.

В итоге получаем вот такой результат:

Теперь, если выделить любой участок текста и нажать на кнопку, то текст автоматически обернется в заданные теги.

Я старался как можно подробней описать все шаги по внедрению своей кнопки в редактор WordPress, но если у кого-то возникнут вопросы, прошу задавайте их в комментариях.

Ну хорошо, а если потребуется добавить несколько кнопок, то как тогда быть, неужели придется писать еще один плагин?

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

Как добавить в редактор несколько кнопок

Итак, чтобы добавить в редактор вторую и последующие кнопки, надо в файле newbuttons.js после 10 строки, где находятся знаки «>);» вставить такой код:

На этом примере я хочу показать использование одинарного тега, который выводит приветствие читателей. Вы наверное заметили разницу, если нет, форма комментариев вам в помощь.

Целиком функция должна выглядеть следующим образом:

Затем в файле functions.php регистрируем новую кнопку. В уже имеющуюся функцию просто добавляем еще одно название:

Целиком функция должно выглядеть так:

Конечно надо создать еще одно изображение кнопки и закинуть его на сервер по вышеописанной инструкции. Вот она, наша вторая кнопочка:

Все последующие кнопки вставляются по аналогичному сценарию.

В самом начале статьи я обещал Вам показать как включаются «спящие» функции редактора TinyMCE. Сказано -сделано!

Как включить дополнительные кнопки в редакторе TinyMCE WordPress

Как я уже говорил эти дополнительные функции уже прописаны в редакторе, только они не активированы.

Чтобы их активировать в файл functions.php надо вставить следующий код:

Вот что в итоге должно получиться:

Возможно этот урок не из самых простых, но зато результат Вас порадует. Мы, без использования «тяжелых» плагинов, добавили свои кнопки в стандартный редактор WordPress, тем самым значительно расширив его функционал.

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов

Как добавить свои стили в WordPress редакторе TinyMCE

Если вы создаете тему WordPress для сайта, который будет обновляться людьми без знания HTML, вы можете добавить свои стили в визуальный редактор TinyMCE и быть уверенными, что элементы будут отформатированы правильно.

Как веб-дизайнер или разработчик, вы можете создать свои стили для разных элементов контента WordPress сайта. Эти стили можно легко добавить, редактируя HTML. Но что если конечный пользователь сайта или автор не знакомы с HTML? Что если автор забыл, какой элемент нужен для стиля?

Добавление своих стилей в интерфейс WYSIWYG редактора (TinyMCE) позволит отформатировать нужный элемент с помощью CSS без необходимости запоминать какой-либо код. Пользователь сможет просто выбрать элемент или текст и применить соответствующий формат, используя выпадающее меню, которое есть в визуальном редакторе. Добавить выпадающее меню «Styles» в WordPress действительно просто. Это идеальное решение для таких элементов как предупреждения, кнопки и отзывы.

Обратите внимание: Далее мы будем создавать вариации некоторого открытого кода, который называется TinyMCE Kit из репозитория плагинов WordPress.

Быстрое решение

Добавление своих стилей в редактор TinyMCE — достаточно простой процесс. Ниже описан простой плагин, который добавляет пользовательские стили, указанные в массиве, в выпадающий список ‘Styles’ визуального редактора. CSS стили помещены в файл в папке плагина. Эта таблица стилей CSS вызывается в визуальном редакторе и на самом сайте.

В коде добавлены комментарии, чтобы упростить понимание. В первой части мы используем функцию TinyMCE для добавления своей таблицы стилей в визуальный редактор, чтобы стили были там видимы. Следующая часть добавляет выпадающий список ‘Styles’, который заполняется на следующем шаге.

Выпадающий список ‘Styles’ (‘styleselect‘) добавляется во второй ряд кнопок (theme_advanced_buttons2_add) в начале ряда (_before). Этот выпадающий список затем наполняется своими стилями, которые добавляются через массив $classes вместо того, чтобы написать их там непосредственно (в формате, описанном в документации TinyMCE). В последней части, своя таблица стилей добавляется к самому сайту с помощью функции wp_enqueue_scripts.

Альтернативное добавление стилей

Описанное выше решение для добавления своих стилей в визуальный редактор WordPress простое, но у него есть некоторые ограничения. Представленный выше код не ограничит стиль лишь для конкретного HTML элемента. Он также не применит класс к существующему блочному элементу.

Мы можем избавиться от этих ограничений и сделать наш выпадающий список более мощным, добавляя стили в массивы с использованием синтаксиса TinyMCE. Остальной код плагина остается неизменным. В TinyMCE каждый формат устанавливает набор параметров, который вы можете определить ( TinyMCE – форматы ):

  • inline – название встроенного элемента, который создаст, например, «span«. Выбранный в данный момент текст будет заключен в этот встроенный элемент.
  • block – название для блочного элемента, чтобы создать, например, «h1«. Существующие блочные элементы внутри выбранной части будут заменены на новый блочный элемент.
  • selector – CSS3 селектор для нахождения элементов внутри выбранного. Может использоваться для применения классов к определенным элементам или в комплексе, например, нечетным строкам в таблице.
  • classes – разделенный пробелами список классов, которые применяются для выбранных элементов для новых встроенных/блочных элементов.
  • styles – название/значение объекта с элементами CSS, которые должны применяться, например, цвет и т.д.
  • attributes – название/значение объекта с атрибутами, которые должны применяться к выбранным элементам или к новому встроенному/блочному элементу.
  • exact – отключает слияние похожих стилей. Это нужно для некоторых проблем с CSS, например, оформление текста для подчеркивания/зачеркивания.
  • wrapper – указывает, что текущий формат – формат контейнера для блочных элементов. Например, wrapper или blockquote слоя.

Вот модифицированный плагин для добавления своих стилей в визуальный редактор WordPress.

Теперь у вас есть плагин для добавления своих стилей в визуальный редактор WordPress. Чтобы добавить свои стили, вам нужно заменить существующие массивы стилей своими. Конечно, вам также надо будет добавить стили в таблицу стилей в папке плагина. Если вам нужно использовать какие-то изображения в качестве фона, вы можете создать папку изображений и вызвать фоновое изображение оттуда.

Топ-пост этого месяца:  Новая модель атрибуции в Яндекс.Метрике последний переход из Директа

Если вы хотите использовать эти дополнительные стили на своем сайте, просто добавьте код плагина в файл functions.php вашей темы. Обязательно замените plugin_dir_url(__FILE__) на get_stylesheet_directory_uri() и обратитесь к нужной таблице стилей из папки темы.

Заключение

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

Источник: WP.tutsplus.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Визуальный редактор WordPress TinyMCE Advanced, описание и настройка

Разобравшись с основным функционалом административной панели в WordPress. Наибольшее количество времени, после формирования основы нашего сайта, мы будем уделять статьям, их написанию и оптимизации. Для набора и форматирования записей в WordPress внедрен редактор, однако он очень уступает плагинам специализированным под эти нужды. После установки и настройки плагина визуального и html редактора Tinymce Advanced осуществлять редактирование записей будет гораздо проще.

Существует много плагинов-редакторов текста, одним из таковых является функциональный плагин, который выбрали для себя огромное количество людей — TinyMCE Advanced.

Для того что бы начать пользоваться и тестировать данный плагин TinyMCE Advanced нужно скачать и установить его, как это сделать представлено ниже в видео уроке.

Описание плагина TinyMCE Advanced

Плагин дополнение к редактору TinyMCE Advanced существует очень давно и наверное у 90% пользователей платформы WordPress он установлен и ежедневно используется.

Плагин TinyMCE Advanced очень прост, но в то же время дает весь необходимый функционал при работе со страницами и записями.

Благодаря TinyMCE Advanced мы можем добавить к нашему стандартному редактору, доступному после установки WordPress, большое количество новых кнопок, которые безусловно пригодятся вам.

Переоценить данный плагин практически не возможно, он используется ежечасно, каждая минимальная и тонкая настройка станет простой и доступной с помощью TinyMCE Advanced.

Видео обзор TinyMCE Advanced, его установка и настройка

В данном видео вы увидите преимущества доступные при установке и работе с TinyMCE Advanced.

Чем TinyMCE Advanced лучше стандартного

Для тех кто еще не знает предназначения плагинов у нас есть специальный урок о плагинах, остальные же могут окунуться в статью с головой.

TinyMCE Advanced существует для создания в удобном визуальном и кодовом форматах ваших публикаций, для изменения и создания стиля написания уникальных текстов. Редактор, предложенный в базовом пакете WordPress, мягко говоря убогий, и имеет только основные инструменты.

Как видим в подтверждение сказанного выше далеко со стандартным редактором не разгонишься, вот по этой причине нам на помощь и идет TinyMCE Advanced с его расширенным функционалом.

С первого взгляда понятно что наши возможности значительно вырастут с таким функционалом возможностей TinyMCE Advanced. Тот кто хоть раз работал с текстовыми редакторами сможет легко разобраться в иконках и возможностях плагина. Для тех же кому хочется не искать нужные элементы методом тыка разберем основные возможности и настройки TinyMCE Advanced.

Что даст нам TinyMCE Advanced

Итак, использование расширенного редактора TinyMCE Advanced позволит нам добавить и использовать следующие возможности:

  1. Легкое и удобное создание таблиц непосредственно при написании статьи. Редактирование и наполнение которых не вызовет у вас неудобств.
  2. Расширенное и удобное форматирование структуры страницы. Возможность создания и регулирования размещения слоев (

Эти и другие возможности пригодятся вам в формировании ваших творений с WordPress.

Плагин постоянно обновляется что не может нас не радовать, ведь это основной признак того что о вашем комфорте думают разработчики.

Пользуясь TinyMCE Advanced вы будете писать ваши посты уверенным в своих возможностях, желаем вам вдохновения и уникальных текстов, встретимся в следующем уроке о создании формы для обратной связи.

Возможные проблемы с TinyMCE Advanced и методы их решения

Плагин TinyMCE Advanced написан на PHP, так же как и любая программа она может по тем или иным причинам не работать. Ниже описаны проблемы, с которыми чаще всего сталкиваются пользователи. Чем же болеет редактор для WordPress.

Не работает визуальный редактор WordPress TinyMCE Advanced

В случае если при подключении плагина вы не можете его редактировать, пользоваться иконками, добавлять или изменять настройки попробуйте произвести следующую операцию:

  1. Проверить работоспособность других плагинов которыми вы управляете с админки, если их кнопки настроек работают тогда переходим к следующему пункту. В случае возникновения проблем и с другими дополнениями нужно искать причины внутренних настроек, а не в самом плагине.
  2. Обновите WordPress до последней версии.
  3. Полностью удалите плагин и скачайте TinyMCE Advanced с официального сайта.
  4. После установки активируте его и проверьте работоспособность.

Если это вам не поможет возможно проблемы связаны с другими плагинами, иногда они могут конфликтовать, попробуйте отключить все плагины и проверить не изменилась ли ситуация. Если TinyMCE Advanced не работает и при «чистом» движке нужно искать более глубокие проблемы, стоит обратиться к программисту.

На странице администрирования: не сортируются кнопки TinyMCE, они не двигаются, панель инструментов пустая, другие ошибки на странице

Это, как правило, вызвано другим плагином, которые добавляют несовместимые библиотеки JavaScript для всех страниц, а не только там, где необходимо. Обойти это можно попытавшись узнать, какие плагины делают это, временно отключить остальные плагины, пока все кнопки TinyMCE не появятся, и включать их по очередности проверяя изменения в настройках.

Если это не помогло, попробуйте некоторые общие устранения неисправностей Javascript: очистить кэш, попробуйте другой браузер, попробуйте другой компьютер, если это возможно, удалить и заново загрузить все файлы плагина, и, наконец, установить Firefox с Firebug или Opera, обратите внимание на первый JS вызывающий ошибки (важно) и разместите его ниже или поищите в Интернете, чтобы узнать то, что вызывает его.

Организовал кнопки и сохранил их, но ничего не меняется в визуальном редакторе на странице записей

Нажмите на кнопку «Удалить» (рядом с кнопкой Сохранить), а затем на «Продолжить». Затем выключить и активировать плагин снова. Это сбросить все настройки, которые хранятся в базе данных.

Некоторые кнопки отсутствуют в меню TinyMCE, либо некоторые инструменты не появляются вообще, или TinyMCE ведет себя странно после установки плагина

Почти все эти проблемы вызваны кэш браузера, или сетевой кэш. Очистите кэш браузера, закройте браузер, а затем запустить его и попробуйте еще раз. Если проблема не устраняется, попробуйте перезагрузить страницу, удерживая Ctrl (в IE) или Shift (в Firefox), чтобы указать браузеру что нужна перезагрузка страницы с сервера. Это также может быть вызвано сетевым кэш где-то между вами и вашим веб-хостинга. Просто подождите несколько часов для того, чтобы проблема исчезнет.

Я не вижу каких-либо стилей импортируемых в «style» в раскрывающемся меню

Эти стили (только классы) импортируются из редактора в файл style.css вашей текущей темы. Однако некоторые темы не включать этот файл. В этом случае следуйте инструкциям на странице настроек TinyMCE Avdanced, чтобы добавить свой собственный файл style.css редактор к вашей теме. При определении стилей имейте в виду, что TinyMCE будет импортировать имена только класса:

Я только что установил плагин TinyMCE Avdanced, но ничего не произошло

Выйти из WordPress, очистить кэш браузера, перезапустить браузер и попробуйте снова. Если это не работает, может быть кэширования прокси или сетевой кэш где-то между вами и вашим хозяином. Вам, возможно, потребуется подождать несколько часов, пока этот кэш не истечет.

Когда я добавляю «смайлики», они не показывают в редакторе

Кнопка «Смайлики» в TinyMCE добавляет коды смайлов. Фактические изображения добавляет WordPress при просмотре записи / страницы. Убедитесь, что флажок «Преобразовывать смайлики наподобие 🙂 и 😛 в картинки» в меню «Настройки»/»Написание» установлен.

Плагин не добавляет никаких кнопок, «Визуально» и «HTML текст» вкладки отсутствуют

Убедитесь, что «Отключить визуальный редактор» флажок в разделе «Пользователи»/»Ваш профиль» снят.

Как создать плагин WordPress TinyMCE

Если вы являетесь разработчиком WordPress, то в какой-то момент можете столкнуться с необходимостью расширения или настройки визуального редактора. Например, вы можете захотеть добавить кнопку в панель инструментов, которая позволит вашим клиентам использовать определенные функции без необходимости прибегать к HTML-коду. В этой статьей мы расскажем вам как создать TinyMCE плагин в WordPress.

Требования

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

Создаем свой первый TinyMCE плагин

Мы начнем с создания пользовательской кнопки для панели инструментов. Эта кнопка при нажатии на нее позволит пользователю добавлять ссылку с пользовательским CSS-классом. Исходный код будет полностью приведен в конце этой статьи, а до того давайте создадим наш плагин шаг за шагом. Сперва создайте директорию в папке wp-content/plugins и назовите ее tinymce-custom-link-class.

Заголовок плагина

Создайте новый файл в только что созданной директории и назовите его tinymce-custom-link-class.php Добавьте этот код в файл и сохраните его.

Это просто PHP-комментарий, который указывает Вордпрессу название плагина, а также его автора и описание. В админпанели Вордпресс активируйте новый плагин, зайдя на страницу Plugins – Installed Plugins и щелкнув по ссылке Activate под TinyMCE Custom Link Class.

Настройка нашего класса плагина

Если два плагина имеют функции с одинаковыми названиями, то это может стать причиной ошибки. Мы избежим эту проблему, обернув наши функции в класс.

Это создает PHP-класс вместе с конструкцией, которая вызывается, когда мы доходим до строки $tinymce_custom_link_ >

Любая функция, добавленная в этот класс, не должна конфликтовать с другими плагинами Вордпресс.

Настройка нашего TinyMCE плагина

Затем нам надо указать TinyMCE, что мы хотим добавить пользовательскую кнопку в панель инструментов визуального редактора. Для того, чтобы это сделать, мы можем использовать actions Вордпресса. В данном случае action под названием init. Добавьте следующий код в функцию __construct() вашего плагина.

Эта функция проверят находимся ли мы в админпанели. Если ответ да, то функция запрашивает запуск функции setup_tinymce_plugin внутри нашего класса как только Вордпресс закончит загрузку. Затем добавьте функцию setup_tinymce_plugin:

Эта функция уже проверят может ли залогиненный пользователь редактировать посты или страницы. Если нет, то нет смысла в регистрации нашего плагина для этого пользователя, поскольку он никогда и не увидит-то визуальный редактора. Затем мы проверяем пользуется ли пользователь визуальным редактором, так как некоторые пользователи отключают это у себя в профиле. Опять-таки, если пользователь не использует визуальный редактор, то мы возвращаем (exit), поскольку нам больше ничего не надо. Наконец, мы добавляем два Вордпресс-фильтра – mce_external_plugins и mce_buttons, чтобы вызвать функции, которые загрузят необходимый файл Javascript для TinyMCE и добавят соответствующую кнопку в панель инструментов.

Регистрация файла Javascript и кнопки для визуального редактора

Давайте добавим функцию add_tinymce_plugin:

Эта функция говорит TinyMCE, что необходимо загрузить файлы Javascript, расположенные в ячейке $plugin_array. Эти файлы укажут TinyMCE что надо делать. Нам также надо добавить код в функцию add_tinymce_toolbar_button, чтобы доложить TinyMCE о кнопке, которую мы хотели бы добавить в панель инструментов.

Это добавляет два элемента в ячейку кнопок TinyMCE: разделитель (|) и название нашей кнопки (custom_link_class). Сохраните свой плагин и отредактируйте страницу или пост, чтобы увидеть визуальный редактора. Скорее всего, вы не увидите панели инструментов.

Не волнуйтесь – если вы загляните в Инспектор браузера, то увидите ошибку 404, сгенерированную TinyMCE, говорящую нам о том, что он не может найти наш файл Javascript.

На самом деле это добрый знак, так как он говорит о том, что мы успешно зарегистрировали пользовательский плагин TinyMCE и теперь нужно создать файл Javascript, указывающий, что нужно делать TinyMCE.

Создаем плагин Javascript

Создайте новый файл в вашей папке wp-content/plugins/tinymce-custom-link-class и назовите его tinymce-custom-link-class.js, а затем добавьте туда следующий код:

Это вызывает класс TinyMCE Plugin Manager, который мы можем использовать, чтобы запускать массу связанных с плагином действий. В частности добавляем наш плагин в TinyMCE используя функцию add. Это принимает два элемента; название плагина (custom_link_class) и функцию анонимности. Если вы знакомы с концептом функций в кодинге, то функция анонимности это просто функция без названия. Например, function foobar() < … >это функция, которую мы можем вызвать где-нибудь еще внутри кода, используя foobar().

С функцией анонимности мы не можем вызывать эту функцию где-нибудь еще в коде – лишь с помощью функции add(). Сохраните свой файл Javascript и примитесь к редактированию страницы или поста, чтобы увидеть визуальный редактор. Если все сработало, то вы увидите панель инструментов:

На данный момент наша кнопка не была добавлена в панель инструментов. Это оттого, что мы сообщили TinyMCE только то, что мы создали пользовательский плагин. Теперь нам надо указать TinyMCE что надо делать, то есть добавить кнопку в панель инструментов. Обновите свой файл Javascript, заменив существующий код следующим:

Заметьте, что у нашей анонимной функции два аргумента. Первый это editor, являющийся визуальным редактором TinyMCE. Подобным образом как мы можем вызвать различные функции в PluginManager, мы также можем вызвать различные функции в editor. В этом случае мы вызываем функцию addButton, чтобы добавить кнопку в панель инструментов. Сохраните свой файл javascript и вернитесь в визуальный редактор. С первого взгляда ничего не изменилось. Однако если вы наведете мышиный курсор на иконку в правом верху, то увидите подсказку:

Мы успешно добавили кнопку в панель инструментов, но ей нужно изображение. Добавьте следующий параметр к функции addButton под title:

url это адрес нашего плагина. Это удобно в случае, если мы хотим сделать отсылку к файлу с изображением с папкой плагина. В этом случае нам понадобится изображение с названием icon.png в папке нашего плагина. Используйте следующую иконку:

Перезагрузите визуальный редактор и увидите свою кнопку с иконкой:

Указываем команду запуска

На данный момент, если вы нажмете на кнопку, ничего не произойдет. Давайте добавим команду, которая скажет TinyMCE что надо делать. Добавьте следующий код в нашем Javascript файле под концом раздела editor.addButton

Перезагрузите наш визуальный редактор, щелкните кнопку и появится уведомление о том, что вы только что щелкнули по кнопке:

Давайте заменим уведомление строкой, спрашивающей пользователя ссылку, которую они хотят обернуть вокруг выбранного текста в визуальном редакторе.

Блок кода выполняет несколько действий. Сперва мы проверяем выбрал ли пользователь какой-нибудь текст, чтобы обернуть его в визуальном редакторе. Если нет, то они увидят следующее сообщение.

Затем мы просим их ввести ссылку, снова проверяя что они сделали. Если они отменили или ничего не ввели, то мы тоже ничего не делаем.

Наконец, мы запускаем функцию execCommand в редакторе TinyMCE, запустив действие mceReplaceContent. Это заменяет выбранный текст нашим HTML-кодом, который включает якорную ссылку с классом >

Итоги

Мы успешно создали плагин WordPress, который добавляет кнопку в визуальный редактор TinyMCE в WordPress. Это руководство также осветило некоторые основы API TinyMCE и интеграцию фильтров. Мы добавили код, чтобы когда пользователь щелкает по нашей пользовательской кнопке, ему предлагают выбрать текст в визуальном редакторе, который он может связать с ссылкой на усмотрение. Наконец, наш плагин заменяет выбранный текст его ссылочной версией, которая содержит пользовательский класс CSS под названием button.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected] , +371 29394520

Добавить комментарий