Вы здесь

Как я настраивал CKEditor…

На своем сайте использовал BUEditor – простой удобный редактор, но для пользователей он не очень удобен. Часто думал поставить CKEditor, но он мне казался каким-то монстром, но на деле все оказалось не так страшно.

Как установить модуль читаем тут.

UPD: На странице http://ckeditor.com/builder можно выбрать только те плагины и скины, которые вам нужны, и тогда некоторые из нижеперечисленных действий можно не производить.

1. Первым делом отключил низ редактора

config.removePlugins = 'elementspath';
config.resize_enabled = false;

Это прописываем в настройках модуля на странице admin/config/content/ckeditor/edit/назнание_профиля во вкладке ДОПОЛНИТЕЛЬНЫЕ НАСТРОЙКИ или в файле config.js

2. В связи с отключением низа редактора, у нас пропала возможность растягивания текстовой области. Установим плагин автоматического ресайза Auto Grow (при использовании BUEditor’а пользовался плагином Textarea autoresize). Скачиваем, распаковываем архив в sites/all/libraries/ckeditor/plugins. Подключаем (см. п.1) :

config.extraPlugins = 'autogrow';

Если необходимо подключить несколько плагинов, то перечисляем их через запятую

config.extraPlugins = 'myplugin,anotherplugin';

Так же плагин можно подключить через свой модуль, подробнее об этом здесь.

После подключения через свой модуль, на странице admin/config/content/ckeditor/edit/назнание_профиля во вкладке ВНЕШНИЙ ВИД РЕДАКТОРА, в разделе Плагины появится чекбокс активации. Включаем, сохраняем, проверяем.

3. Вставка ссылок. Из коробки диалоговое окно вставки ссылок содержит кучу не нужного и не понятного. Заменяем его плагином Simple link. Как устанавить, смотрим в п.2 . Подключаем (см. п.1) :

config.extraPlugins = 'SimpleLink';

Так же появится новая иконка(кнопка) плагина.

4. Вставка изображений. Здесь все тоже самое, что и ссылками, можно поставить плагин Simple Image для вставки изображений по ссылке.

config.extraPlugins = 'SimpleImage';

Или загружать изображения с помощью модуля One Click Upload.. Подробнее читаем тут. Я остановился на втором способе, хотя в BUEditor’е использовал оба.

Единственное что хочу добавить, плагин Enhanced Image требует еще два плагина Widget и Lineutils.

не мог понять, почему не запускается плагин, пока не заглянул в журнал

5. Внешний вид. По умолчанию используется скин Moono, я же хотел привести внешность к виду BUEditor’а.

так выглядел BUEditor

Для этого создаем свой скин (я взял за основу Office 2013). Переименовываем и загружаем в папку sites/all/libraries/ckeditor/skins, после чего включаем его по адресу admin/config/content/ckeditor/editg. Вооружившись Firebug'ом правим CSS нашего скина.

В итоге вот что получилось

UPD

6. Как написал SAM редактор по умолчанию вырезает классы и ID. Для того, чтобы этого не происходило прописываем в конфиге (см. п.1)

config.allowedContent = true;

Подробнее тут

7. Placeholder. Чтобы добать placeholder устанавливаем плагин (см. п.2) Configuration Helper. Подключаем (см. п.1) :

config.extraPlugins = 'confighelper'; 
config.placeholder = 'Наш текст'; // текст нашего placeholder

Подробнее тут и тут(+демо)

8. Смайлы. За смайлы в CKEditor'e отвечает плагин Insert Smiley , он в ходит в стандартный пакет - Full Package.

Так выгледят смайлы из коробки:

Чтобы заменить их на свои необходимо в конфиге(см. п.1) указать путь до папки с изображениями smiley_path:

config.smiley_path = '/sites/default/files/smileys/';

Прописать имена файлов (изображений), которые будут отображаться smiley_images:

config.smiley_images = ['smile_1.png','smile_2.png'];

И description (описание при наведении) smiley_descriptions

config.smiley_descriptions = ['description-1', 'description-2'];

Так же можно указат во сколько колонок выводить смайлы (по умолчанию: 8) smiley_columns

config.smiley_columns = 6;

Вот что у меня получилось

