Мар

Плагин 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 Grid и не только. Данное решение создает здоровенную палитрую цветов в редакторе + добавляет еще одну полезную функцию. Также в статье найдете хак для functions.php, позволяющий заменять базовые цвета в TinyMCE Advanced на свои.
Как подключить шрифт в WordPress редакторе — рассматриваю задачу установки новых пользовательских шрифтов в TinyMCE Advanced, а также добавление Google Fonts через обычные CSS стили.

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

Оцените статью:

(голосов - 20, средний балл: 6,35 из 7)

Загрузка...

Категории: Возможности; Плагины;

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

комментария 142 к статье “Плагин TinyMCE Advanced – wordpress текстовый редактор”

← Ранее 1 … 3 4 5

Tod 11.07.2016
Альфред, не совсем понял, что конкретно имеется ввиду. Если нужно увеличить расстояние между абзацами, то нужно задавать его в стилях style.css.
Евгения 13.12.2016
Здравствуйте!!!очень полезная статья!!!
Но мне нужна ваша помощь!!!HELP ME!!!)))
как загрузить свой шрифт в этот плагин?ооочень срочно нужно))
Заранее буду вам очень очень благодарна!!!
Tod 13.12.2016
Евгения, я к сожалению, с такой задачей не сталкивался. Если вам нужно выделить весь текст записи блога, то тут можно подключить шрифт через style.css и применить стиль для класса контента. Если же нужно выделить несколько слов в тексте, то я бы искал подходящий плагин.
P.S. Я поищу решение в течении нескольких дней и чуть позже об этом напишу.
Лилия 17.12.2016
Спасибо за подсказку!!! Установлю сейчас же, а то только учусь и всю нужную информацию приходится искать. Ваш блог очень помогает!!!
Дарья 23.12.2016
Подскажите пожалуйста, мне выдает в настройках ошибку
ERROR: A stylesheet file named editor-style.css was not added by your theme. To use this option, add editor-style.css to your theme or a child theme. Enabling this option will also load that stylesheet in the editor.
не понимаю, как это сделать? HALP!!!!
Tod 24.12.2016
Дарье, посмотрите эту заметку кодекса, ссылка как раз ведет на пример с добавлением editor-style.css в тему.
Tod 26.12.2016
Евгения, добавил в блог новую статью про то как подключить шрифт в WordPress — возможно, вам пригодится)
Булат 27.02.2017
А этот плагин по лучше будет,, в отличие от того, что я использую, спасибо за информацию. Пойду установлю.
Елена 25.04.2017
Супер плагин по редактированию текста! Я даже не ожидала, что будут все необходимые функции! Огромное спасибо вам!
Алексей 08.08.2017
Здравствуйте. Установил плагин и вроде без ошибок работает. Но пишет мне «Для работы TinyMCE Advanced требуется WordPress версии 4.6-beta или выше. Похоже, что Вы работаете на 4.5.9. Это может сделать работу редактора неустойчивой.»

Как может выражаться неустойчивость работы плагина? И в обязательном ли порядке обновлять версию WordPress?
Tod 08.08.2017
Алексей, могут не работать какие-то функции внутри редактора, какие именно сказать сложно. В любом случае все это будет актуально только для админки, на сам сайт не повлияет. Теоретически лучше придерживаться совместимости версий плагинов и обновлять их вместе с системой до наиболее актуальных значений, но иногда это не критично.
Алексей 08.08.2017
Понял. Спасибо за оперативный ответ. Погуляем еще у Вас по блогу)
fitnessvitaly 09.08.2017
Добрый вечер! Как сделать таблицу адаптивной к экрану телефона? С плагином TinyMCE Advanced таблица на телефоне показывается крайне некорректно
Tod 10.08.2017
fitnessvitaly, а без редактора таблица как показывается, нормально? если честно, не сталкивался с этой задачей и думал, что TinyMCE Advanced не вносит каких-то дополнительных настроек в итоговый код, а все зависит от начальной верстки.
Алексей 08.10.2017
Так то оно так!
Только есть одна проблема — которая всегда отталкивала меня от подобного рода написания статей.
Если делать форматирование в режиме «Текст», а потом переключиться в «Визуальный» — то форматирование хоть и частично, но слетает. В зависимости от того что было сделано в режиме «Текст».

Пришлось отказаться от всякого рода «Визуальных» помощников — и писать статьи в режиме «Текст» — поскольку можно использовать любые самописные стили для оформления статей. А в режиме «Визуальный» — всегда чего то не хватает. Например оформления кода (html, CSS, Java)
Tod 08.10.2017
Алексей, теоретически правильный шаблон подразумевает, что в области контента пользователю максимум нужно лишь задавать форматирование тексту: таблицы, жирный шрифт, списки и т.п. Если вы вставляете css и js в редакторе, то это не совсем правильно, он только для контента. Хотя сейчас есть продвинутые инструменты — те же плагины Page Builder, MotoPress или шорткоды, которые значительно расширяют возможности вставки информации на сайте.
Antey 15.11.2018
Глючный плагин! Поставил галку на то, чтоб работал тег — все равно не работает! Как вы решаете эту проблему? Если нужно пустое пространство между строками?
В этом редакторе работает тег br?????
Tod 17.11.2018
Antey, если честно, у меня опция сохранения BR не включена и никогда ей не пользовался. Как вариант, можно попробовать сохраняться в HTML режиме, по крайней мере так остальные теги не слетают, если в статье есть код.
Что бы делал я: 1) Затестил вариант — «включенная опция в амдинке + сохранение в HTML». 2) Погуглил бы проблему в англоязычном сегменте, я помню там были какие-то настройки парсинга для плагина, позволяющие «не трогать» определенный теги. 3) Реализовал бы отступы через HR — то есть в редакторе вставляется элемент разделителя, а в CSS прописываются ему нужные стили.
Андрей 15.03.2019
Добрый день, скажите пожалуйста, а в данном плагине есть файл для перевода?, да я вижу что он на русском, но не все слова переведены. Заранее спасибо за ответ.
Tod 15.03.2019
Андрей, уверен, что есть, т.к. это весьма древний и популярный плагин редактора. В статье старые скриншоты, возможно сейчас тексты поменялись — если честно не сильно обращаю на это внимание, т.к. он используется для работы внутри админки и для посетителей сайта это не критично (а копирайтеры смогут разобраться и так).
star1477 07.06.2020
Спрашиваю у знатоков :) Возможно есть текстовый редактор, в котором есть функция. чтобы можно выбирать цвет подчёркивания. Т.е., чтобы цвет шрифта и подчёркивания были разными (как в Word)?
Tod 07.06.2020
star1477, это разве что через подчеркивание через CSS а в редакторе добавлять для текста/ссылок определенные стили.