Текстовый редактор для joomla. JCE (Joomla Content Editor): самый продвинутый редактор для Джумла

22.07.2020

Текстовый редактор TinyMCE

Сначала познакомимся с TinyMCE. Этот редактор входит в стандартную сборку Joomla и относится к WYSIWYG редакторам. WYSIWYG это сокращение от английской фразы «What You See Is What You Get», что в переводе значит: «Что ты видишь, то ты и получишь». Другими словами это визуальный редактор, в котором пользователь сразу видит результат редактирования, максимально похожий на тот, что будет отображаться на сайте.
С настройками по умолчанию TinyMCE выглядит так:

Как видим, возможностей для редактирования текста не много. Но сейчас TinyMCE включен с настройками по умолчанию и работает в стандартном режиме. Теперь немного настроим редактор. В состав Joomla, TinyMCE входит в виде плагина. Переходим в меню «Расширения», далее в «Менеджер плагинов», а затем в списке находим плагин «Редактор – TinyMCE» и открываем его для редактирования. В основных настройках плагина меняем режим редактора на расширенный, выбираем тему, например «Office2007 Серебряная» и сохраняем изменения. Теперь наш текстовый редактор выглядит более внушительно.

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

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

Текстовый редактор CodeMirror

В работе с сайтом на Joomla иногда возникает потребность в редактировании исходного кода. В визуальных текстовых редакторах есть функция для работы с HTML тэгами, но она, как правило, не корректно работает с текстами сценариев (скриптов). К тому же есть профессионалы, которым привычнее работать с материалами сайта в простом текстовом редакторе, используя HTML тэги. Поэтому в стандартный набор Joomla 2.5 входит простой текстовый редактор CodeMirror. Вот так выглядит текст одной из страниц демонстрационных материалов в CodeMirror:

CodeMirror, так же как и TinyMCE входит в состав Joomla в качестве плагина. Открыв настройки плагина Редактор – CodeMirror мы увидим, что у текстового редактора CodeMirror совсем немного настроек:

Можно включить или отключить нумерацию строк и изменить режим работы табуляции. Полезным свойством CodeMirror является подсветка синтаксиса. Этот текстовый редактор поддерживает синтаксис: HTML, CSS, XLS, PHP и JavaScript. Так выглядит код модуля счетчика в CodeMirror:

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

Текстовый редактор JCE

Текстовый редактор JCE (Joomla Content Editor) по праву является одним из лучших текстовых редакторов для Joomla. Вместе с дополнениями, редактор JCE представляет собой целый пакет для работы практически с любым видом контента. На момент написания статьи, для Joomla 2.5 была доступна версия редактора 2.1.3. Скачать текстовый редактор JCE можно по этой ссылке , а русификатор . JCE является расширением Joomla и функционирует как компонент. Устанавливается редактор, как и все остальные расширения, через «Менеджер расширений». Сначала устанавливаем только компонент. Дело в том, что все дополнения для JCE устанавливаются через его внутренний установщик. После установки в меню «Компоненты» появится новый пункт – «JCE Editor», который в свою очередь содержит ещё четыре подпункта меню. Перейдём в подпункт «Install Add-ons»:

Нажимаем на кнопку «Browse», выбираем файл пакета локализации и кликаем по кнопке «Install Package». После установки, язык интерфейса редактора JCE изменится на русский. Теперь вы знаете, как устанавливать дополнения для этого текстового редактора и впоследствии сможете сами добавить нужный вам функционал. На странице установки / удаления дополнений JCE в правом верхнем углу есть кнопка «Обновления». Если вы хотите содержать cms в актуальном состоянии, то следует периодически устанавливать обновления для JCE. К сожалению, JCE пока не обновляется через общий компонент обновлений расширений Joomla 2.5 и поэтому обновлять его придется отдельно.

В верхней части административного интерфейса JCE расположены четыре ссылки: «Панель управления», «Глобальная конфигурация», «Профили редактора», «Установка дополнений». С установкой дополнений мы уже разобрались, перейдём в панель управления JCE.

