Установка и настройка CKEditor в Drupal 7

Настраиваем CKEditor, чтобы редакторы не пачкали разметку.

07.12.2013
13 комментариев
3 мин.

В Drupal ниже 8 версии (которая скоро выйдет в бету), по-умолчанию нету никаких WYSIWYG редакторов, что как бы заставляет новичка впасть в недоумение. Разумеется народ ищет модули с редакторами, и почему-то, чаще всего попадают на модуль wysiwyg, но он уныл, реально, ввиду того что он поддерживает 100500 редакторов, он работает черт пойми как. Сколько я его пробовал, никак не могу с ним ничего толкового сделать. Да и куда вам 100500 редакторов текста?

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

Установка CKEditor

  1. Заходим на сайт CKEditor выбираем “Full version” и качаем архив.
  2. На ftp сайта заходим в /sites/all/libraries (если последней нету, просто создайте) и скидываем туда нашу папку ckeditor из архива.
  3. Скачиваем, устанавливаем и включаем модуль CKEditor.

Настраиваем CKEditor для Filtered HTML

  1. В админке заходим: admin/config/content/ckeditor и жмем “Edit” у Advanced.
  2. В “Basic setup” должен быть выбран “Filtered HTML” или иной, который используется у вас для ввода с ограничением по тегам.
  3. Переходим в “Editor Appearance” и в разделе toolbar жмем “basic”. Это поставит нам базовый набор элементов.
Basic CKEditor
  1. Сохраняем.

Для фула я не буду писать, по сути тоже самое, только очевидные изменения будут в пункте №3.

Там куча, уйма настроек: цвет редактора, оформление (замена css) и многое-многое другое. Я же остановлюсь на очень любопытной опции про HTML.

Настройка CKEditor для контент-менеджера

Контент — неотъемлемая составляющая сайта. Им можно сделать из сайта конфетку, даже если сам сайт не очень, и наоборот, если сайт конфетка, сделан профи, то его легко можно превратить в говно одним лишь контентом, что обычно и делают владельцы сайтов или нанятые ими контент-менеджеры.

Контент-менеджер — головная боль для разработчиков, и “вирус” для сайта.

В общем ад начинается когда неопытные контент-менеджеры начинают копировать текст из документа и в тупую вставлять в редактор, а затем сейв, они то думают так: “Вроде как и в ворде”.

А то что там идет целый букет таких вот вещей:

Плохой результат.

Инлайн стили, классы, обертки, шрифты намертво прописаны. А гнать то будут на разработчиков, как обычно… Тип а что у нас шрифты во всех статьях разные, а что эти шрифты у меня работают а у друга нет (когда в ворде заюзали нестандартный для систем шрифт) и т.д., я думаю многие это ощутили на себе.

И объяснить им что это ваш тупой контент-менеджер, который нихера не умеет и не может, наполняющий для галочки чтобы срубить бабло, бесполезно. Ведь порой это их знакомые или родственники, а они всегда профи, а как иначе.

В общем я считаю что нормальный контент-менеджер должен эту грязь вычищать самолично и руками, отлично знать HTML и тогда всё будет в порядке, но такие — настоящая находка, поэтому я сейчас расскажу как рубил руки идиотам.

Для подобных неучей я создаю отдельный формат ввода, поэтому давайте и мы его создадим:

  1. Переходим на страницу создания нового формата: admin/config/content/formats/add
  2. Называем, например: Редактирование содержимого (content_editing)
  3. Даём права кому нужно. У меня, как правило, контент-менеджер это целая роль с запретами на всё что их руки зачешутся сломать.
  4. По сути они часто юзают вставку картинок и прочего, поэтому рубить им html нельзя. Единственные фильтры что я включаю: 1. Convert line breaks into HTML (i.e. <br> and <p>)
  5. Convert URLs into links
  6. Correct faulty and chopped off HTML

Всё, дальше бремя мы скинем на CKEditor.

  1. Заходим в настройки CKEditor: admin/config/content/ckeditor
  2. Создаем новый профиль.
  3. В “Basic setup” даём ему соответствующее название и выбираем созданный нами формат ввода.
Setup
  1. Переходим во вкладку “Editor Appereacne” и загружаем “Basic” (им опасно давать что-то больше этого).
  2. В разделе “Cleanup and output” надо подправить “Font formats” — это те теги, что они смогут выбирать в качестве стиля, я делаю так: p;h2;h3;h4;h5;h6 — т.е. убираем div, address, pre и h1. Иначе они и ими нагадят. Я считаю что больше для текста ничего им давать не нужно. Основные заголовки и параграф — всё.

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

