static_rocket_468x60.jpg

CKEditor в Drupal. Как установить и настроить.

CKEditor

Обычно установка текстового редактора в Drupal проходит в два этапа. Сначала ставим модуль wysiwyg и только после этого редактор. Если у вас нет предпочтений в выборе редактора и вы, так же как я, не любите лишние движения, то предлагают попробовать CKEditor.

  1. Настраиваем CKEditor
  2. Загрузка изображений
  3. Дополнительные фильтры
  4. Подсветка синтаксиса

Этот редактор устанавливается как модуль вот ссылка на страницу https://www.drupal.org/project/ckeditor. Переходим, скачиваем, ставим как обычный модуль или делаем ещё проще drush dl ckeditor drush en ckeditor Две команды drush = минута времени и можно приступать к настройке.

Настройка CKEditor

Переходим в меню Конфигурация → Работа с содержимым → CKEditor. Сначала посмотрим что нам предлагают глобальные настройки. Пропускаем выбор шкурок и переходим к самому интересному - Расширенным настройкам.

Первым и единственным обязательным пунктом является Path to CKEditor - путь до CKEditor. Здесь может быть любой внешний URL. По умолчанию стоит cdn - оптимальный вариант если только у вас нет причин использовать свой вариант.

Local path to CKEditor - путь до CKEditor на вашем сервере. Указываем или абсолютный путь или относительно файла index.php

Далее также определяется место расположения плагинов и файл менеджера CKFinder. В описании каждого пункта настройки есть список "заменителей" и адрес соответствующий текущим настройкам.

Также в глобальных настройках можно включить агрегацию(не рекомендуется) и включить/выключить drag-and-drop при настройке интерфейса. Отключение drag-and-drop не такая уж и бесполезная функция, как может показаться. Пример из личного опыта. Во время настройки редактора я перестарался с подключением/отключением плагинов. В какой-то момент у меня перестала отображаться кнопка для вставки кода. Отключив перетаскивательный интерфейс я прописал название кнопки в ручную и кнопка появилась. Главное знать как называются кнопки.

Переходим к настройкам профилей. Доступны они стой же страницы Конфигурация → Работа с содержимым → CKEditor.

В базовых настройках отмечаем для каких режимов форматирования доступен этот профиль. В разделе безопасности перечислены какие фильтры применены. О фильтрах расскажу позже.

Editor appearance - внешний вид редактора. Прежде всего выбираем кнопки. Если в глобальных настройках включён drag-and-drop то кнопки можно перетаскивать мышкой. С помощью вертикальных и горизонтальных линий группировать кнопки. Также в этом блоке настроек можно разрешить включать/отключать редактор(Show the disable/enable rich text editor toggle) и скрывать кнопки делая их видимыми по клику(Toolbar state on startup). Далее идёт выбор цветовой схемы. Можно выбрать одну из представленных или настроить свою.

За счёт списка плагинов можно прокачать редактор добавив дополнительные возможности. Некоторые плагины достаточно подключить(счётчик знаков и слов) и они будут работать. Для некоторых нужно добавить кнопку, как на пример для плагина вставки картинок через IMCE. Я бы не рекомендовал использовать этот плагин о причинах читайте в следующем разделе про добавление картинок. Для некоторых нужно ещё настроить фильтры как например для плагина вставляющего код. Если чего-то не работает не спешите всё валить на плагин. Последними в данном блоке идут языковые настройки.

Следующий блок настроек Advanced content filter. Здесь включаются фильтры и задаются параметры фильтрации для вводимого содержимого. Я предпочитаю настраивать фильтры в режимах форматирования.

Блок настроек Cleanup and output определяет ввод и вывод содержимого. По умолчанию настройки установлены так что при нажатии на Enter будет создаваться новый абзац а при Enter + Shift перенос строки в текущем абзаце. Плюс к этому можете настроить опции форматирования HTML кода. Внешне ваше содержимое от этого не измениться. В блоке настроек CSS определяется внешний вид редактора. Выбираете один из вариантов или указываете путь до css файла.