Панель управления редактора содержит актуальную информацию о JCE и кнопки доступа к настройкам. Например, кнопка «Браузер файлов» запускает простейший файловый менеджер, который работает в директории «Images» нашего сайта на Joomla. С помощью этого файлового менеджера можно создать папку, загрузить, удалить или переименовать файл, посмотреть его свойства. В правом верхнем углу панели управления JCE находится кнопка «Параметры», которая отвечает за настройку параметров компонента. В параметрах JCE можно настроить разрешения для доступа к разделам управления, ввести ключ обновления для коммерческих дополнений, изменить тип обновлений и ссылку сайта поддержки, включить или отключить ленту новостей JCE.
По кнопке «Глобальная конфигурация» или по одноименной ссылке вверху панели управления JCE переходим в панель настроек глобальной конфигурации компонента.

В этой панели можно настроить кодировку, стили редактора, разделители новых строк и т. д. Полезными опциями являются параметры сжатия. Рекомендуется включить настройки «Сжимать Javascript» и «Сжимать CSS» для ускорения загрузки. Настройки глобальной конфигурации применяются ко всему компоненту. А раз есть глобальные настройки, то должны присутствовать и локальные. Дело в том, что текстовый редактор JCE поддерживает профили. Т.е. можно сохранить определённый набор опция для какого-то конкретного пользователя или группы пользователей. Это очень удобно, когда над редактированием сайта работают несколько человек – можно настроить редактор в соответствии с требованиями, разрешениями и предпочтениями пользователя. Сохраняем изменения в глобальной конфигурации и переходим по ссылке «Профили редактора».
По умолчанию присутствуют два профиля: «Default» и «Front End». Кликаем на «Default» и знакомимся с настройками профиля.

С помощью этих настроек можно сконфигурировать JCE как угодно. Например, на вкладке «Особенности и Макет» можно добавить нужные кнопки на панели редактора или наоборот, удалить ненужные, можно задать надписи для кнопок и выбрать тему, можно отключить строку состояния. Настроек – масса. Эта статья не имеет целью подробное описание работы с JCE, поэтому на этом и закончим знакомство с редактором.
В этой статье мы познакомились с самыми используемыми текстовыми редакторами для Joomla. Надеюсь, информация окажется полезной для читателей. Удачи!

Ещё статьи о Joomla 2.5