9. Проверка орфографии браузером. Как написал UksusoFF в CKEditor'е отключена браузерная проверка орфографии. Для того, чтобы отключить это отключение (немного тавтологии), необходимо прописать в конфиге:

config.disableNativeSpellChecker = false;

Подробнее можно прочитать тут

10. Контекстное меню. В CKEditor'е, при нажатии ПКМ открывается контекстное меню, а не нативное меню браузера

Чтобы его отключить, прописываем в конфиге:

config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';

смотри

9
18
24.08.2015 - 00:01

Комментарии

Аватар пользователя Evgeniy Muhamedjanov
Евгений – 24.08.2015 - 00:31

Зачем config.extraPlugins = '...'; ?
В админке галочка появляется для каждого плагина.
Или я что-то напутал?

Аватар пользователя chimir
chimir – 24.08.2015 - 01:05

Да, вы правы, поправил

Аватар пользователя UksusoFF
UksusoFF – 24.08.2015 - 07:30

Если собрать их билдером, то нифига галочка не появляется.

Аватар пользователя Evgeniy Muhamedjanov
Евгений – 24.08.2015 - 11:08

Вы имеете в виду, собрать билдером сам CKEditor на их сайте, а потом готовую сборку в друпал?

Аватар пользователя UksusoFF
UksusoFF – 25.08.2015 - 19:14

Именно это.

Аватар пользователя chimir
chimir – 25.08.2015 - 20:41

поэксперементировав пришел к тому, что

в админке галочка появляется для каждого плагина.

если плагин залить папку модуля sites/all/modules/ckeditor/plugins, если заливать sites/all/libraries/ckeditor/plugins - то надо подключать через конфиг

Аватар пользователя UksusoFF
UksusoFF – 25.08.2015 - 22:14

Вообще-то путь к папке с плагинами можно указать в глобальном профиле: admin/config/content/ckeditor/editg

Аватар пользователя chimir
chimir – 25.08.2015 - 23:15

О, тогда они появляются автоматически

Аватар пользователя krucho
krucho – 21.11.2015 - 14:53

А можно подробнее описать, как это сделать?

Аватар пользователя UksusoFF
UksusoFF – 24.08.2015 - 10:12

Меня еще очень сильно раздражало что в нем проверка орфографии браузерная не работает.
Чтобы оно заработала можно в тот же конфиг добавить:

config.disableNativeSpellChecker = false;
Аватар пользователя chimir
chimir – 24.08.2015 - 19:49

Это же есть в настройках модуля, или это не оно?

Аватар пользователя SAM
SAM – 24.08.2015 - 16:38

chimir, может добавить в статью список более менее нужных настроек конфига?
Вот допустим настройка НЕ вырезания классов и ID при вставке, очень полезная штука.

Аватар пользователя chimir
chimir – 24.08.2015 - 19:47

Я только знакомлюсь с этим редактором, и даже не знал о такой его особенности, спасибо, что рассказали. Добавил.

P.S. у меня CKEditor для пользователей, а им вставлять классы без надобности, поэтому и незадовался таким вопросом

P.P.S. Если есть еще какие-то полезные настройки CKEditor'а, то рад буду узнать и добавить

Аватар пользователя UksusoFF
UksusoFF – 25.08.2015 - 19:14

Особенно при использовании FontAwesome и т.д.

Аватар пользователя Sipth
Sipth – 09.09.2015 - 22:54

Каким образом во вставке изображений при использовании Simple Image или One Click Upload настроить:
1) возможность выбора выравнивания относительно текста
2) использование настроенных стилей изображения (там настроены размеры и вотермарки)

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

Аватар пользователя Niklan
Niklan – 01.12.2015 - 19:59

AutoGrow, к слову, включается прямо в настройках редактора без необходимости подключения его как плагин ;) И качать не надо, просто поставить галочку.
Editor appearance -> Plugins -> Auto Grow

Аватар пользователя andreystrelkov
andreystrelkov – 30.06.2016 - 10:11

Удивительно, не могу подключить плагин SimpleLink, копировал в libraries подключал через поле дополнительные настройки в типе текстового формата - ничего не появляется, копировал в modules ставил галочку по плагину, тоже ничего не появилось нового

подскажите, у кого работает, появляется новая иконка и каким образом вы этого добились