В двух предыдущих статьях серии, посвященной визуальному редактору JCE, мы познакомились с компонентом и рассмотрели его основные инструменты. Теперь пришло время настроить редактор под свои нужды. Многие могут задаться вопросом: «А что там настраивать? Редактор, он и есть редактор.». На самом деле, несмотря на внешнюю простоту использования, JCE имеет в себе множество настроек, влияющих как на удобство работы пользователей, так и на безопасность сайта. О них и пойдет речь в этой статье.
Содержание
Конфигурация
Для начала рассмотрим конфигурацию JCE. Опций здесь немного, но встречаются весьма интересные.
Установка
– GZip-сжатие страниц – JCE для своей работы использует достаточно много JS-файлов и каждый из них загружается на компьютер пользователя при открытии страницы с редактором. С этим ничего не поделать. Но можно включить сжатие этих файлов, что, соответственно, уменьшит время загрузки их на компьютер, а значит и время загрузки страницы с редактором в целом.
Очистка кода
– Очищать HTML – включение этой опции позволяет очищать текст от всех «не html» элементов. В большинстве случаев лучше эту опцию не включать.
– Кодировка объектов – здесь мы определяем как JCE будет кодировать некоторые специальные символы, такие, как, например, пробел. Всего здесь имеем 3 варианта:
- Raw / UTF-8 – Установлено по умолчанию. Все символы будут храниться в обычной форме, кроме: & < > "
- Named – Все символы будут конвертированы в форму «Named». Например, пробел, будет выглядеть так:
- Numeric - Все символы будут конвертированы в форму «Numeric». Например, пробел, будет выглядеть так:  
– Режим плагинов – эта опция создана, для использования криво разработанных сторонних плагинов для контента. Смысл тут такой: JCE преобразовывает некоторые символы, вроде пробела в определенный код(см. предыдущую опцию). Если плагин сделан хорошо, то при работе с контентом он будет понимать эти коды и преобразовывать их обратно в пробелы. Но плагин может быть сделан так, что подобные коды он не поймет и будет выводить их, как текст. Для таких «уникальных» плагинов и нужна эта опция. Благодаря ее включению, JCE будет производить работу по обратному преобразованию за «плохой» плагин. Но если у вас такой проблемы нет, то и включать ее не имеет смысла.
– Оставлять – эта опция позволяет вставлять вместо пробела код даже если в опции кодировка объектов установлено «Raw / UTF-8». Это на самом деле очень удобная штука и вот в чем ее смысл. Предположим, вы хотите написать два слова в одной стоке, выделив их разным цветом и размером, а между этими словами вставить 10 пробелов. Конечно, в обычной практике это вряд ли понадобится, но иногда может и пригодится. Так вот, к чему я привел этот пример. html-код, формирующий эту котовасию, будет выглядеть примерно следующим образом:
1 |
<span style=”Стиль текста 1”>Текст1</span>10 пробелов<span style=”Стиль текста 2”> Текст2</span>
|
Форматирование
– Обязать Контейнер элементов – эта штука автоматически помещает весь текст, не находящийся в тегах, в эти самые теги.
Пример: вы написали(или вставили из ворда) слово «Привет». После этого, в зависимости от того, что установлено в данной опции, html-код будет выглядеть следующим образом:
- Абзац: <p>Привет</p>
- DIV: <div>Привет</div>
- Отключено: Привет
Правильнее всего оставить в этой опции абзац.
– Разделители строк – еще одна интересная опция, которую мы живо обсуждали в комментариях к предыдущей статье про JCE. Если вы пишите текст, скажем, одно предложение, и нажимаете после него Enter, то по правилам вы начинаете новый абзац. Многие этого почему-то не знают и вставляют Enter’ы просто чтобы выровнять текст. JCE работает по правилам, и каждый вставленный в текст Enter он интерпретирует, как новый абзац. В итоге, у тех, кто навтставлял в тексте слишком много Enter’ов, на html-странице получается ерунда. Виноват при этом остается конечно редактор :). Данная опция отвечает за эти самые Enter’ы и позволяет переносить текст на новую строчку двумя способами:
- С помощью тегов абзаца <p></p>
- С помощью обрыва строк <br />
Первый вариант правильнее, предпочтительнее, и потому установлен по умолчанию.
– Класс содержимого редактора, Выборочный класс содержимого редактора – эти две опции можно объединить в одну. Они позволяют применить немного своих CSS-стилей к внешнему виду редактора(если в первой опции установлено «выборочный»).
– Использовать CSS шаблона – если выбрано да, то для стилей редактора и контента будет использован css-код текущего шаблона.
– Использовать выборочный файл CSS – здесь мы можем указать собственный css-файл, стили которого будут применены к редактору и контенту.
Дополнительно
– Выборочные Переменные Конфигурации, Выборочный Callback-файл – смысл этих двух опций мне не ведом. Решил посмотреть в документации разработчиков, а там лишь отсылка к документации TinyMCE. Если вдруг кто знает и объяснит в комментариях, буду очень благодарен и допишу в статье.
Группы
Вся прелесть JCE открывается в тот момент, когда знакомишься с группами. Если основные настройки JCE довольно скудны, то настройки групп очень обширны. Разберемся что же такое группы.
Как нам известно, Joomla имеет 7 групп безопасности: зарегистрированный, автор, редактор, управляющий, менеджер, администратор, суперадминистратор. Предположим, что на сайте используются несколько из этих групп. Нам может потребоваться дать каждой из групп свои полномочия в редакторе. Т.е. каждая группа имеет свой, уникальный редактор, с нужным набором инструментов и уровнем доступа. JCE позволяет сделать это.
Менеджер групп JCE доступен по пути «JCE» –> «Группы». Он выглядит следующим образом:
Изначально мы видим только 2 группы: Default и Frontend. При этом активирована только группа Default. В группу Default по умолчанию входят все пользователи, начиная с уровня «Автор» и выше. При клике по названию группы, открываются ее настройки. Тут-то и начинается самое интересное.
В настройках группы мы видим 4 вкладки:
- Установка
- Параметры редактора
- Разметка
- Параметры плагина
Эти вкладки содержат множество опций, позволяющих настроить редактор для группы так, как душе угодно. Рассмотрим каждую вкладку отдельно.
Вкладка «Установка»
Вкладка «Установка» показана на рисунке:
Здесь интересны 3 опции:
- Компоненты – позволяет выбрать компоненты, для которых может использоваться данная группа
- Типы – позволяет выбрать группы безопасности Joomla, которые смогут использовать данную группу
- Пользователи – позволяет выбрать конкретных пользователей, которые смогут использовать данную группу
Таким образом, благодаря вкладке «Установка», мы можем создать множество различных групп JCE, наполнив их максимально гибко.
Вкладка «Параметры редактора»
Вкладка «Параметры редактора» показана на рисунке:
Здесь мы видим множество опций. Опишу только неочевидные:
– Переключатель редактора – при активации в угол редактора вставляется кнопочка «[show/hide]», позволяющая переключаться между JCE и html-редактором без перезагрузки страницы;
– если кто не знает, URL-адреса бывают абсолютные и относительные. Абсолютные – такие, какие вы видите в адресной строке браузера. Относительные – такие же, как и абсолютные, но без «http://домен.ru/». Смысл относительных адресов в том, что если вы ссылаетесь в текстах ваших статей на страницы вашего же сайта, используя абсолютные url, то при смене доменного имени все ссылки перестанут работать. Если же вы использовали относительные URL, то при смене имени, во всех ссылках домен изменится и они будут работать;
– Запрещенные элементы – здесь можно перечислить элементы, которые будут автоматически удалены при сохранении материала.
– Расширенные элементы – здесь можно указать элементы, которые не следует удалять JCE при активной опции «Очищать HTML»;
– Разрешить Javascript, CSS, PHP, IFrame, Applets – эти несколько опций я объединил в одну, т.к. смысл у всех одинаков. Здесь можно разрешить, либо запретить применение в тексте Javascript, CSS, PHP, IFrame, Applets. Точнее говоря, применить-то все это получится, а вот при сохранении(если в этих настройках выбрано «нет») все Javascript, CSS, PHP, IFrame, Applets -коды будут удалены из материала. По поводу этих опций нужно сказать еще несколько слов. Думаю, многие web-мастера, использующие JCE, сталкивались с неприятной ситуацией, когда при сохранении материала из него пропадали все скрипты, фреймы, флешки. Виноват тут JCE, точнее он-то не виноват, а просто так настроен. Это сделано для безопасности, поскольку с помощью скриптов в материал можно добавить что-нибудь нехорошее. Единственный, на мой взгляд, минус JCE – то, что разработчики не создали отдельную группу JCE для суперадминистраторов по умолчанию. Приходится делать это самостоятельно и разрешать применение всех этих технологий.
– Элементы блочного формата – здесь можно указать все html-элементы, которые будут находится в выпадающем списке инструмента JCE «Формат»;
– Шрифты – несколько опций я объединил в одну. Тоже, что и в предыдущем пункте, но выпадающие списки шрифтов.
– Путь к директории файлов – это особая опция, поскольку она выполняет крайне важную задачу. Задача эта заключается в следующем: представьте, у вас на сайте открыта регистрация пользователей и зарегистрированные пользователи могут добавлять на сайт материалы. Либо иначе: у вас есть несколько авторов, которые наполняют сайт. При такой ситуации сразу встает вопрос: как отделить файлы, загружаемые разными пользователями, друг от друга? Т.е. нам нужно, чтобы каждый пользователь(автор) видел в редакторе только те файлы(например, картинки), которые он загрузил сам, и не видел все остальные(и, тем более, не мог бы ими управлять). Для решения этой, казалось бы, сложной задачи нам достаточно только правильно настроить опцию «Путь к директории файлов». Главная идея содержится в подсказке JCE к этой опции: «Этот путь может содержать переменные $id, $username, $usertype и $group, которые будут преобразованы в соответствующие эквивалентные значения». Это означает, что если мы напишем здесь:
images/stories/$id
то для каждого нового пользователя автоматически будет создаваться уникальная папка с названием, совпадающим с ID этого пользователя в базе данных. Также название папки может соответствовать имени пользователя, его типу, либо группе. Лучше всего использовать именно ID, поскольку все остальные переменные могут меняться с течением времени.
Вкладка «Разметка»
Вкладка «Параметры редактора» показана на рисунке:
Очень интересная вкладка в которой мы можем провести «уникальный тюнинг» редактора для настраиваемой группы. Делается это простым перетаскиванием кнопок редактора либо вниз(при этом они будут появляться в редакторе), либо вверх(не будут появляться в редакторе). Таким незамысловатым способом мы можем создавать уникальные редакторы для каждой группы.
Вкладка «Параметры плагина»
Вкладка «Параметры редактора» показана на рисунке:
Это последняя вкладка, в которой настраиваются параметры плагинов JCE. Опций здесь очень много, но все они довольно просты в понимании и не требуют детального описания. Советую всем самостоятельно изучить данную вкладку, поскольку в ней найдется несколько опций, повышающих удобство работы с редактором.
Благодаря группам, а также настройкам, которые можно к ним применить, JCE может по праву считаться одним из лучших компонентов визуального редактора для CMS Joomla. При большой гибкости, JCE обладает всеми необходимыми функциями для удобной работы с контентом. Не хватает, пожалуй, только одного – красивых эффектов всплывания, вкладывания и.т.д. Все это существует в качестве дополнений к JCE. О наиболее полезных из них я расскажу в следующей статье серии.
Почему рекомендуете оставлять?
Меня лично бесит когда чистый код из-за этой настройки постоянно забивается этими неразрывными пробелами.
Все гадал как отключить, вот прочитал вашу статью и все стало ясно, спасибо.
"Оставлять неразрывные пробелы" имеется ввиду выше
без них намного удобнее
Я вставляю текст из буфера и получаю 2 раза одно и тоже.
Попробую обновить редактор, возможно проблема решена.
С некоторых пор столкнулся с проблемой в редакторе (в tiny_MCE такая же проблема) JCE при форматировании текста. Когда я указываю начертание шрифта (жирный, курсив, подчеркнутый), редактор выдает span style="text-decoration: underline;". Мне нужны нормальные теги u, b, i. Ставлю их и естественно, что редактор самовольно меняет на неудобовариваемые встроенные стили, подчиняясь своим настройкам.
Прошу совета, что нужно сделать в скриптах JCE, чтобы сделать теги тегами?
Получается что "Очищать HTML" его и убирает. А почему, разве IFrame это какой-то не валидный HTML?
Сделать права на вставку IFrame только для администратора тоже нельзя, поскольку рядом с картой всегда находится адрес, телефоны, описание проезда - это обычная страница с контактами, только с гугл картой и люди хотят сами править там все перечисленные детали.
Другими словами нужно получить корректный HTML , но с возможностью вставки IFrame.
а можно ли править хтмл код?
я переключаюсь в него.... и все только просмотр, даже скопировать не дает, не говоря уже о правке.... (
и не открывают список картинок http://s60.radikal.ru/i170/1105/3f/69d45039ed9c.jpg
Если сталкивались с подобной проблемой, подскажите как быть?
Такой вопрос: задал корневой каталог в "Дириктории файлов" в виде images/stories/$id
Но при открытии окна загрузки файлов, корневым все равно остается images/stories. Как исправить? Что правильно вписать?
Что может быть не так? Возможно не поставил какой-либо плагин? Или новая версия исключила данную опцию?
Григорий, в этой статье я писал про это.
++++++++++++++++++++++++++++++++++++++++
Такая же проблема какую описал - Григорий...
Несколько раз пересмотрел статью и комментарии - ответа не нашел?
Если кто сталкивался с подобной проблемой отзовитесь, пожалуйста.
Подскажите, как (где) добавить класс к стилям класса?
p.s. нужно smartresize чтоб не вводить в ручную)
components\com_jce\editor\libraries\js\tiny_mce_utils.js
добавил к существующим ('jcepopup','jcetooltip') свой smartresize
Мне только надпись нужна, сам плагин-то отрабатывает класс
еще порывшись проблема нашлась
После строчки:
defined('_JEXEC') or die('RESTRICTED');
Вставить строку:
header('Content-type: text/html; charset=utf-8');
И html код тоже не сохраняет.
Joomla 3, JCE 2.3.4.4
Именно в таком виде. Не пойму откуда беруться эти слэши и . Как от этого избавиться? Может кто-нибудь сталкивался?
в настройках уже всё перепробовала. подскажите варианты :(
Что значит "удалить не могу"?
Редактор превращает его в такой
В настройках JCE выключил все возможные проверки и автоправки кода. Может что проглядел?
А вообще, зачем писать CSS в статье? Не лучше ли писать его в отдельном CSS-файле, подключенном к шаблону, а в сам шаблон добавлять только классы?
Дело в том, что стандарт html не разрешает вставлять CSS-код вида:
никуда, кроме как между тегами HEAD. Редактор JCE по умолчанию следует этому правилу для поддержки валидности. Точнее, он использует атрибут scoped, который, судя по: http://www.w3schools.com/tags/att_style_scoped.asp пока что-то не очень поддерживается браузерами.
Если мы отключаем опцию, про которую я писал выше, то игнорируем валидность, но зато все будет работать.