- Одной из задач администрирования сайта является его постоянное резервное копирование. Конечно, многие хостеры ежедневно проводят резервное копирование клиентских сайтов, но как говорится «На Бога надейся, а сам не плошай». К тому же...
- Одной из распространенных задач для веб-мастера, является создание почтовых форм или форм обратной связи для оправки писем (сообщений) с сайта. В Joomla это можно реализовать несколькими способами, в том числе и стандартно, с помощью...
- Рассмотрим еще раз самый качественный и продвинутый визуальный редактор материалов для Joomla 2.5/3.х. Широко функциональный инструмент позволяет существенно облегчить и ускорить процесс создания материалов для страниц Вашего сайта. Значительно богаче чем стандартный TinyMCE .
  
  Текстовый редактор JCE (Joomla Content Editor ) это целый пакет расширений. На сайте разработчиков JCE можно скачать сам компонент JCE-Editor , плагины к нему и русификатор . Бесплатно у разработчиков выложен только один плагин - MediaBox .
  
  Установка редактора JCE и плагина JCE MediaBox происходит стандартным способом: Расширения -> Менеджер расширений . Русификатор и остальные плагины устанавливаются через встроенный инсталлятор редактора JCE - Install Add-ons .
  
  После установки, необходимо включить редактор JCE по умолчанию. Сайт -> Общие настройки . В колонке "Редактор по умолчанию" выставляем "Редактор - JCE" .
  
  При копировании и вставке текста из Microsoft Word или из интернета редактор копирует текст вместе со стилями и оформлениями. Редактор JCE не убирает этот “мусор”, и он потом проявляется на вашем сайте. Обычно текст сначала копируют в блокнот, а из него в Joomla.
  
  Однако кое-что можно настроить в редакторе JCE так, чтобы оптимизировать эти манипуляции. В панели управления компонента во вкладке "Профили редактора" открываем шаблон Default .
  
  На закладке Параметры плагина выбираем Буфер обмена и выставляем:
  - Очистка Microsoft Word - "Всегда"
  - Атрибуты классов - "Да"
  - Удалять все SPANS - "Да"
  - Удалять все стили- "Да"
  Теперь вставка материала из Microsoft Word в окно редактора JCE с помощью той же комбинаций клавиш Ctrl-C и Ctrl-V или с помощью кнопки Paste в панели инструментов редактора будет осуществляться без ненужного хлама.
  
  Еще один способ не углубляясь в настройки редактора JCE вставлять текст в дополнительное диалоговое окно которое вызывается нажатием иконки Вставить как Обычный текст . Этот способ более чише вставляет текст.
  
  CMS версий 3.2 / 2.5 / 1.5. За счёт данного визуального редактора можно сделать написание контента на сайте, и его редактирование более удобным и простым, чем в каком либо другом визуальном редакторе WYSWYG.
  
  JCE редактор имеет довольно большой ассортимент полезных функций для работы в админпанели Joomla. Вы сможете оформлять тексты на страницах своего сайта без каких либо знаний языка разметки HTML / XHTML и каскадных таблиц стилей CSS.
  
  JCE редактор для Joomla имеет около 50-и команд, где каждая команда запрограммирована на визуальную кнопку или раскрывающийся список в компоненте.
  
  На сегодняшний день JCE Editor является самым популярным компонентом для джумла движка, которым пользуются подавляющее большинство веб мастеров, кто разрабатывает сайты под управлением Joomla.
  
  Основными преимуществами JCE компонента:
  - Компонент имеет стандартные кнопки для редактирования контента на сайте, и для удобной работы с графическими изображениями, с удобным интуитивно понятным интерфейсом;
  - Имеется довольно удобный поиск текста в статьях, пред просмотр размещаемой статьи, гибкая работа с таблицами на сайте;
  - Редактор позволяет быстро в удобной форме создавать ссылки для разделов на сайте, для категорий, а также статей.
  - Есть возможность полностью контролировать HTML код каждой размещённой на сайте страницы, JCE компонент удобно подсвечивает открывающиеся и закрывающиеся парные теги, автоматически удаляет не нужный код средактируемых страниц;
  - Имеется встроенная функция проверки правописания в тексте, реализованная за счёт применения электронной Орфографии (или PSpell и ASpell).
  Установка JCE редактора на Joomla сайт осуществляется стандартным методом, то есть через "менеджер расширений" в админ-панели сайта.
  
  Русификация компонента осуществляется путём установки в сам компонент плагина (дополнение (addon) к установленному компоненту).
  
  Чтобы русифицировать JCE редактор, необходимо зайти в админ-панели в "компоненты", далее выбрать "JCE-редактор", потом выбрать "Установка дополнений " и через кнопку обзор выбрать на своём компьютере заранее скаченный zip архив с русификатором JCE. Как только вы установите русификатор, компонент автоматически русифицируется, включая все подсказки в данном WYSWYG редакторе.
  
  Важно! Чтобы русификатор компонента корректно работал, необходимо чтобы сама Joomla CMS также была русифицирована.
  
  Подключение сервиса проверки правописания Яндекс.Спеллер к JCE редактору
  
  Чтобы подключить правописание, вы можете обратиться к инструкции в поисковой системе Яндекс. Как подключить правописание в JCE редактор от Яндекса, читайте на Яндекс.Спеллер .
  
  Как для новичков, так и для опытных пользователей у JCE редактора имеется модифицированная версия, которую вы можете установить себе на сайт. Вам не нужно особо будет возиться с кодом, всё что нужно будет сделать, так это просто включить в профиле JCE редактора использование русского языка для проверки правописания.
  
  Для включения данной опции зайдите в административную часть компонента (Администрирование JCE), далее в "Профили редактора", (тут необходимо выбрать профиль которым вы пользуетесь), например, Default. Далее необходимо будет открыть вкладку "Параметры плагина", далее "Правописание ". Дальше всё что необходимо будет, так это просто включить и установить русский язык первым в вашем списке.
  
  Для использования функции проверки орфографии в JCE редакторе, используйте кнопку правописание, что находится на панели управления.
  
  На личном опыте я убедился, что наиболее удобный визуальный редактор для Joomla 3.x – это JCE, который обладает максимальными возможностями для оформления контента. Единственной проблемой может стать его правильная установка и настройка, поэтому их мы рассмотрим в данном уроке. Последняя проверка (и скрины) проводилась на Joomla 3.4.8.
  
  Получение исходных файлов
  
  В отличие от стандартных редакторов, JCE является компонентом, что значительно расширяет его функциональность и возможности настройки. Помимо основной программы, разработчики предоставляют множество плагинов для расширения функционала, но кроме плагина MediaBox, все остальные платные.
  
  Затем качаем пакет русификации
  
  И плагин JCE MediaBox for Joomla! 3
  
  Установка и настройка редактора JCE для Joomla 3.x
  
  Установка компонента com_jce_2516 и плагина plg_jcemediabox_122_joomla3 происходит обычным способом через Расширения – Менеджер расширений:
  
  Русификатор для редактора JCE и дополнительные плагины устанавливаются только через встроенный инсталлятор компонента JCE:
  
  Компоненты – JCE Administration – Install Add-ons
  
  Для установки русификатора во вкладке Install Add-ons нажимаем на кнопку Browse, выбираем сохраненный архив jce_language_ru-RU_2514 и устанавливаем его, нажав на кнопку Install Package.
  
  После этого переходим во вкладку «Общие настройки редактора», где оставляем все без изменений:
  
  Переходим во вкладку "Профили редактора", выбираем шаблон Default
  
  и нажимаем «Изменить»
  
  В открывшемся окне выбираем «Установки», где можно ничего не менять:
  
  Во вкладке «Особености и макет»
  
  Данные во вкладках «Очистить и вывести», «Типографика» и «Файловая система» оставляем без изменений:
  
  А во вкладке «Расширенные» отмечаем «Да» для позиций: Разрешить Javascript, Разрешить CSS, Разрешить PHP, Встроенные скрипты XHTML.
  
  Теперь переходим в верхнюю вкладку «Параметры плагинов» и отмечаем «птичками» все элементы форматирования:
  
  Наиболее важной я считаю «Буфер обмена», который позволит переносить контент непосредственно из MS Word. Ведь ранее мы не могли это делать напрямую, так как попутно копировалось много лишней информации, приводящей к увеличению размера кода страницы. А это, в свою очередь, приводило к заметному увеличению времени ее загрузки. Такую «служебную» информацию можно увидеть, перейдя в режим HTML при помощи кнопки «Toggle Editor». Вот и копировали мы сначала текст в «Блокнот», а уже из него (без лишнего кода) вставляли в редакторы Joomla.
  
  Теперь же редактор JCE мы настраиваем таким образом, что он автоматически сокращает код страницы из Microsoft Word и оптимизирует его для прямой вставки материала. Выставляем параметры следующим образом:
  
  Теперь можете вставлять материал из Word с помощью кнопки «Paste» панели инструментов или комбинаций клавиш Ctrl-C и Ctrl-V.
  
  После сохранения:
  
  надо включить редактор JCE, войдя в «Параметры» – «Общие настройки». Выставьте «Редактор - JCE» в ячейке «Редактор по умолчанию»:
  
  Теперь в Менеджере материалов мы видим, что основной редактор – JCE:
  
  Внимание!
  
  administrator/components/com_jce/jce.php
  
  после строки
  
  defined("_JEXEC") or die("RESTRICTED");
  
  пропишите строчку
  
  header("Content-type: text/html; charset=utf-8");
  
  На личном опыте я убедился, что наиболее удобный визуальный редактор для Joomla 3.x – это JCE , который обладает максимальными возможностями для оформления контента. Единственной проблемой может стать его правильная установка и настройка, поэтому их мы рассмотрим в данном уроке. Последняя проверка (и скрины) проводилась на Joomla 3.4.8.
  
  Получение исходных файлов
  
  В отличие от стандартных редакторов, JCE является компонентом, что значительно расширяет его функциональность и возможности настройки. Помимо основной программы, разработчики предоставляют множество плагинов для расширения функционала, но кроме плагина MediaBox, все остальные платные.
  
  Последние версии копмонента, русификатора и бесплатного плагина :
  
  Компонент JCE com_jce_2516 Depositfiles
  
  Русификатор jce_language_ru-RU_2514 Depositfiles
  
  Плагин plg_jcemediabox_122_joomla3 Depositfiles
  
  Можете самостоятельно скачать с англоязычного сайта:
  
  Заходим на сайт разработчиков по ссылке: joomlacontenteditor и скачиваем версию редактора, которая является последней на сегодняшний день.
  
  Затем качаем пакет русификации
  
  Установка и настройка редактора JCE для Joomla 3.x
  
  Установка компонента com_jce_2516 и плагина plg_jcemediabox_122_joomla3 происходит обычным способом через Расширения – Менеджер расширений :
  
  Русификатор для редактора JCE и дополнительные плагины устанавливаются только через встроенный инсталлятор компонента JCE :
  
  Компоненты – JCE Administration – Install Add-ons
  
  Для установки русификатора во вкладке Install Add-ons нажимаем на кнопку Browse , выбираем сохраненный архив jce_language_ru-RU_2514 и устанавливаем его, нажав на кнопку Install Package .
  
  Подобным образом устанавливаем и дополнительные плагины:
  
  После этого переходим во вкладку «Общие настройки редактора », где оставляем все без изменений:
  
  Переходим во вкладку "Профили редактора ", выбираем шаблон Default
  
  и нажимаем «Изменить »
  
  В открывшемся окне выбираем «Установки », где можно ничего не менять:
  
  Во вкладке «Особености и макет »
  
  редактируем местонахождение кнопок, путем обычного перетаскивания из области «Доступные кнопки панели» в «Текущий макет». Ненужные перетаскиваем в обратном направлении.
  
  в итоге (с вариациями) получаем:
  
  Данные во вкладках «Очистить и вывести », «Типографика » и «Файловая система » оставляем без изменений:
  
  А во вкладке «Расширенные » отмечаем «Да » для позиций: Разрешить Javascript , Разрешить CSS , Разрешить PHP , Встроенные скрипты XHTML .
  
  Теперь переходим в верхнюю вкладку «Параметры плагинов » и отмечаем «V » все элементы форматирования:
  
  Как видите, слева находится много вкладок, которые можете изучить самостоятельно.
  
  Наиболее важной я считаю «Буфер обмена », который позволит переносить контент непосредственно из MS Word . Ведь ранее мы не могли это делать напрямую, так как попутно копировалось много лишней информации, приводящей к увеличению размера кода страницы. А это, в свою очередь, приводило к заметному увеличению времени ее загрузки. Такую «служебную» информацию можно увидеть, перейдя в режим HTML при помощи кнопки «Toggle Editor ». Вот и копировали мы сначала текст в «Блокнот», а уже из него (без лишнего кода) вставляли в редакторы Joomla.
  
  Теперь же редактор JCE мы настраиваем таким образом, что он автоматически сокращает код страницы из Microsoft Word и оптимизирует его для прямой вставки материала. Выставляем параметры следующим образом:
  
  Теперь можете вставлять материал из Word с помощью кнопки «Paste » панели инструментов или комбинаций клавиш Ctrl-C и Ctrl-V .
  
  После сохранения:
  
  надо включить редактор JCE , войдя в «Параметры » – «Общие настройки ». Выставьте «Редактор - JCE » в ячейке «Редактор по умолчанию »:
  
  Теперь в Менеджере материалов мы видим, что основной редактор – JCE :
  
  Внимание!
  
  Часто бывает, что при попытке вставить изображение, во всплывающем окне появляются «кракозябры». Если вы наблюдаете аналогичное, проделайте следующую процедуру:
  
  В файле
  
  administrator/components/com_jce/jce.php
  
  после строки
  
  defined("_JEXEC") or die("RESTRICTED");
  
  пропишите строчку
  
  header("Content-type: text/html; charset=utf-8");
  
  и все надписи обретут нормальный русскоязычный вид.
  
  Желаю вам успешного написания сайтов!
  
  Плагины для расширения функциональных возможностей редактора JCE, которые значительно расширят функционал сайта и упростят вашу работу с сайтом.
  
  Набор инструментов которые можно смело отнести к категории избранных и перво-устанавливаемых для любого сайта работающего на CMS Joomla.
  
  Читайте новое JCE PRO 2.6.2
  
  Все плагины проверены и прекрасно работают на joomla 3.6
  
  Плагин Emotions
  
  Это плагин для вставки иконок смайликов в редакторе JCE.
  
  После установки видим вот такую новую кнопку со смайликом в панели JCE редактора. При нажатии в всплывающем окне появляется панель смайликов. Удобно если вы часто используете какие либо иконки. По сути, это быстрый доступ и вставка изображений из заданной в настройках плагина папки.
  
  Плагин File Manager - Менеджер файлов
  
  Загрузка, переименование, удаление файлов самых разных форматов, а так же вставка ссылок на файлы с настраивающимся описанием. , которые включают дату файла, размер и значок. После установки плагина в панеле редактора появляется вот такая новая кнопка .
  
  Плагин похож на Менеджер изображений, с той лишь разницей, что показывает и может производить манипуляции со всеми видами файлов, а не только с файлами изображений.
  
  Плагин Image Manager Extended
  
  Это расширенный менеджер изображений. Он наделён не только всеми свойствами стандартного менеджера изображений, но и некоторыми весьма внушительными дополнениями. Меня впечатлило то как он работает в загрузке изображений - можно закачивать сразу много изображений при этом подгоняя их в размере и с созданием миниатюр (эскизов). Так же умеет редактировать изображения: обрезать, изменять размер, поворачивать.
  
  Ещё в функционале данного плагина есть вот такая примочка с наведением мышки на картинку:
  
  После установки плагина в панели редактора появляется новая кнопка: . Родной менеджер изображений, мы в ручную убираем из панели из за его последующей ненадобности.
  
  Плагин jce_caption
  
  Данный плагин создаёт подпись для изображений с настройками её расположения.
  
  Плагин Media Manager
  
  Плагин для работы с медиа файлами через редактор JCE. Пример результата работы плагина можно оценить на странице Red Hot Chili Peppers , которая полностью создана только при помощи редактора JCE.
  
  После установки видим вот такую новую кнопку в панели JCE редактора.
  
  По интерфейсу абсолютно похож на Image и File Manager"ы, что значительно упрощает понимание и работу с данным расширением. Единственная разница в том, что плагин работает исключительно с медиа контентом.
  
  Плагин jce_iframe
  
  Вставка и редактирование встроенных элементов IFrame в контент сайта при помощи редактора JCE. После установки плагина кнопка не добавляется. Её нужно добавлять вручную в настройках профиля редактора во вкладке "Особенности" (нужно перетянуть мышкой в редактор).
  
  Плагин JCE FullPage
  
  Данный плагин позволяет теги МЕТА, HEAD и BODY для любого материала вашего сайта. Кнопка добавляется вручную в настройках профиля редактора.