File browser settings - выбираем файл менеджер для вставки картинок. Я пользуюсь IMCE. Если вам по душе CKFinder то здесь же можно указать папку для закачиваемых файлов.
В дополнительных настройках можно разрешить CKEditor заменять вставляемый HTML как простой текст и включить проверку орфографии.

Загрузка изображений в CKEditor - IMSE vs CKFinder

За загрузку картинок у меня отвечает IMCE. Я не стал заморачиваться с CKFinder потому что он платный. Да у него есть демоверсия. Не знаю ограничена она только по функционалу или ещё и по времени. Самый главный минус - чтобы всё заработало нужно лезть в конфигурационные файлы. С IMCE таких проблем нет. Ставим модуль, выбираем IMCE как файл-менеджер в настройках CKEditor и можем работать.

Перейдём в меню Конфигурация→ Мультимедиа → IMCE.

IMCE

Первым идёт список профилей. IMCE может наделять пользователя большими правами по управлению файлами. Чтобы левые люди не воспользовались ими, в IMCE предусмотрены профили. К ним мы вернёмся позже. Дальше идёт список ролей пользователей и соответствующие им профили. Не достаточно в настройках CKEditor указать IMCE как файл-менеджер и добавить кнопку. Здесь нужно явно задать какой роли какой профиль соответствует. Последними идут общие настройки. С них и начнём.

Первое что нам предлагают это подключить IMCE к полям не имеющим редактора. Нужно вписать через запятую ID таких полей, после чего под полем появиться ссылка по клику на которую можно будет закачать картинку. Далее идёт включение абсолютных URL для файлов. Ещё один интересный пункт - как поступать с файлами с одинаковым названием. По умолчанию новый файл будет переименовываться.

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

С основными настройками разобрались переходим к настройкам профилей. С начала идёт стандартное поле с названием профиля. Далее ограничения по размеру, весу и формату загружаемых файлов. Обратите внимание что есть квота на папку и квота на пользователя. Дело в том что свои файлы пользователь может загружать в разные папки. Для этого в таблице Directories нужно задать доступные адреса. Там же можно выбрать доступные действия.

настройка дирректорий в IMCE

В поле адрес папки можно вписать PHP код для создания адресов. IMCE будет сам создавать папки для пользователей. Инструкция как это сделать есть под таблицей.  Такой подход к созданию папок удобен тем, что файлы пользователей лежат по отдельным папкам а не в общей куче. Очень удобно если на сайте много пользователей с правом на добавление контента. Можно пойти дальше и не ограничиваться просто созданием директории с именем пользователя а добавить в неё вложенные директории с датой. В поле адрес папки вписать php: return $user->name.'/'.date('m-Y'); В итоге в адресе кроме имени пользователя будет текущий месяц и год. Каждый месяц будет создаваться новая папка. Для чего это нужно? Помните в настройках квот можно указывать максимальный объём для папки и для пользователя в целом. Ограничив пользователя рано или поздно вы столкнетесь с проблемой что пользователь исчерпает свой лимит и тут нужно либо удалять файлы либо увеличивать квоту. Мы сделаем лучше. Ограничим объём загружаемых файлов для папки, а общую квоту сделать безлимитной. Получается что у нас есть месячная квота на объём загружаемых файлов при этом безлимит на весь аккаунт.

IMCE кроме закачки/вставки картинок может изменять их размеры. Ресайз картинок создаст дополнительную нагрузку на сервер поэтому давать пользователям разрешение на ресайз не лучшая идея. Тем более не стоит разрешать ресайз если на Drupal сайте настроены адаптивные изображения. Это делает ресайз бессмысленным.

