Плагин расширения редактора wordpress. Визуальный редактор WordPress TinyMCE Advanced, описание и настройка
Текстовий редактор WordPress - это простой в использовании и основной инструмент для всех, будь то редактор или веб-разработчик. Тем не менее, как совершенствуется версия текстового редактора с пользовательским опытом для каждого пользователя?
WP Smart Editor предлагает Вам и Вашим клиентам собственный опыт работы с возможностью фильтрации инструментов, доступных для каждой роли пользователя, или даже для каждого пользователя. Кроме того, плагин оснащен средствами экономии времени, такими как: менеджер таблиц, файловый менеджер, пользовательский редактор стилей и кнопок, маркированные списки и инструмент суммирования.
Роль пользователей и профили WordPress. WP Smart Editor предлагает уникальные возможности для каждого создателя контента. Вы имеете возможность:
- Создавать несколько профилей пользователей;
- Выбирать набор инструментов редактора для применения к каждому профилю;
- Применять профили к одному или нескольким пользователям или ролям пользователей;
- Экспортировать/импортировать профили пользователей с одного веб-сайта на другой.
Выбор инструментов. WP Smart Editor поставляется с мощным набором инструментов редактора, которые являются полезными и экономят время для редактирования содержимого, в том числе:
- Менеджер столбцов: создавайте и настраивайте макеты столбцов без использования HTML-кода;
- Менеджер кнопки: дизайн, сохранение и повторное использование ваших кнопок с редактора;
- Менеджер списков: создайте свои списки с пиктограммами, сохраните и повторно используйте их на своем веб-сайте;
- Краткое содержание: создать автоматическое содержание со ссылками на основе структуры заголовка контента;
- Диспетчер подсказок: добавьте подсказку AJAX внутри вашего контента.
Файловый менеджер . Управление файлами, такими как файлы PDF или ZIP-файлы с помощью стандартного медиа-менеджера WordPress. WP Smart Editor содержит легкую версию мощного плагина загрузки файлов WP, чтобы вы могли загружать, управлять и обновлять файлы.
Менеджер таблиц . Создание таблицы в редакторе WordPress требует знаний HTML/CSS, и почти невозможно управлять таблицей в редакторах контента. WP Smart Editor содержит облегченную версию мощного плагина WP Table Manager, благодаря чему вы сможете создавать, управлять и настраивать таблицы с вашего редактора так же, будто вы используете Excel.
Специальный стиль HTML для пользователей . WP Smart Editor имеет специальный инструмент для создания собственных стилей CSS и предоставление их пользователям. Как веб-дизайнер, создайте свой собственный стиль в соответствии с темой WordPress, назовите его и позвольте редактору контента использовать его, когда это будет нужно.
Редактор шаблона . С помощью инструмента менеджера шаблонов вы можете сохранить свои макеты, весь контент и структуру HTML, которые вы набрали в своем редакторе, и использовать их позже на другой странице.
Улучшенный редактор кода . WordPress включает по умолчанию текстовое/HTML-представления в своем редакторе. Мы улучшили версию HTML с подсветкой кода с помощью функции поиска/замены, поиска слова или выражения и добавили его ко всему вашему контенту.
Плагин WP Smart Editor прекрасно интегрируется с:
Маленький человек может сделать многое.
Здравствуйте, коллеги!
Существует два способа:
1. Установка плагина
2. Установка кода в файл functions.php .
Если вы не сильны в познании кодов php, html и стилей css, то лучше использовать готовый плагин для расширения возможности редактора wordpress.
Расширяем возможности редактора WordPress плагином
Плагин Ultimate TinyMCE
Я около четырех лет и до сих пор использую плагин Ultimate TinyMCE, не смотря на то, что количество скачиваний у него меньше, чем у подобных.
Меня не смущает и то, что он более двух лет не обновлялся. Работает прекрасно, не конфликтует с другими.
Нравился он тем, что в нем была опция, позволяющая вставлять текст на разном цветовом фоне. Но WordPress потребовал от владельца плагина убрать эту функцию.
Плагин удобен в настройках и не требует больших знаний. Надеюсь вы знаете как установить новый плагин из панели управления wordpress.
Настройка плагина Ultimate TinyMCE
После активации плагина, в левой части консоли найдите вкладу «Настройки» и нажмите на «Ultimate TinyMCE».
Откроется длинная страница с различными кнопками, с помощью которых расширяем возможности редактора WordPress. На скриншоте только часть страницы.
Добавьте в визуальный встроенный редактор WordPress нужные вам функции и не забудьте сохранить изменения.
Я не стал показывать всю страницу, посмотрите сами. Главное правильно сделать настройку. В столбце «Enable» поставьте галочку напротив нужной опции, а в столбце «Row Seleciton» укажите строку редактора. Визуальный редактор WordPress может иметь только четыре строки.
Поэкспериментируйте и подберите удобный для вас вариант расположения добавленных возможностей WordPress.
Если встроенный редактор по умолчанию выглядит так:
То после расширения возможности редактора WordPress, он будет смотреться по другому:
Плагин Tiny MCE Advanced
Этот плагин похож на предыдущий, с той лишь разницей, что он имеет большее количество установок и постоянные обновления.
Установить его можно из админпанели сайта во вкладке «Плагины» ==>«Добавить новый».
Активируйте установленный плагин и в вкладке «Настройки» ==> «TinyMCE Advanced» перейдите к настройке редактора WordPress.
(Нажмите на изображения, чтобы увеличить.)
Все настройки на русском языке. Включать меню редактора или нет, решайте сами, а далее выбирайте нужные вам опции и подставляйте в редактор. Он также содержит четыре строки. Сохраняйте изменения и проверяйте расширение возможностей редактора WordPress.
С Вами был, Николай Иванов.
ВОПРОСЫ ПИШИТЕ В КОММЕНТАРИЯХ
Есть у меня небольшой набор , которые смело можно называть «must have» для каждого блоггера, то есть обязательными к использованию. Устанавливаю по возможности практически одну и ту же сборку на все свои блоги, что позволяет сделать работу с системой более продуктивной, функциональной и удобной для посетителей. Думаю, в дальнейшем обзоры их всех вы найдете на страницах этого блога, про кое-какие модули уже успел рассказать, но большинство из них еще впереди. Сегодня речь пойдет о продвинутом текстовом редакторе TinyMCE Advanced – штука очень классная и практичная.
Вообще в текстовом редакторе, по сути, вы проводите больше всего времени в wordpress – публикуете и форматируете текст, добавляете теги, картинки вставляете, иногда приходится размещать таблицы и т.п. В общем, очень важно иметь под ругой функциональный, качественный инструмент. По умолчанию в системе wordpress есть свой редактор, но я бы все равно рекомендовал устанавливать TinyMCE Advanced. Вот так он выглядит в действии сейчас в админке блога wordpress inside:
Как вы видите иконок здесь для всяких действий более чем достаточно. Не буду сравнивать со стандартным, поскольку уже даже забыл как он выглядит, расскажу лишь про некоторые детали в TinyMCE Advanced. В первой строке у нас есть кнопки:
- форматирование (жирным, курсивом, с подчеркиванием и т.п.)
- создание обычных и нумерованных списков, а также отступов для текста
- выравнивание текста по краям, центру и всей ширине колонки
- создание и удаление ссылок
- вставка изображения
- редактирования css
- создание цитат
- вставка разделителей в и следующей страницы
- включение проверки орфографии, нахождения строки в тексте
- включение полноэкранного режима, а также отображение дополнительной строки функциональных клавиш для текстового редактора TinyMCE Advanced
- последняя кнопка – вставка .
Вторая строка не менее важная и также содержит ряд интересных функций:
- выбор шрифта текста и форматирование абзаца
- вставка текста, вставка из 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
В блоге есть парочка статей, рассказывающих о расширении возможностей плагина:
- с помощью модуля TinyMCE Color Grid и не только. Данное решение создает здоровенную палитрую цветов в редакторе + добавляет еще одну полезную функцию. Также в статье найдете хак для functions.php, позволяющий заменять базовые цвета в TinyMCE Advanced на свои.
- — рассматриваю задачу установки новых пользовательских шрифтов в TinyMCE Advanced, а также добавление Google Fonts через обычные CSS стили.
Думаю, эти заметки вам пригодятся в работе. Если есть какие-то вопросы, задавайте их в комментариях.
Всем привет!. Сегодня мы поговорим о месте, где вы будете проводить огромное количество времени, ведя свой блог. Это место — ! Ведь именно в нем вы будете писать новые посты и публиковать их на своем блоге. WordPress предоставляет две версии редактора — визуальный и текстовый. Рассмотрим особенности каждой из них и научимся добавлять новый функционал.
Визуальный редактор WordPress и плагин Ultimate TinyMCE
Визуальный редактор WordPress напоминает внешне и по функциям Word, с которым знакомы практически все. К сожалению, по умолчанию его функционал очень скуден, что значительно ограничивает ваши возможности форматирования текста. Данную проблему превосходно решает плагин Ultimate TinyMCE, который добавляет огромное количество всевозможных новых кнопок.
Устанавливается плагин стандартно — скачайте Ultimate TinyMCE , распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins. Активируйте и переходите к его настройкам в раздел «Параметры» — «Ultimate TinyMCE».
По умолчанию все кнопки в визуальном редакторе WordPress располагаются в два ряда. Чтобы отобразить второй ряд используется кнопка «Показать/скрыть дополнительную панель». О функционале каждой кнопки, можно догадаться по значку на ней или по подсказке, которая появляется при наведении на нее курсора мыши. Ultimate TinyMCE добавляет еще около 40 новых функций и два дополнительных ряда кнопок.
Фактически, все настройки Ultimate TinyMCE сводятся к тому, чтобы отметить кнопки, функционал которых вам нужен, и выбрать для них ряд. Описание в настройках на английском языке, но после добавления их в редактор, подсказки будут на русском. Хотя в большинстве случаев можно разобраться и вовсе без подсказок.
Рассмотрим только дополнительные опции, которые представлены в самом низу настроек:
Change the color of the Editor — меняет цвет блока с кнопками в визуальном редакторе WordPress.
Enable NextPage (PageBreak) Button — добавляет функцию NextPage для .
Add ID Column to page/post admin list — на страницу админке WP со списками всех статей и записей добавляется новая колона, в которой указываются ID каждой записи/страницы блога. Можете прочитать, .
Allow shortcode usage in widget text areas — позволяет использовать «короткий код» в виджете «Текст». Короткий код (shortcode) предназначен для быстрого добавления кода , NextGEN Gallery, и других плагинов в текст страницы.
Use PHP Text Widget — позволяет использовать код php в . Код интерпретируется и на страницу блога выводится уже результат его работы.
Enable Line Break Shortcode — добавляет в «Короткие коды» тег Break, который предназначен для добавления пустой строки в текст.
Enable Columns Shortcodes — добавляет в «Короткие коды» большое количество тегов, отвечающих за формирование колонок текста.
Enable Advanced Insert/Edit Link Button — добавляет продвинутую возможность вставки/редактирования ссылок.
Enable «Div Clear» Buttons — добавляет кнопки Div Clear both, left и right предназначенные для отмены обтекания элемента, которое задано с помощью свойства float.
Remove p and br tags — отключает автоматическую вставку тегов p (абзац) и br (перевод строки). Если не хотите для каждого параграфа указывать тег p в ручную, то лучше эту опцию не трогать.
Add a Signoff Shortcode — можно задать часто используемую фразу и вставлять ее в статьи с помощью тега Signoff из «Коротких кодов» (Shortcode).
Текстовый редактор WordPress и плагины Post Editor Buttons и AddQuicktag
Многие считают код, создаваемый в визуальном редакторе WordPress, грязным, то есть содержит лишние теги и стили, которые по-хорошему должны быть вынесены в файл стилей, используемой темы WP. Большую власть над кодом дает текстовая версия редактора ВордПресс. Там все теги вставляются в ручную, за исключением разве что тегов абзаца (p) и перевода строки (br), они добавляются автоматически.
Все хорошо, но опять же не хватает функционала. Чтобы справиться с этой бедой можно воспользоваться плагином Post Editor Buttons.
Скачайте последнюю версию Post Editor Buttons . Устанавливается плагин стандартно. Настройки плагина проживают по адресу «Параменты» — «Post Editor Buttons».
Там все очень просто:
- Caption — название кнопки, которую добавляем;
- Before — открывающий тег;
- After — закрывающий тег;
- Delete — удалить.
К сожалею, на моем блоге Post Editor Buttons не работает . Просто не добавляются созданные в нем кнопки. Прекрасной альтернативой стал плагин AddQuicktag .
Скачайте свежую версию AddQuicktag . Плагин устанавливается стандартно, его настройки располагаются в одноименном разделе «Параметры» — «AddQuicktag». Добавлены четыре новых столбика опций, которыми я даже не пользуюсь.
Основные все те же:
- Button Label — название;
- Start Tag (s) — открывающий тег;
- End Tag (s) — закрывающий тег.
Спасибо за внимание! На этом все. Берегите себя.
Всем привет!
Сегодня я расскажу вам про плагин Ultimate tinyMCE, позволяющий значительно расширить функции стандартного визуального редактора wordpress.
С помощью плагина Ultimate tinyMCE вы сможете выбрать подходящий шрифт текста, указать его размеры, более функционально обработать изображения и видео.
Во время написания статьи проставить в нужных местах различные смайлики и многое другое. И даже если вы не являетесь сторонником лишних плагинов, то и в этом случае статья для вас окажется полезной, т.к. в ней я покажу, как реализовать некоторые из функций с помощью обычных кодов.
Итак, начнем! Все кто работает с движком wordpress, прекрасно знают, как выглядит рабочая панель стандартного визуального редактора:
Она включает в себя минимальный набор функций, позволяющий веб мастерам писать и публиковать полезный материал на своем блоге. Лично меня стандартный набор функций редактора вордпресс вполне устраивает, но не все им довольны и предпочитают использовать другие редакторы или программы.
Плагин Ultimate TinyMCE. Совершенствуем визуальный редактор wordpress
Скачать плагин Ultimate TinyMCE можно . Далее, устанавливаем его на свой блог и активируем. Кто не знает, как устанавливаются плагины, . После установки и активации плагина, в административной панели вашего ресурса появится дополнительная вкладка Ultimate TinyMCE:
Перейдя во вкладку, вы увидите внушительный список различных кнопочек, каждая из которых наделена определенной функцией. Теперь вы сможете облагородить свой визуальный редактор любой из недостающих возможностей, которые присутствуют в плагине.
Описывать каждую кнопочку я не буду, т.к. большинство из них переведены на русский язык и каждый из вас самостоятельно сможет с ними разобраться. Единственное о чем все же стоит упомянуть, это о их реализации на блоге.
Для того чтобы та или иная кнопка отобразилась в рабочей панели визуального редактора, достаточно в столбце «Enable», напротив нужной кнопки установить галочку. Помимо этого плагин предлагает самостоятельно выбрать расположение кнопок, что можно сделать в столбце «Row Selection»:
Как вы, наверное, заметили, все кнопочки в панели редактора располагаются в две строки, но благодаря Ultimate tinyMCE можно увеличить количество строк до четырех, но не больше. Этому способствует значение «ROW», что в переводе означает «Строка».
По умолчанию в каждом пункте установлено «ROW 1». Если оставить все без изменений, функция в виде кнопки продолжит первую строчку панели визуального редактора и отобразится в самом конце, после всех стандартных функций.
Если из списка выбрать, например значение «ROW 3», кнопка с функцией переместится на третью строку. Я думаю, это понятно! Активировав все дополнительные функции (я насчитал 53) и раскидав их по строкам, у меня получилась вот такая картина:
Впечатляет, не правда ли? И забыл упомянуть, что при добавлении или удалении какой-либо функции, не забывайте в самом низу плагина нажимать кнопку «Update Buttons Options» для сохранения настроек.
Как расширить функционал визуального редактора wordpress с помощью кода
Итак, какие функции можно добавить с помощью кода и как это сделать?
1. Можно добавить «Семейство шрифтов», т.е. вы сможете выбрать из списка нужный вам шрифт и написать им целый пост или небольшой отрывок. Для реализации данной функции, откройте на редактирование файл functions.php (путь до файла: /wp-content/themes/название темы (шаблона)/functions.php).
Внимание: перед редактированием файла functions.php обязательно делайте во избежание неверных действий!
Открыв файл, найдите в самом конце тег: ?>
и сразу перед ним вставьте вот этот код:
add_filter("mce_buttons_2" , "add_fontselect_row_2" ) ; function add_fontselect_row_2( $mce_buttons ) { $pastetext = array_search ( "pastetext" , $mce_buttons ) ; $pasteword = array_search ( "pasteword" , $mce_buttons ) ; $removeformat = array_search ( "removeformat" , $mce_buttons ) ; unset ( $mce_buttons [ $pastetext ] ) ; unset ( $mce_buttons [ $pasteword ] ) ; unset ( $mce_buttons [ $removeformat ] ) ; array_splice ( $mce_buttons , $pastetext , 0 , "fontselect" ) ; return $mce_buttons ; } add_filter("tiny_mce_before_init" , "restrict_font_choices" ) ; function restrict_font_choices( $initArray ) { $initArray [ "theme_advanced_fonts" ] = "Andale Mono=andale mono,times;" . "Arial=arial,helvetica,sans-serif;" . "Arial Black=arial black,avant garde;" . "Book Antiqua=book antiqua,palatino;" . "Comic Sans MS=comic sans ms,sans-serif;" . "Courier New=courier new,courier;" . "Georgia=georgia,palatino;" . "Helvetica=helvetica;" . "Impact=impact,chicago;" . "Symbol=symbol;" . "Tahoma=tahoma,arial,helvetica,sans-serif;" . "Terminal=terminal,monaco;" . "Times New Roman=times new roman,times;" . "Trebuchet MS=trebuchet ms,geneva;" . "Verdana=verdana,geneva;" . "Webdings=webdings;" . "Wingdings=wingdings,zapf dingbats" . "" ; return $initArray ; } |
Сохраните файл и переместите его обратно в папку с темой вашего блога с заменой старого.
2. Добавляем кнопки горизонтального разделителя, верхнего и нижнего индекса, размер шрифта, изменение стилей и цвет фона. Для этого все в тот же файл functions.php, перед тем же тегом?> добавляем следующий участок кода:
function add_more_buttons($buttons ) { $buttons = "hr" ; $buttons = "del" ; $buttons = "sub" ; $buttons = "sup" ; $buttons = "fontselect" ; $buttons = "fontsizeselect" ; $buttons = "cleanup" ; $buttons = "styleselect" ; $buttons = "backcolor" ; return $buttons ; } add_filter("mce_buttons_3" , "add_more_buttons" ) ; |
После, снова сохраняем файл и перемещаем его обратно на сервер, заменив старый. Обновляем страницу с визуальным редактором и смотрим, что у нас получилось:
На этом у меня все и теперь вы тоже знаете, как добавлять функциональные кнопки в редактор wordpress, тем самым расширив его стандартные возможности! Желаю всем удачи! Пока и до скорых встреч!
Как вам статья? Возможно, вам известны другие варианты улучшения стандартных функций визуального редактора вордпресс? Поделитесь ими с читателями блога в виде комментариев к данному посту.