Существует множество удобных редакторов для создания и изменения содержимого страниц в современных CMS. Joomla как одна из наиболее популярных систем управления контентом имеет стандартный редактор TinyMCE. Если возникла необходимость заменить данный редактор, обратите внимание на CKEditor.
Вначале редактор назывался FCKEditor в честь создателя Frederico Caldeira Knabben и устанавливался как плагин. Сейчас он стал самостоятельным компонентом и сменил название на CKEditor.
На сегодняшний день CKEditor адаптирован к большинству CMS. Чаще всего его устанавливают на Joomla и Drupal, но также он есть и для WordPress, PHP Nuke, Netcat и т.д.
Этапы установки просты.
- Скачиваем редактор с официального сайта http://ckeditor.com/download.
- В админке Joomla выбираем Расширения – Менеджер расширений – Установка – Загрузить файл пакета – Обзор. Выбираем наш .zip архив, выбираем «Загрузить и установить».
- В меню Сайт – Общие настройки устанавливаем редактор по умолчанию – Editor-CKEditor
Теперь компонент готов к работе.
Приятно, что сам редактор сильно напоминает MS Word, поэтому можно интуитивно понять, какая кнопка за что отвечает. Также плюсом является то, что при копировании текста из MS Word, сохраняются все ссылки и оформление текста. Можно улучшить компонент с помощью плагинов, которые также скачиваются с официального сайта http://ckeditor.com.
Давайте углубимся в детальную настройку редактора.
Детальная настройка редактора
Открываем редактор через меню Компоненты – CKEditor.
Раздел настроек содержит пять вкладок для каждой группы настроек CKEditor. Каждая установка содержит подсказку, которая объясняет, что конкретный пункт делает, и отображается при наведении курсора на название параметра.
Чтобы изменить настройку, выберите нужное значение из раскрывающегося списка, включите переключатель или введите значение в текстовом поле. После того как вы внесли изменения, нажмите кнопку «Сохранить» или «Сохранить и закрыть», чтобы сохранить изменения. Если вы хотите отменить редактирование и оставить нетронутой конфигурацию CKEditor, нажмите кнопку «Закрыть».
Основные настройки (Basic Settings)
Основные параметры управления содержат параметры конфигурации, определяющие внешний вид и язык CKEditor.
Внешний вид редактора
Редактор раздела «Внешний вид» позволяет настроить панель инструментов CKEditor, скин и редактор размера. Можно также включить или отключить Auto Grow и изменить плагин «Таблица».
Administrator toolbar устанавливает панель инструментов редактора, доступную для администратора сайта. Вы можете выбрать между Full (все кнопки панели инструментов CKEditor), Advanced и Basic.
Frontend toolbar панели инструментов устанавливает панель инструментов редактора, доступную для пользователей сайта (для фронтэнда). Вы можете выбрать между Full (все кнопки панели инструментов CKEditor), Advanced и Basic.
Skin задает шаблон отображения редактора, определяющий внешний вид его интерфейса (кнопки панели инструментов и фона). Вы можете выбрать между Kama (скин по умолчанию), Office2003, и v2.
Editor width задает ширину интерфейса редактора. Используйте CSS (50em, 80%) или просто целое число, которое обозначает значение в пикселях (например, 400).
Editor height задает высоту области редактирования CKEditor. Используйте относительные или абсолютные единицы длины (например, 20em, 200px). Процентные значения не поддерживаются.
Если ширина и высота не установлены, редактор будет сам выбирать размеры, исходя из разрешения вашего монитора.
Auto Grow plugin включает или отключает Auto Grow плагин, который заставляет окно редактора расширяться и сокращаться в зависимости от количества и размера содержимого, введенного в область редактирования.
Table Resize plugin – включение или выключение плагина «Таблица», который позволяет пользователю менять размер столбцов таблицы с помощью мыши.
Настройки языка
Раздел «Настройки языка» позволяет настроить язык интерфейса CKEditor и направление письма.
Auto-detect language включает или отключает автоматическое определение языка, который будет принят как язык интерфейса CKEditor в соответствии с языком браузера или операционной системы пользователя. Если пользовательский язык не поддерживается в CKEditor, интерфейс будет отображаться на английском языке.
User interface language – выбор языка интерфейса пользователя, если автоматическое определение языка отключено. Сейчас вы можете выбрать из 59 локализаций.
Language direction устанавливает языковое направление текста, набранного в редакторе. Вы можете выбрать «слева направо» Left to right (как английский) или «справа налево» Right to left (арабский или иврит).
Расширенные настройки (Advanced settings)
Вкладка «Дополнительные параметры» содержит некоторые дополнительные параметры конфигурации, определяющие такие вещи, как вывод CKEditor, стили, шаблоны и проверку орфографии. Вы также можете добавить собственную конфигурацию JavaScript.
User interface color задает цвет пользовательского интерфейса CKEditor. Работает только для скина Kama. Значение цвета должно быть указано одним из способов HTML. Допустимые форматы: #ff0000, RGB(255,0,0) или определенные в HTML названия цветов, такие как red .
Enter mode определяет, в какой элемент HTML будет заключен абзац, когда пользователь нажимает клавишу ввода. Вы можете выбрать между элементами P, BR и DIV. По умолчанию рекомендуется установить тег <p>.
Однако если вы не хотите автоматического разрастания в тексте материала конструкций типа <p> </p>, используйте тег br.
Shift enter mode определяет, в какой элемент HTML будет заключен абзац, когда пользователь нажимает комбинацию клавиш Shift + Enter. Вы можете выбрать между элементами P, BR и элементом DIV. По умолчанию рекомендуется установить тег BR.
Use template CSS – если включено, тогда редактор будет использовать CSS файл Joomla! (editor.css или template.css), в области редактирования.
Styles definition file – если у вас несколько файлов со стилями, определите имя файла стиля, используемого редактором. Этот файл должен быть помещен в папку plugins/editors/ckeditor/styles сайта.
Templates definition file – если у вас несколько файлов с шаблонами, определяет имя файла шаблона, используемого редактором. Этот файл должен быть помещен в папку plugins/editors/ckeditor/templates вашего сайта.
CSS files определяет имя (имена) файла CSS, который будет использоваться в области редактирования для применения стилей к содержимому. Файл(ы) должны быть помещены в папку plugins/editors/ckeditor/css вашего сайта.
Замечание: если поля будут пустые, тогда будут использоваться стандартные файлы, которые идут с редактором. В поле нужно прописывать только название файла, без его формата.
Link browser включает или выключает Link browser, который облегчает внедрение ссылок в другие части вашего Joomla! сайта.
Absolute URL in link browser – включение и выключение использования абсолютного URL в браузере для ссылок.
SCAYT autostart определяет, будет ли включена автоматическая проверка орфографии при вводе (SCAYT). Может повлиять на загрузку редактора.
Use html entities определяет, будут ли использоваться HTML-сущности.
Исходное форматирование
Раздел «Исходное форматирование» позволяет настроить различные параметры форматирования источника CKEditor.
Indent the element contents устанавливает набор отступов для элементов HTML при редактировании содержания в режиме исходного кода.
Break line before the opening tag – создание новой строки перед открывающим тегом.
Break line after the opening tag – создание новой строки после открывающего тега.
Break line before the closing tag – создание новой строки перед закрывающим тегом.
Break line after the closing tag – создание новой строки после закрывающего тега.
Indent the <pre> element contents – отступ содержимого элемента <pre>.
Дополнительная настройка
Custom configuration позволяет использовать все варианты конфигурации CKEditor, но настраивать его рекомендуется только опытным пользователям. Если вы допустите ошибку в конфигурации, CKEditor может работать не так, как ожидалось. Любые записи в этот раздел равносильны записям в файл config.js. Об этом подробнее.
Часто при редактировании текста в исходном коде для материала страниц необходимо, чтобы HTML-код сохранялся в точности, как этого хочет разработчик, т.е. без автоформатирования.
Для примера внедрим микроразметку в страницу контактов, добавив в конец страницы следующий HTML-код (в режиме «Источник»):
После переключения в визуальный редактор и обратно в исходный код видим, что встроенный код был отформатирован CKEditor: теги вырезаны, переставлены, удалены или добавлены не туда, куда надо, т.е. происходит непредсказуемая обрезка исходного кода редактором.
Как бороться с автоматическим форматированием HTML-кода в CKEditor?
По умолчанию CKEditor выводит Valid HTML-код. Если вы хотите разрешить пользовательские теги, например, как те, что указаны выше, необходимо настроить protectedSource.
ProtectedSource – список регулярных выражений, которые будут выполняться на входе в HTML, указывая тот исходный код, который при сопоставлении с регулярным выражением не должен быть доступен для редактирования в режиме WYSIWYG (в визуальном редакторе).
Сделаем запись в Custom javascript configuration:
CKEDITOR.config.protectedSource.push(/<div itemscope itemtype=[\s\S]*?<\/div><\/div>/g);
В зависимости от настроек может быть запись:
CKEDITOR.config.protectedSource.push(/<div itemscope itemtype=[\\s\\S]*?<\\/div><\\/div>/g);
С такой настройкой любой текст, соответствующий заданному шаблону, будет сохранен в исходном коде без изменения. Но есть один минус – эта защищенная часть текста не отображается в визуальном редакторе.
Приведу еще пример. Допустим, необходимо вставить теги следующего вида:
Если не защитить данную конструкцию, при переходе в визуальный редактор и обратно в источник получим:
Делаем запись в Custom javascript configuration:
CKEDITOR.config.protectedSource.push(/<table[\s\S]*?<\/table>/g);
Теперь CKEditor не форматирует, не удаляет и не переставляет теги в тексте.
Настройка файлового менеджера (File Browser Settings)
Раздел File Browser позволяет включить и настроить типы URL, а также выбрать группы пользователей, которые смогут использовать файл-браузер.
CKFinder – включение или выключение файлового браузера, который позволяет загружать и управлять изображениями на вашем Joomla! сайте. Дополнительные сведения о CKFinder можно получить на официальном сайте. Если CKFinder включен, но вы не предоставили данные лицензии, файловый браузер будет работать в демонстрационном режиме.
CKFinder URLs type задает тип ссылок URL, который используется CKFinder. Вы можете выбрать между абсолютным и относительным.
User Group Access to file browser – выбор группы пользователей сайта, которым разрешено использовать CKFinder, загружать и управлять файлами.
Остальные настройки в этой вкладке (пути для картинок, флэш, файлов) интуитивно понятны. Останавливаться на них не будем.
Настройка панели инструментов (Layout Settings)
Настройки вкладки Layout Settings определяют внешний вид и функциональность панелей инструментов CKEditor. Можно задать две версии панели инструментов – основную и расширенную.
Процесс создания панели инструментов очень прост и интуитивно понятен. Достаточно перетащить кнопки мышкой. Каждая кнопка на панели инструментов содержит подсказку, которая описывает функцию этой кнопки – наведите указатель мыши на кнопку, чтобы увидеть подсказку.
Если вы измените настройки, вы можете вернуться к настройкам по умолчанию, нажав кнопку Default.
Информация о лицензии
Вкладка «Информация о лицензии» содержит информацию о лицензии компонента CKEditor. Если вы не заполните ее, появится предупреждение. Для нелицензионной копии CKFinder компонент CKEditor File Browser будет работать в демонстрационном режиме. Для того чтобы разблокировать лицензионный продукт, необходимо ввести название лицензии и лицензионный ключ.
P.S. Также стоит учесть, что бывают случаи обрезки кода, когда удаляются необходимые теги, и, как следствие, код работает неправильно. Причиной может быть визуальный редактор, либо это связано с настройками самой Joomla!. Система автоматически применяет фильтр с черным списком HTML-тегов для всего контента, который вы вводите в любом визуальном редакторе. Он удаляет теги iframe, embed, object, script, form и другие.
Для отключения обрезки кода самой Joomla 1.7 (1.6) перейдите во вкладку «Материалы – Менеджер материалов», нажмите кнопку «Настройки» в правом верхнем углу, и перейдите на вкладку «Фильтры текста».
«Черный список» позволяет использовать любые теги и атрибуты, кроме тех, что в него внесены.
«Белый список» позволяет использовать только теги, перечисленные в полях «Фильтр тегов» и «Фильтр атрибутов».
Я рекомендую в случае, когда есть необходимость использовать все теги и атрибуты, установить для администратора сайта опцию фильтра в режим «Нет фильтрации».
