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

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

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

      Как скачать и установить редактор JCE

      Скачивать редактор нужно с сайта производителя: www.joomlacontenteditor.net Выбираем меню Downloads -> Editor и скачиваем редактор для вашей версии Joomla. Главное не перепутайте версию!

      Затем устанавливаем редактор через Менеджер Расширений в админке joomla.

      Меню Расширения -> Менеджер Расширений

      И осталось применить его, чтобы он заработал. Меню Система -> Общие настройки -> Редактор по умолчанию выбираем в списке JCE.

      Русификация редактора JCE

      После установки редактора можно его русифицировать если английский вас не устраивает. Для этого на сайте www.joomlacontenteditor.net идем в меню Downloads -> Languages. Внизу в списке выбираем русский язык и жмем кнопку Create Package После этого рядом с ней появится кнопка Download. Скачиваем созданный файл к себе на компьютер.

      Для установки языка нужно зайти в меню Компоненты -> Редактор JCE -> Установка дополнений. Выбрать языковой файл и нажать на кнопку Установить пакет

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

      Данный визуальный редактор имеет более 50 различных функций, которые могут вам пригодиться при форматировании текста и для этого вам совсем не обязательно знать HTML. Редактор разделился на версию Pro и Core. После разделения версия Pro имеет в своём составе плагины, версия Core идёт без оных и поставить нельзя (последняя версия позволяющая ставить плагины - 2.5.31). Для скачивания выложена версия Core. Справа от меню появились закладки Editor, Code, Preview.

      Функции редактора JCE

      • Форматирование текста с помощью уже известных инструментов и кнопок, которые можно встретить в любом текстовом или визуальном редакторе.
      • Вставка и редактирование таблиц.
      • Вставка изображений при помощи удобного менеджера изображений.
      • Возможность создания ссылок на любые элементы Joomla, на файлы или любые произвольные ссылки.
      • Возможность добавить стиль любому элементу, заранее этот стиль необходимо прописать в файле template.css.
      • Добавление и удаление различных инструментов с панели редактора.
      • Настройка панели редактора по своему вкусу.
      • Возможность создания профилей, например, для администратора и для зарегистрированных посетителей. Благодаря этому можно очень гибко управлять инструментами редактора, которые будут доступны зарегистрированным посетителям.
      • Установка дополнительных языковых пакетов и плагинов.
      • Хорошая кроссбраузерность.

      Скачать редактор

      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 редакторе, используйте кнопку правописание, что находится на панели управления.

      От автора: приветствую Вас, дорогой друг. Для создания материалов сайта, администратору необходимо добавить текст, в специальную текстовую область. При этом, его форматирование осуществляется непосредственно в текстовой области, с использованием визуального редактора, от которого, конечно же, зависит продуктивность и удобство работы. Поэтому в данной статье я хотел бы рассмотреть удобный и функциональный редактор — JCE editor для Joomla 3.

      Итак, для тех, кто не знает в Joomla визуальный редактор – это специальная библиотека, а лучше сказать расширение, благодаря которому, информация, редактируемая в текстовой области, будет выглядеть на странице точно так же, как она выглядит непосредственно в редакторе. При этом форматирование осуществляется не ручным прописыванием тегов HTML, и использованием элементов управления редактора. А значит, оформить текст сможет абсолютно любой человек, без наличия специальных знаний.

      Как Вы знаете, система управления контентом Joomla, так сказать из коробки, поставляется с двумя встроенными визуальными редакторами — CodeMirror и TinyMCE. Лучшим, конечно, является второй, но все же, по удобству использования, а также гибкости настроек он не совсем хорош. Поэтому я бы рекомендовал, для сайта, на котором, предполагается частое добавление больших материалов со сложным форматированием, использовать более удобный и функциональный редактор.

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

      Каждое из доступных расширений обладает определенными достоинствами и недостатками, но все же, как показала практика, редактор JCE для Joomla 3, является наиболее удобным и функциональным. Поэтому кликаем, по заголовку данного редактора и переходим на страницу его описания.

      Скачав, расширение редактора, в виде архива формата.zip, устанавливаем его стандартным образом, используя менеджер расширений.

      Но, не спешите пока приступать к работе с новым редактором для джумла 3, так как для более комфортной работы необходимо скачать пакет локализации. Для этого возвращаемся на сайт разработчиков и используя главное меню, переходим на страницу “Languages” (Главное меню->Downloads->Languages).

      Современные тенденции и подходы в веб-разработке

      Узнайте алгоритм быстрого роста с нуля в сайтостроении

      Выбрав интересующий язык, кликаем по кнопке “Create Package” для формирования архива, а затем, используя кнопку “Download”, скачиваем готовый к установке пакет локализации. При этом данный пакет, установить при помощи менеджера расширений, не получится, так как это локализация компонента редактора и ее установку необходимо производить с панели управления JCE.

      Теперь, необходимо перейти в глобальные настройки CMS Joomla (Главное меню->Сиcтема->Общие настройки) и на вкладке “Сайт”, в выпадающем списке “Редактор по умолчанию”, выбираем только что установленный редактор для Joomla 3.

      После, сохранения настроек, перейдем в менеджер материалов и на странице добавления нового материала, проверим работоспособность нового визуального редактора.

      Визуальный редактор JCE Editor, помимо функционала, хорош своей гибкостью в плане настроек. Для доступа к настройкам необходимо перейти в панель управления редактора, используя меню компонентов (Компоненты->JCE Editor).

      Для установки пакета локализации, переходим в раздел “Install Add-ons”, выбираем файл с архивом и кликаем по кнопке “Install Package” для установки. После обновления страницы в браузере, установленная локализация будет применена.

      В разделе “Общие настройки редактора ” приведены основные настройки редактора.

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

      В разделе “Профили редактора” Вы можете создать или отредактировать профиль работы редактора. Профиль – это настройка редактора под конкретную группу пользователей. Как Вы знаете у каждой группы пользователей в Joomla, свои определенные привилегии и полномочия. Соответственно, если для некоторых групп, необходимо ограничить функционал редактора, то есть ограничить количество доступных элементов управления, значит необходимо, либо создать новый профиль, либо отредактировать один из стандартных. Опять же сейчас я не привожу описание настроек профиля, так как их очень много, да и это не требуется – интерфейс страницы настроек интуитивно понятен и к тому же каждый параметр сопровождается подробным описанием.

      Таким образом, как Вы видите, редактор JCE действительно более удобен, нежели инструменты, которые поставляются в стандартном функционале. Более подробно, работа с данным редактором, рассмотрена в курсе .

      На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

      Современные тенденции и подходы в веб-разработке

      Узнайте алгоритм быстрого роста с нуля в сайтостроении