Обзор JCE editor (часть 1). Визуальный редактор Joomla

• Видео обзор.
• Основные возможности и особенности.
• Сравнение JCE Editor Core и Pro.
• Сравнение редакторов JCE и TinyMCE.
• Настройки редактора.
  • Профили редактора.

JCE – бесплатный русскоязычный визуальный текстовый редактор Joomla (WYSIWYG), обладающий множеством инструментов для оформления (вёрстки) текста без правки HTML и CSS.

Видео обзор

• Отличия JCE от TinyMCE – 00:00:56.
• Общие настройки редактора – 00:05:39.
• Профили редактора – 00:06:44.
• Браузер файлов – 00:14:03.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Редактор можно использовать не только в материалах Joomla, но и везде, где он поддерживается: в модуле HTML-код, в описании товаров VirtueMart и т.д..

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

В дополнение к JCE Editor идёт бесплатный плагин JCE Mediabox, который позволяет создавать всплывающие окна («попап»).

На официальном сайте расширений Joomla 533 отзыва, расширение добавлено 5 марта 2006 года.

• Общий рейтинг – 4,5 из 5.
• Функциональность – 5 из 5.
• Простота использования – 5 из 5.
• Поддержка – 4,5 из 5.
• Документация – 4,5 из 5.

В обзоре участвует последняя, на момент написания статьи (07.06.2020), русскоязычная версия JCE Editor Core 2.8.12 с JCE Mediabox 2.1.1 в Joomla 3.9.19. Шаблон фронтальной части сайта – RSClario 2.0.

Есть платная версия – JCE Pro. Стоимость – 29 € (на 07.06.2020). Без привязки к домену. Основные отличия платной и бесплатной версии рассмотрены в статье ниже.

Основные возможности и особенности

• Работа в JCE напоминает работу в Word, OpenOffice Writer и так далее.
• Большое количество инструментов (рисунок ниже) для редактирования текста (форматирования/вёрстки): выравнивание текста, вставка таблиц, изображений, изменение шрифтов (гарнитуры, кегля/размера, начертания, цвета), стилей текста (например, заголовки 1-6 уровней), создание списков и многое другое.

• Возможность вставки обычных ссылок (URL), ссылок на контент (категории и материалы), контакты (com_contact) и пункты меню и теги/метки (joomla/rasshireniya/com-tags).
• Расширенный менеджер изображений и файлов с множеством инструментов (рисунок ниже).

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

• Интеграция со сторонними плагинами тип «editors-xtd».
• Гибкие настройки инструментов редактора и создание профилей инструментов редактора (можно назначить профили инструментов определённым группам пользователи).
• Переведён на русский, английский, французский, испанский, итальянский и другие языки.
• Есть англоязычная документация.

Сравнение JCE Editor Core и Pro

Вы можете опробовать платную версию JCE Editor Pro на демонстрационном сайте разработчика.

Сравнение редакторов JCE и TinyMCE

По умолчанию в Joomla встроен визуальный текстовый редактор TinyMCE. На своих и клиентских сайтах использую именно его. Но в ходе доработок клиентских сайтов, которые создавал не я, иногда попадаются и те, где установлен JCE. Плюс, если клиент просит установить какой-то другой редактор, я ставлю именно JCE. Ниже приведу краткую сравнительную таблицу отличий между JCE Editor Core 2.8.12 и TinyMCE 4.5.11 (Joomla 3.9.19), которые сразу бросаются в глаза.

Если кратко, то JCE намного более гибко настраиваемый редактор, чем TinyMCE. Плюс, в нём есть ряд дополнительных инструментов для облегчения вёрстки текста. А некоторые инструменты, присутствующие и там, и там, в JCE оснащены дополнительными параметрами.

Обозначения в таблице ниже:

• «-» – нет такой возможности/инструмента.
• «+» – есть такая возможность/инструмент.
• «++» – есть такая возможность/инструмент с большим функционалом/настройками.

Несколько раз сталкивался с обсуждениями на форумах, когда пользователи жаловались, что не все кнопки редактора (плагины тип «editors-xtd»), которые поддерживаются в TinyMCE, работают в JCE. В ходе обзора я не выявил таких проблем. Например, кнопка вставки галереи Simple Image Gallery Extended работала нормально.

На рисунках ниже показаны некоторые из инструментов, которые есть в JCE, но нет в TinyMCE.

Настройки редактора

Настройки JCE editor собраны в Компоненты – Редактор JCE Pro (даже для бесплатной версии). Их очень много. Почти все переведены на русский язык и оснащены русскоязычными всплывающими подсказками. Буду рассматривать только наиболее интересные, на мой взгляд, опции.