Последним пунктом идёт настройка превьюшек. Каким образом они будут уменьшаться определяется в общих настройках, а здесь просто указывается имя, размер и префикс.
Чтобы вставить изображение нужно в редакторе нажать на кнопку, затем в открывшемся окне нажать "выбрать файл на сервере" после этого вам откроется окно с IMCE. В CKEditor есть плагин позволяющий пропустить этот шаг. Подключаете в настройках редактора плагин и добавляете кнопку IMCE. Теперь файл менеджер доступен сразу по клику на кнопке. Это немного упрощает добавление изображений. Но если вы на своём сайте настроили адаптивные изображения так делать не рекомендуется. Изображения вставленные напрямую через IMCE вставляются через тег <img>, а не через <picture>. Я не советую использовать этот плагин.

Фильтры в CKEditor

Что такое фильтры, зачем они нужны и как их настраивать описано в статье про TinyMCE. Кроме дефолтных фильтров можно поставить дополнительные, например HTML Purifier. Как видно из описания этот фильтр удаляет вредоносный код и делает HTML мягким и шелковистым. Для работы модуля нужна библиотека HTML Purifier. Распаковывать библиотеку можно как в папку sites/all/libraries так и в папку с модулем. Все подробности на странице с модулем или в ридмике.

После подключения модуля в настройках текстового формата появятся два новых фильтра. Для некоторых настроек достаточно выбрать да/нет а для некоторых нужно прописывать условия вручную. Узнать как правильно записать условие можно кликнув по названию настройки. HTML Purifier отличается от стандартных фильтров Drupal. Например разрешив тег <img> вы не сможете вставить картинку. Оказывается что кроме тега нужно ещё разрешить его атрибут src. В настройках HTML в поле Allowed записать  img[src|alt|title] Теперь можете смело добавлять картинки с альтами и тайтлами. По умолчанию HTML Purifier пропускает некоторые теги но, как только вы добавили хотя бы одно правило, установки по умолчанию отключаются.

HTML Purifier после подключения добавляет два фильтра. Для тонкой настройки лучше выбрать расширенную (advanced) версию, для быстрой и простой настрой настройки - обычную. Не нужно включать одновременно две версии.

Как я уже говорил HTML Purifier проверяет HTML на валидность и в случае не соответствия стандартам исправляет. Вроде бы полезная функция но вот картинки вставленные через <picture> он не пропустит.

Как вывести кода красиво. Подсветка синтаксиса.

Судя по данным wordstat, далеко не у всех возникает необходимость подсвечивать синтаксис. Кому-то это не нужно, а кому-то достаточно стандартного <code>. Думаю среди читателей Webonlife процент тех кому интересно узнать как подсветить синтаксис, выше чем в среднем по интернету.

Для подсветки синтаксиса я пользуюсь GeSHi filter. Кроме модуля нам потребуется библиотека GeSHi. Модуль ставим как обычно, библиотека должна находиться в папке sites/all/libraries/

В настройках типа контента включаем фильтр GeSHi. Переходим в меню Конфигурация → Работа с содержимым → Форматы текста → GeSHi фильтр. На вкладке основные настройки видим какую версию библиотеки нашёл модуль, теги для подсветки, поведение по умолчанию. Обычно я ставлю нормальную нумерацию строк, отключаю ссылки для ключевых слов. В настройках CSS выбираю второй пункт - Использовать CSS классы и автоматически управлять внешними файлами стилей.
Теперь вкладка языки. Самое интересное здесь поле Tag/language attribute value. В этом поле указывается на что будет реагировать GeSHi filter при выборе подсветки. По умолчанию создаётся тег с названием языка программирования. Так например участок JavaScript кода должен находиться между тегами <javascript> и </javascript>. Не очень удобно каждый раз отключать редактор и прописывать теги. Не плохо бы иметь в редакторе кнопку которая сделает всё за нас. В CKEditor такая кнопка есть. Что бы эта кнопка появилась нужно подключить плагин codesnippet. Вставлять код теперь проще. Жмёте кнопку, вставляете код, выбираете язык на котором код написан. На этом настройка не заканчивается. Дело в том что плагин для разметки кода использует классы. Нужно эти классы прописать в настройках GeSHi в поле Tag/language attribute value