Good

Я и сам пользуюсь таким редактором, ведь это удобно. Просто для себя я еще выношу кнопочку “Источник” чтобы я мог напрямую править html, по необходимости.

Для особо одаренных

Бывают такие что и в таком варианте умудряются запоганить, поэтому в настройках CKEditor в разделе “Advanced options” включим “Force pasting as plain text” — т.е. что бы вы не вставляли в данный редактор, он его перегонит в обычный текст. Весь CSS, теги, вообще всё вырубается на корню. Пусть контент-менеджер поработает и поправит руками, зато код будет чистый. А там править то смехота.

Drupal
Drupal 7
CKEditor

Комментарии

Plazik   пн, 09/12/2013 - 08:47

Почему такая нелюбовь к wysiwyg? Нормальный модуль, пользуюсь им уже 3 года. В dev версии поддерживает CKEditor 4ый версии.

Niklan   пн, 09/12/2013 - 10:38

Вы сами и ответили на свой вопрос. Чтобы пользоваться последними версиями редакторов надо ставить дев, которые ни в коем случае нельзя ставить клиенту, чуть какая дыра, вы самолично вызовитесь всем всё проапгредить?

А также, зачем такой зоопарк редакторов на сайте? Должен быть один единственный. Не нужен CKEditor -- ставим другой, но ставить модуль который поддерживает 100500 редакторов а использовать 1 -- глупо. Это всё равно что юзать вьюс, чтобы создать блок и в нем вывести обычный, статический текст.

Да и как клиенту объяснять, что тут такой редактор, тут вот такой, а там и вовсе третий. Да ну нафиг. Я недавно сайт отдал людям, так они с облегчением вздохнули что все материалы на сайте добавляются по одному принципу, форма добавления универсальная только появляются соответствующие поля.

Игорь   чт, 11/09/2014 - 00:02

Спасибо. все доходчиво написано.
ставил перед этим wysiwyg. Это просто корявый выкидыш.

Игорь Викторович   сб, 11/10/2014 - 07:11

Мне бы поставить CKEditor на простой хтмл сайт, сможете помочь?
Если да, напишите на igor888@list.ru cnjbcjvnm стоимость установки

Александр   чт, 16/10/2014 - 01:26

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

Jack   вс, 01/02/2015 - 20:17

У меня при установке получается ошибка, сайт вообще не открывается пока не удалю все папки с Едитором.
И что мне с этим делать? Друпал 7. + есть Визивиг.

Niklan   вс, 01/02/2015 - 21:21

Какая-то функция не отрабатывает, а точнее она отсутствует. Надо логи сервера смотреть. Там будет указана отсутствующая функция.

Тарас   вт, 07/04/2015 - 22:27

Помогите, пожалуйста. Есть простой вроде бы вопрос, но не могу найти ответ. У меня есть базовые знания HTML CSS и желание зделать красивый контент, а не просто изображение + текст, причем дизайн адаптивный и все это должно сжиматься и растягиваться так как положено. Установлена ваша сборка в ней есть CKEditor И вот вопрос где прописывать стили? Прямо в редакторе указывать теги и стили? Или в редакторе присваивать класы, а стили приписывать в style.css? Просто все гайды по созданию страниц заканчиваються нажатием кнопки "создать страницу". Заранее спасибо.

Лана   пт, 15/05/2015 - 08:50

Подскажите как добаввить в Full HTML дополнительные кнопки? Например, выравнивание текста по центру?
Спасибо заранее.

Дима   вт, 11/08/2015 - 03:15

Здравствуйте. Не могу понять, зачем устанавливать модуль а потом ещё и кидать в лайбрари обычную версию редактора. Обычно в лайбрари закидывают если используют визивиг. Поясните пожалуйста.

silrage   чт, 27/08/2015 - 11:52

Здравствуйте! Вы случайно, не в курсе каким образом бинтовать CKEditor на событие клика? То есть, кликаем на кнопку и фокус падает на окно данного редактора.

Niklan   вт, 05/06/2018 - 18:58

А поконкретнее? Я просто уже давно особо CKeditor не настриваю. На Drupal 8 он итак максимально чисто всё из коробки поддерживает. Что именно смущает?

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

Поддерживает синтаксис CommonMark.