TinyMCE Advanced
В WordPress 3.9 был обновлен визуальный редактор TinyMCE до последней версии. Однако, даже обновленный редактор обладает лишь базовыми функциями, которых явно не хватает любому более-менее продвинутому блогеру. Плагин TinyMCE Advanced расширяет возможности стандартного редактора, добавляя в него около 15 различных плагинов – от выбора шрифтов до вставки таблиц. Подобных плагинов много, но TinyMCE Advanced самый популярный из них, так что советую обратить на него внимание.
Скачиваем плагин по ссылке в конце страницы и устанавливаем его:
1 Распаковываем архив.
2 Копируем папку tinymce-advanced в /wp-content/plugins/.
3 Заходим в админку блога на вкладку "Плагины" и активируем плагин.
Настройки плагина находятся в "Настройках\TinyMCE Advanced". Не бойтесь того, что плагин не переведен на русский язык – сами плагины к TinyMCE почти все переведены на русский, так что знание английского вам не понадобится. Да и настроек тут кот наплакал - по сути, вам лишь мышкой надо перетащить нужные кнопки на панель инструментов визуального редактора. Да и это не является обязательным – почти все продублировано в меню редактора:
Меню, кстати, можно отключить первой же настройкой плагина:
Дальше находятся четыре панели инструментов визуального редактора, которые вы можете настроить под себя – для этого вам достаточно лишь мышкой перетащить нужные кнопки на панель или выкинуть их оттуда.
Сами кнопки на английском языке, но понять, что они означают несложно:
Как вы видите – в настройках плагина все на английском языке, а вот при редактировании записи все английские надписи автоматически переводятся на русский язык. Даже если вам что-то непонятно – кинули кнопку на панель, сохранили настройки, переключились на редактирование записи и посмотрели, что означает та или иная кнопка.
Не стоит добавлять все возможные кнопки на панели инструментов, так как многие кнопки вам никогда не понадобятся. Более того, лучше удалить некоторые кнопки из тех, которые там уже есть. Чем проще редактор – тем удобнее и эффективнее им пользоваться.
Из новых возможностей редактора хотелось бы отметить вставку таблиц:
Пара кликов и таблица готова. Совсем примитивная таблица, но большинству блогеров этого хватит полностью.
Кнопка "Найти и заменить" вызывает вот такой диалог:
Вот честно, не понимаю, почему такого функционала в редакторе нет по умолчанию. Это общая тенденция различных редакторов, даже в Windows Live Writer по умолчанию нет возможности поиска и замены. Хотя лично я очень часто пользуюсь данной функцией в различных редакторах текста.
Возможность выбрать шрифт и его размер:
Тоже весьма полезная функция, позволяющая без редактирования стилей шаблона оформить текст вашей статьи так, как вам это нравится.
Лично для меня кажется очень полезной функция "просмотра блоков":
Она позволяет визуально оценить, как оформлен ваш текст. Важно это тем, что зачастую в визуальном редакторе очень сложно понять, как оформлен тот или иной кусок текста. Или откуда в каком-то куске текста берутся лишние отступы:
В редакторе WordPress теги абзацев и переносов строк расставляются автоматически и вы их вообще не видите. Любой текст, после которого вы нажали на "Enter" берется в теги абзацев, которые вы не сможете увидеть, даже переключившись на вкладку "Текст" визуального редактора.
Иногда такое поведение редактора вызывает полный ступор. К примеру, на данном скриншоте видно, что текст, взятый в теги <blockquote> автоматически оказался еще завернут и в теги абзаца <p>. При создании нового шаблона или при редактировании стилей уже существующего шаблона это очень важно.
К слову, плагин TinyMCE Advanced дает возможность увидеть настоящий исходный код вашего текста, без вырезанных тегов. Для этого в меню "Инструменты" выберите пункт меню "Исходный код":
Эта функция позволит вам увидеть реальный исходный код вашей статьи, а не тот, который вы видите, переключившись на вкладку "Текст". Вот, например, на вкладке "Текст" код может быть таким:
А при использовании функции "Исходный код" вы увидите:
То есть вы увидите свой текст с уже расставленными тегами абзацев. И это будет именно такой код, который будет выведен у вас в опубликованной записи на сайте. Когда я только начинал работать с WordPress, такое поведение редактора меня жутко бесило. Но большинство пользователей это устраивает – ведь не приходится думать об оформлении текста, редактор все делает сам.
Плагин также расширяет возможности вставки стандартных списков. В редакторе по умолчанию есть лишь один вид списков:
Плагин дает возможность вставить списки различных видов:
Кнопка вставки смайликов:
Забавная кнопка, которая позволяет оценить, как будет выглядеть смайлик в опубликованной записи, так как в визуальном редакторе смайлики все равно будут выводиться в текстовом виде. Не забудьте только зайти в "Настройки\Написание" и поставить галку на опции "Преобразовывать смайлики наподобие :-) и :-P в картинки".
Собственно, на этом обзор новых возможностей визуального редактора я закончу. Оставшиеся кнопки и функции пробуйте самостоятельно.
Теперь стоит упомянуть о настройках, которые находятся ниже панели выбора неиспользованных кнопок:
По умолчанию включена лишь опция "List Style Options", включающая расширенные возможности вставки списков, о которых я писал выше. Опция "Context Menu" включает контекстное меню плагина, вызываемое при нажатии правой кнопки мышки в редакторе:
Это абсолютно бесполезное меню, которое почти целиком состоит из меню вставки таблицы. Зачем оно нужно я так и не понял – родное контекстное меню браузера просто на порядок полезнее. Следующая опция касается диалога вставки ссылок. По умолчанию этот диалог выглядит так:
Плагин может заменить его на такой:
То есть, по сути, диалог плагина позволяет лишь прописать rel="nofollow" для ссылок, а все остальное есть и в стандартном диалоге добавления ссылок. Нужна ли вам эта функция плагина или нет, решайте сами.
Последняя часть настроек плагина это "продвинутые" настройки:
Что такое editor-styles.css и зачем он нужен? В этом файле хранятся стили шаблона, которые должны применяться в визуальном редакторе. Объясню на примере, допустим, что есть запись в редакторе с цитатой:
При публикации эта запись в шаблоне блога будет выглядеть так:
Создадим файл editor-styles.css в папке шаблона с таким кодом:
blockquote { margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #ddd; } |
А в файл functions.php в папке шаблона добавим строчку:
add_editor_style('editor-style.css'); |
Обновляем страницу редактирования записи и видим:
Таким образом, в визуальном редакторе можно получить такой же вид записи, как и в опубликованном виде. Опция плагина по импорту файла editor-styles.css служит для загрузки содержимого этого файла, если в шаблоне в functions.php нет прямого вызова этого файла. Но, если уж вы создали этот файл, то и прописать одну строчку в functions.php для вас не составит труда.
Все последние дефолтные шаблоны в WordPress содержат поддержку стилей для визуального редактора. Как и некоторые премиум-шаблоны. Но в подавляющем большинстве случаев никаких файлов editor-styles.css в шаблонах нет, эта модная и удобная фича до сих пор не пользуется успехом у разработчиков шаблонов, а зря.
Самая последняя настройка плагина заставляет редактор показывать теги абзаца и переноса строк на вкладке "Текст". То есть при редактировании записи все будет по-прежнему, а вот на вкладке "Текст" вы увидите полную html-разметку и больше не придется ради этого пользоваться функцией "Исходный код". Впрочем, редактор по-прежнему будет чудить со своим авто-форматированием. Например, вот такой код:
После переключения на "Визуально" и обратно на "Текст" превратится в:
То есть редактор удалил один перенос строки, взяв оставшиеся два переноса в теги абзаца. По сути, результат тот же – 3 строки отступа. Но все равно неприятно – не люблю, когда программа считает себя умней пользователя. Ведь в моем шаблоне у меня могут быть для тегов абзаца прописаны отступы как сверху, так и снизу и в результате визуально будет уже не 3 строки отступа, а все 4. Но да ладно, это я уже придираюсь.
В любом случае, с помощью плагина TinyMCE Advanced создавать и редактировать записи в блоге намного удобнее. Так что обратите на него внимание, если вы до сих пор пользуетесь встроенным в движок редактором.
Advanced Editor Tools
Автор плагина: Automattic
Рассматриваемая версия: 4.0.2 от 29.04.2014
Текущая версия: 5.9.2 от 04.04.2024
Совместимость с версией WordPress: 5.9 и выше
Активных установок плагина: 2 000 000+
Скачать плагин версии 5.9.2 (всего скачено 34 375 814 раз)
Понравился пост? Подпишись на обновления по RSS или Twitter !
#21,
Вот здесь современный ответ написал: http://photoreporter.ru/blog/album.php?album=199355875
#22,
Классный плагин! Вот только я почему то нигде не могу найти сортировку текста по алфавиту как в Word. Подскажите как сделать так, чтобы созданный список на странице автоматически появлялся по возрастанию?
Также очень интересно было бы почитать Ваши статьи по установке поисковика на страницу сайта и на сам сайт.
И создание красивых форм комментариев. Именно вот так как Вы всё описываете. А то на других сайтах я уже четверо суток лажу воду льют, а толком популярно ничего не рассказывают - такое впечатление, что просто статьи друг у друга передирают. Ваш сайт в закладки однозначно....
#23,
никак. это все-таки не ворд.
#24,
Спасибо, очень помогли, только у Вас нашел внятный ответ, как сделать так чтобы стили текста в редакторе и фротенде совпадали :)
#25,
Интересно, как вы сделали те падающие буквы ? С помощью плагина или вставкой кода ?
#26,
http://www.wordpressplugins.ru/look/easy-textillate.html
#27,
Пригодится, спасибо!
#28,
Интересный плагин, спасибо. Побалуемся
#29,
Спасибо за подробное описание!
А в functions.php дочерней темы так надо добавлять
Еще бы отменить автоформатирование как-то и совсем было бы хорошо!
#30,
Напишите, пожалуйста, совместим ли плагин TinyMCE Advanced с новой версией Вордпресса? Хотела редактор гутенберг заменить на развернутый TinyMCE Advanced. Но он не отображается.
#31,
совместим полностью.
#32,
А как в этом плагине таблицу в рамки загнать? я имею в виду, чтобы была классическая таблица- с рамками, а то я плагин поставил, а рамки самой таблицы невидимые на сайте.. при занесении данных- они как бы видны. в экселе например есть отличные кнопки, справа черточка,слева, на всю таблицу.. я наверное непонятно пишу, но я первый раз вообще пытаюсь сайт заполнить, программист уволился, а на меня повесили обязанности..
#33,
отображение таблиц - дело темы. то есть плагин тут совсем непричем, вам надо править стили темы.
#34,
а есть вероятность, что я сам смогу это сделать, не пытаясь найти программиста?
#35,
правка css это даже начинающий верстальщик может сделать, программисты тут не нужны. впрочем, если опыта нет - будет сложно.
#36,
опыта совсем нет.. значит кворк в помощь будем звать )))
#37,
как бы я фрилансер.
а тут цена вопроса максимум 200р.
wpuslugi.ru - пишите, если надо.
#38,
написал
#39,
Здравствуйте.
Как сделать чтобы в tinymce advanced вставлялся текст, скопированный из текстового редактора (не ворд) где за место абзацев p /p стоит возврат каретки (типографский набор). При вставке нужно чтобы абзац вставлялся html-абзацем. А получается с "бээрками", приходится доводить абзацы вручную, на что уходит время.