выбираем языки и классы для подсветки

Последняя проблема - спецсимволы. Редактор записывает их не так как нам хотелось бы. Например "<" будет записано как &lt;. Исправляется редактированием файла geshi.php из библиотеки. Ищем строки // Replace all newlines to a common form $code = str_replace("\r\n", "\n", $this->source); после них вставляем код

  1. $code = str_replace(array('&gt;','&lt;','&lsaquo;','&rsaquo;','&#39;','&quot;','&amp;'), array('>', '<', '‹', '›', "'", '"', '&'), $code);

 Теперь всё должно работать как надо.

Похоже это самая большая инструкция на Webonlife. Времени на настройку редактора уйдёт не мало, но оно того стоит. Текстовый редактор самый используемый инструмент на сайте. Лучше один раз сеть и сделать как надо.

оценить статью: 
Средняя: 5 (7 оценок)

Комментарии

17
Аватар пользователя Александр Каратаев

Александр Каратаев пт, 09/11/2015 - 12:33

Мне тоже очень нравится CKEditor. Раньше как-то больше к TinyMCE душа лежала, но вот сейчас именно CKEditor я использую в качестве визуального редактора комментариев на блоге. Даже плагин сделал для этого...

Аватар пользователя Oleg

Oleg сб, 09/12/2015 - 08:54

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

Аватар пользователя Sipth

Sipth сб, 02/13/2016 - 19:16

Возникла проблема с codesnippet
если подключить в Ckeditor то панель в редактировании материала пропадает.
Проблема именно из-за этого плагина.

Вообще в последнее время он как то себя непредсказуемо ведет себя.
Что бы сделать нормальное отображение панели надо потанцевать с бубном...

В общем вопрос: как подключить codesnippet так что бы панель форматирования Ckeditor не пропадала?

Аватар пользователя Oleg

Oleg сб, 02/13/2016 - 20:49

Проблем с codesnipet небыло поэтому что либо посоветовать не могу. Единственный случай с пропавшей панелью был когда я сам в настройках по умолчанию её отключил.

Аватар пользователя Sipth

Sipth вс, 02/14/2016 - 23:29

Тут у меня возникает следующий вопрос: какой стоит Ckeditor и какая версия плагина снипета?
А так же насколько часто обновляете сам друпал до последней версии.

Просто снипет сейчас реально с чем то конфликтанул сильно. Решил перестать работать после обновления мета тегов, а может совпадение...

Аватар пользователя Oleg

Oleg пн, 02/15/2016 - 21:45

Drupal и модуль CKeditor последней стабильной версии. Обновляюсь сразу как только выходит обновления.

Про версию плагина не помню. Помоему достаточно было отметить его в настройках и вставить кнопку.

Аватар пользователя Sipth

Sipth чт, 02/18/2016 - 22:41

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

Аватар пользователя Victor

Victor чт, 03/31/2016 - 15:07

Подскажите с решением следующей проблемы-
Установка CKEditor на Drupal 7.43
1. Установил модуль CKEditor, отсюда - https://www.drupal.org/project/ckeditor
2. Зашел на сайт http://ckeditor.com/, выбрал Add-ons, выбрал версию редактора full, потом натыкал дополнений которые там были. В оконцовке скачал.
3. Закинул скачанный CKEditor в папку - \sites\all\modules\ckeditor\ckeditor\
4. Зашел в модули и включил CKEditor.

Теперь у меня в редактировании статей сл. проблема- Панели CKEditor выводятся на экран, но все серые неактивные, не работают, на нажатие кнопкой не реагируют. Менять и создавать "Текстовые форматы" пробывал. Настройки CKEditor Global profile - %m/ckeditor

что делать не знаю.

Аватар пользователя Oleg

Oleg чт, 03/31/2016 - 21:56

Судя по описанию всё сделали правильно. В чём причина сказать затрудняюсь.

Попробуйте отдельно скачать редактор или использовать CDN и отдельно скачать плагины в папку /sites/all/modules/ckeditor/plugins

