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

Большую часть работы с CMS Joomla занимает работа с текстом. И чтобы эта работа была более комфортной, хорошо бы подобрать себе инструмент по вкусу. В этой статье мы познакомимся с текстовыми редакторами, которые наиболее часто используются в Joomla. Это TinyMCE, Code Mirror и JCE. Первые два включены в стандартную сборку Joomla, а редактор JCE является расширением сторонних разработчиков. Все три текстовые редакторы бесплатны и обеспечивают комфортную работу не только с текстом, но и с таблицами и изображениями.

Текстовый редактор 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, администратору необходимо добавлять текст в специальную область; форматирование текста в этой области выполняется при помощи визуального редактора, от которого напрямую зависят возможности форматирования и удобство при выполнении работ.

      Стандартно в Joomla встроен редактор TinyMCE, но есть возможность дополнительно установить другой визуальный редактор.

      Одним из лучших по праву считается редактор JCE (Joomla Content Editor), который является не просто редактором, а огромным набором расширений для работы практически с любым типом материалов (благодаря огромному набору инструментов, расположенных в рабочей области редактора).

      Конечно же, форматирование текста в этом редакторе выполняется не при помощи вставки специальных тегов; редактор работает по принципу «что видишь, то и получишь». TinyMCE работает по такому же принципу, однако JCE значительно превосходит его по функциональности. Так, редактор имеет свыше 50 функций, которые могут пригодиться администратору при создании материала; при этом ему вовсе необязательно знать язык HTML, не говоря уже о языках программирования.

      Основные функции редактора JCE:

      • форматирование текста при помощи уже привычных инструментов и кнопок, которые встречаются в большинстве визуальных редакторов;
      • добавление и последующее изменение таблиц;
      • добавление ссылок на любые элементы Joomla;
      • есть возможность присвоения стиля любому элементу (сам стиль предварительно необходимо прописывать в файле template.css);
      • добавление и удаление различных кнопок/инструментов с панели управления;
      • создание профилей (например, конкретно для администратора или пользователей, прошедших регистрацию);
      • возможность локализации и установка дополнительных плагинов;
      • отличная кроссбраузерность.

      На официальном ресурсе разработчиков можно получить сам компонент JCE, русификатор к нему и плагины. Правда, заметим, что там доступен лишь один бесплатный плагин под названием MediaBox (сами плагины призваны расширить функционал редактора). Чтобы скачать сам редактор, перейдите по URL: https://www.joomlacontenteditor.net/downloads/editor/joomla-3
      https://www.youtube.com/watch?v=h6Og8o3cuUA
      После скачивания расширения, поставить его можно дефолтным образом. На этом же этапе стоит поставить себе русификатор. Для этого переходим по ссылке https://www.joomlacontenteditor.net/downloads/languages , выбираем нужный вам язык и жмем кнопку «Create Package» для создания архива, а затем жмем кнопку «Download». Заметим, что поставить локализационный файл стандартным образом не получится: установка производится непосредственно из панели редактора JCE.
      Для установки русификации переходим в раздел «Install Add-Ons», выбираем загруженную локализацию и жмем по кнопке «Install Package». Сразу же после перезагрузки страницы редактор будет на русском языке. Теперь переходим в «Глобальные настройки» Joomla и на вкладке «Сайт» в выпадающем меню идем в «Редактор по умолчанию», а тут ищем редактор JCE. Чтобы получить доступ к настройкам редактора, необходимо перейти по пути «Компоненты» – «JCE Editor».

      В разделе «Профили редактора» можно создать новый или отредактировать уже существующий профиль работы. Если работали с Joomla, то прекрасно понимаете, что у каждой группы юзеров есть свои привилегии и полномочия; для некоторых групп пользователей возможности редактора можно урезать или наоборот расширить. Описывать все настройки для профиля нет необходимости, ведь их очень много, да и после установки локализации все станет интуитивно понятно.

      Многие вставляют текст из Microsoft Word, но после вставки в редактор текст может «перекручиваться» на свой лад. Чтобы этого не происходило, выставьте такие параметры:

      • Очистка Microsoft Word – Всегда;
      • Атрибуты классов – Да;
      • Удалять все Spans – Да;
      • Удалить все стили – Да.

      https://www.youtube.com/watch?v=r3bUL0mjht4
      Теперь после копирования текста из Ворда при помощи кнопки Paste или Ctrl-V вставка текста будет выполняться без ненужного хлама. Вот и все, теперь попробуйте создать новый материал при помощи JCE, и вы сразу же поймете, что этот редактор обладает куда большим функционалом, нежели стандартный.

      Визуальный редактор JCE ( Joomla Content Editor) - один из самых функциональных редакторов для Joomla 3.x. C помощью данного текстового редактора вы сможете легко добавлять и редактировать материалы сайта, изменять их стилевое оформление, не обладая знаниями в CSS , HTML и PHP .

      Основные возможности редактора JCE

      • Присутствие базового функционала любого текстового редактора - наличие стандартных кнопок быстрого форматирования и вставки тегов.
      • Удобный инструмент для работы с таблицами.
      • Удобный расширенный медиа-менеджер.
      • Есть возможность вставки быстрых ссылок на файлы сайта, материалы или других ссылок.
      • Возможность быстрого добавления стиля части текста.
      • Добавление и удаление различных инструментов с панели редактора.
      • Возможность настроить панель редактора JCE .
      • Возможность создания разных профилей редактора для разных групп пользователей.
      • Отличная расширяемость плагинами.
      • Кроссбраузерность созданного теста.

      Дополнительные расширения для редактора JCE

      Основное преимущество JCE перед конкурентами - возможность расширения функционала. К редактору JCE существует множество дополнительных расширений, которые упрощают добавление контента для сайта.

      • плагин для создания подписей к изображениям
      • дополнительный набор смайликов для редактора
      • файловый менеджер
      • файловая система для Amazon S3
      • аддон для редактирования исходного кода любого элемента контента
      • вставка и редактирование фреймов
      • расширенный менеджер изображений
      • медиа-менеджер: вставка Flash , Quicktime , Windows Media и др.
      • аддон всплывающих изображений (popups) для RocketTheme RokBox и WidgetKit Lightbox
      • менеджер шаблонов редактора
      • коммерческий аддон JCE MediaBox
      • и др.

      Распространение редактора JCE

      Существует бесплатная и платная (Pro ) версия расширения, включающая дополнительные аддоны. Скачать редактор JCE для Joomla 3.x можно с сайта разработчика.

      Плагины для расширения функциональных возможностей редактора 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 для любого материала вашего сайта. Кнопка добавляется вручную в настройках профиля редактора.

      В этом уроке рассмотрим самый качественный и продвинутый визуальный редактор для создания материала для Joomla 2.5/3.х. Начнем с установки редактора и закончим выставлением его необходимых настроек для работы.
      Редактор JCE в отличие от стандартного TinyMCE обладает отдельным компонентом, что делает его более функциональным и настраиваемым. Текстовый редактор JCE (Joomla Content Editor) это целый пакет расширений для работы с практически любым материалом. Широкий функционал инструментов, расположенных в рабочей панели редактора, позволяет значительно облегчить и ускорить процесс создания материалов для страниц Вашего сайта.

      На сайте разработчиков JCE можно скачать сам компонент JCE-Editor, плагины к нему и русификатор. Бесплатно у разработчиков выложен только один плагин - MediaBox. О назначении плагинов я напишу в дополнительной статье. Платные плагины значительно расширяют функционал редактора JCE. В конце статьи я дам ссылку на скачивание плагинов из моей библиотеки расширений (без вредоносных скриптов и левых ссылок) У меня эти плагины работают на Joomla 2.5 и Joomla 3.х.
      Итак заходим на сайт https://www.joomlacontenteditor.net/downloads/editor/joomla-3 и скачиваем последнюю версию редактора.


      Затем скачиваем последнюю версию плагина JCE MediaBox for Joomla!3.


      И наконец скачиваем пакет русификации для редактора.


      Установка и настройка визуального редактора JCE для Joomla 2.5/3.х.
      Установка редактора JCE и плагина JCE MediaBox происходит стандартным способом: Расширения >>> Менеджер расширений. Русификатор и остальные плагины устанавливаются через встроенный инсталлятор редактора JCE - Install Add-ons. После установки заходим в Компоненты >>> JCE Administration


      Переходим на вкладку "Install Add-ons". Нажимаем Browse - выбираем архив русской локализации для JCE Editor и устанавливаем Install Package.



      Точно таким образом устанавливаем необходимые плагины.


      Переходим на вкладку "Общие настройки редактора". Здесь оставляем все по умолчанию.


      Здесь выбираем "Установки"


      В принципе здесь то же можно все оставить по умолчанию.
      Вкладка "Особенности и макет" – здесь вы можете отредактировать кнопки необходимые вам путем обычного перетаскивания из "Текущий макет редактора" в "Доступные кнопки" и также обратно. Смотрите рисунок ниже.


      Вкладка "Параметры редактора" >"Очистить и вывести" – оставляем по умолчанию.


      Вкладка "Параметры редактора" >"Типографика" – здесь тоже нас всё устраивает.


      Вкладка "Параметры редактора" >"Файловая система" – оставляем без изменений.


      Вкладка "Параметры редактора" >"Расширенные" – меняем "Нет" на "Да" Разрешить Javascript, Разрешить CSS, Разрешить PHP, Встроенные скрипты XHTML.


      Теперь переходим к настройкам плагинов. Вкладка "Параметры плагинов" . Отмечаем все элементы форматирования .

      Можете пробежаться по всем позициям: Формат, Разрыв статьи, Браузер файлов и т.д. Отдельно хочу остановиться на "Буфере обмена" .

      При копировании и вставке текста из Microsoft Word в окно редактора JCE с помощью известных комбинаций клавиш Ctrl-C и Ctrl-V копируется много лишней информации, заключенной в стилях и тегах Microsoft Word . Их можно увидеть перейдя из визуального вида редактора JCE в HTML вид с помощью кнопки "Toggle Editor" . Дело в том, что редактор JCE не убирает этот мусор, что в свою очередь приводит к увеличению объема кода страницы и, как следствие, к увеличению времени ее загрузки. Поэтому, прежде чем вставить статью в окно редактора JCE, материал нужно сначала скопировать в блокнот, а из него в окно редактора JCE.

      Однако можно настроить редактор JCE так, чтобы оптимизировать и сократить код без ущерба для вида страницы после вставки материала сразу из Microsoft Word. Выставьте параметры как указано ниже.
      Очистка Microsoft Word -выбираем "Всегда" .
      Атрибуты классов - "Да".
      Удалять все SPANS- "Да".
      Удалять все стили- "Да".
      Теперь вставка материала из Microsoft Word в окно редактора JCE с помощью той же комбинаций клавиш Ctrl-C и Ctrl-V или с помощью кнопки "Paste" в панели инструментов редактора будет осуществляться без ненужного хлама.
      После установки, необходимо включить редактор JCE по умолчанию. Для этого заходим в Сайт > Общие настройки > Сайт . В колонке "Редактор по умолчанию" выставляем "Редактор - JCE" . Далее жмём "Сохранить и закрыть".


      В "менеджере материалов" - "создать материал" видим окно редактора JCE и панель его инструментов.


      P.S. Если у вас при попытке, вставить изображение в статью во всплывающем окне неожиданно появятся "кракозябры" не огорчайтесь, просто нужно в файл administrator/components/com_jce/jce.php после строчки: defined("_JEXEC") or die("RESTRICTED"); прописать следующую строчку: header("Content-type: text/html; charset=utf-8");
      и все будет на русском языке.
      Если у вас возникли вопросы напишите об этом комментарий. Спасибо за внимание!