Общие настройки редактора (рисунок ниже). Тут собраны опции, позволяющие сконфигурировать работу редактора в целом (независимо от профиля). Например, тут есть параметры для сжатия CSS и Javascript файлов самого редактора, а также возможность включить кэширование динамического контента без нарушения работы редактора. Это может ускорить загрузку редактора и страницы, где он отображается. Особенно полезно, если редактор используется во фронтальной части сайта. Например, для добавления товаров в интернет-магазин разными продавцами или объявлений на доску объявлений.

Браузер файлов (рисунок ниже). С редактором устанавливается файловый менеджер – аналог встроенного в Joomla Медиа-менеджера (com_media). Браузер файлов позволяет загружать, удалять, переименовывать, копировать и перемещать файлы. Также есть встроенный просмотр изображений и возможность создания папок.

Профили редактора

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

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

Настройки профиля разделены на 4 вкладки:

1. Установки.
2. Особенности и Макет.
3. Параметры редактора.
4. Параметры плагина.

Кратко рассмотрим каждую из них.

Вкладка Установки (рисунок ниже). Тут Вы сможете указать для кого или в каких «ситуациях» нужно применять данный профиль. Например, для разных пользователей или групп пользователей, для административной или фронтальной части сайта. Плюс, есть разделение по устройствам (компьютер, планшет, телефон) и компонентам сайта (Материалы, Категории, Поля, Метки и т.д.), включая сторонние расширения).

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

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

Вкладка Параметры редактора (рисунок ниже). Эта вкладка разделена на четыре вложенные вкладки.

• Очистка и вывод. Тут можно задать преобразование URL (в абсолютные, в относительные или вовсе отключить преобразование) и очистку кода материала от лишних или нестандартных тегов.
• Типографика. Эта вкладка содержит опции для настройки тегов абзацев (переноса строк) по нажатию на клавишу Enter. Плюс, можно настроить добавление пользовательских CSS стилей в стили редактора.
• Файловая система. Эта вкладка, в основном, содержит настройки файлового менеджера. Можно настроить ограничения доступа к папкам сайта, ограничения на размер и количество загружаемых файлов. А также настроить добавление случайных символов к именам файлов и замену пробелов в именах на дефис, точку или знак нижнего подчёркивания.
• Расширенные. Тут Вы сможете задать запрещённые теги, атрибуты и значения атрибутов. Плюс, можно включить ограничение на количество символов и вставку Javascript, CSS или PHP кода в редактор.

Вкладка Параметры плагина (рисунок ниже). На этой вкладке есть настройки для отдельных инструментов или групп инструментов. Всего 18 вкладок (инструментов/групп инструментов). Например:

• Группа инструментов Браузер файлов. Позволяет настроить окно файлового менеджера: включить/отключить инструменты загрузки файлов, создания/удаления папок, ограничить загружаемые файлы по размеру и расширению и т.д.
• Инструмент Буфер обмена (рисунок ниже). Позволяет настроить процесс копирования и вставки информации: удалять/отставлять определённые теги, пустые абзацы, разрешить/запретить вставку HTML, текста и т.д.

• Инструмент Менеджер изображений. Вы сможете: ограничить загружаемые файлы по размеру и расширению, задать настройки отступов, границы и стилей по умолчанию, а также отключить различные инструменты (альтернативное изображение, расширение, размер и т.д.).
• Инструмент Ссылка. Позволяет настроить параметры ссылки по умолчанию (класс, код языка цели и т.д.), а также отключить разные инструменты окна вставки ссылки: вставка ссылки на материал, категорию, контакты, преобразование адресов в ЧПУ (SEF) и так далее.
• Инструмент Стили (рисунок ниже). Тут Вы можете создать свои собственные стили оформления текста (шрифт, его размер, цвет и т.д.). Тогда при редактировании текста Вы сможете легко применить этот стиль к нужным фрагментам текста.

Как видите, данный редактор обладает внушительными возможностями даже в бесплатной версии. А гибкость настроек существенно превосходит встроенный TinyMCE. Если Вы ищите альтернативу TinyMCE, тогда рекомендую рассмотреть JCE editor.

В следующей статье «Обзор JCE (часть 2). Текстовой редактор Joomla» мы поговорим о дополнительном плагине JCE mediabox, а также рассмотрим некоторые часто задаваемые вопросы касательно работы с визуальным текстовым редактором.

Автор статьи – Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Контакты: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Социальные сети: LinkedIn Facebook YouTube (Twitter) Публикации и работа: Google Академия Scopus Upwork Freelance.ua

Полезные ссылки:

• Официальный сайт разработчика.