Аватар пользователя Victor

Victor вт, 04/05/2016 - 08:41

Спасибо за совет.
Ответ действительно скрывался в плагинах.
Проделанно следующее.
1. Я подключил CDN
2. На странице загрузки сборки CKEditor есть два круглых чек-бокса Optimized и Source (Big N'Slow). Если выбрать Optimized то Плагины в папку помещаются почему то без файла plugin.js (хотя по требованию самого, редактора он там должен быть) в результате Редактор попросту не видит плагинов, копирование их в папку /sites/all/modules/ckeditor/plugins результата не дает, и если сборку подключать ситуация аналогична,- плагинов невидно.
Итак чтобы плагины были видны и в сборке и CDN нужно качать Source (Big N'Slow), размер файла больше но зато работает все.
3. Проблема серых неактивных кнопок после подключения сборки с сайта CKEditor. Я в сборку включил Плагин- CSS Animations для CKEditor, и именно этот плагин блокировал работу редактора не смотря на то что последнее обновление этого плагина было буквально пару месяцев назад.
Всем спасибо за участие :)

Аватар пользователя Oleg

Oleg ср, 04/06/2016 - 09:32

Спасибо за подробное описание решения проблемы

Аватар пользователя Victor

Victor ср, 04/06/2016 - 10:18

Олег а можно вопрос не по редактору,
У меня беда, я взял за основу для создания сайта тему Basic https://www.drupal.org/project/basic. И сделал не рассчитывая на мобильные устройства, думал, что просто можно будет наехать и отъехать, в телефоне. А не тут то было. Теперь на телефоне сайт не масштабируется не подскажете, как решить данную загадку?

Аватар пользователя Victor

Victor ср, 04/06/2016 - 12:59

Вдогонку к вопросу по редактирования темы BASIC для Drupal, сам спросил и сразу сам нашел ответ, :)))).
Чтобы раблокировать масштабирование для мобильных устройств,- в папке шаблонов страниц sites\all\themes\basic\templates есть файл html.tpl.php
в нем 8-ая строчка

удаляем или комментируем. И все работает. Может кому пригодиться. :)

Аватар пользователя Oleg

Oleg ср, 04/06/2016 - 14:30

Вроде бы достаточно удалить 

 maximum-scale=1.0, user-scalable=0"

А вобще лучше на сайте иметь адаптивную тему.

Аватар пользователя Victor

Victor ср, 04/06/2016 - 15:30

Можно и так, я просто уже удалил и проверил, все ок. Но действительно можно удалить и просто эти два значения. Еще по какой-то причине не отобразился код который я вставлял в коммент выше.

Ну и если пошел диалог, еще один вопрос, на который я без подсказки не найду ответа, не критично, но сделать хочется. Для разных браузеров я прописал разный цвет фона в CSS таким методом -
background: #537A90;
background: -moz-linear-gradient(top, #60798e 100%, #60798e 100%, #60798e 100%, #60798e 100%);
background: -webkit-linear-gradient(top, #537A90 100%, #537A90 100%, #537A90 100%, #537A90 100%);
background: -o-linear-gradient(top, #537A90 100%, #537A90 100%, #537A90 100%, #537A90 100%);

Но вот для мобильного браузера это дело не подошло. Можно ли как нибудь решить этот вопрос.

Аватар пользователя Oleg

Oleg чт, 04/07/2016 - 16:28

Насколько я знаю для мобилок нет специальных префиксов. Другой цвет для мобилок можно задать использую @media с указанием типа устройства

  1. @media handheld {
  2.   body {
  3.     background: #333;
  4.   }
  5. }

или с тем же @media указывать для каких размеров применять стили

  1. @media (max-width: 860px){
  2.   /*стили для браузеров с шириной до 860px*/
  3. }

 

Аватар пользователя Victor

Victor чт, 04/07/2016 - 16:45

Низкий тебе поклон добрый человек.

Добавить комментарий