Настройка CKEditor под себя — подключение плагинов

Ckeditor довольно хороший визуальный инструмент для редактирование контента на Вашем сайте, но его стандартные функции не всегда удовлетворяют потребности концепции сайта. Настройка подразумевает в себя подключение плагинов, дополнительных css, удаление не нужных кнопок на панели CKeditor, а так же внедрение bootstrap компонентов.

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

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

Вот такую панель в итоге мы получим

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

Установка CKeditor

Скачиваем ckeditor с официального сайта (полная версия).

Подключаем редактор на страницу.

<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>

Разметим html страницу:

<textarea id="editor"></textarea>

Код javascript:

var editor = CKEDITOR.replace('editor',{height: 500});
AjexFileManager.init({returnTo: 'ckeditor', editor: editor});

Итак, мы поставили самый стандартный полный пакет функций от CKEditor, теперь приступим к его настройке. Переходим к файлу config.js, который находится в папке /js/ckeditor/config.js

Открываем и видим:

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
};

Вот сюда и будем подключать наши дополнительные плагины.

Настройка CKEditor

Подключение плагинов в CKEditor

1. Переходим на официальный сайт и скачиваем необходимый плагин, я выбрал youtube плагин.
2. Копируем содержимое папки в папку с плагинами http://example.com/js/ckeditor/plugins/youtube

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

config.extraPlugins = 'youtube';

Обновляем страницу, а если не помогло обновляем кэш страницы и видим кнопку youtube. По аналогии подключаем и другие необходимые плагины. 

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

config.extraPlugins = 'btgrid,youtube,bootstrapTabs,bgimage,lineheight,html5video,codesnippet,collapsibleItem,tableresize,ckawesome';

Используемые плагины

1. btgrid — bootstrap колонки
2. bootstrapTabs — bootstrap табы
3. bgimage — фоновое изображение в блоки
4. lineheight — подключение межстрочного интервала
5. html5video — вставить видео на страницу
6. codesnippet — инструмент для вставки кода
7. collapsibleitem — bootstrap аккардеон
8. tableresize — редактирование размера таблицы путем движения курсора
9. ckawesome — подключение иконок

Удаление ненужных кнопок из CKEditor

Некоторые плагины почти ни когда не используются, давайте займемся отключением ненужных плагинов такие как: О CKEditor, Сохранить, Новая страница, Печать, Шаблоны, Flash, Смайлики, Поиск.

Я ими ни когда не пользуюсь, по этому считаю что их можно отключить из панели редактора. 

config.removePlugins = 'spellchecker, about, save, newpage, print, templates, scayt, flash, pagebreak, smiley,preview,find'

Подключение загрузки изображений и файлов

<script type="text/javascript" src="js/AjexFileManager/ajex.js"></script>

Разметим html:

var editor = CKEDITOR.replace('editor',{height: 500});
AjexFileManager.init({returnTo: 'ckeditor', editor: editor});

Подключение CSS в CKEditor

Обратите внимание:
Когда мы работаем в редакторе, то стиль написания контента берется от ckeditor. Он различается от общего стиля сайта, это выражается во многом, например: межстрочный интервал разный, размера шрифта отличаются друг от друга, стиль тегов h1, h2, h3 другой и это заметно во многих других мелочах. Давайте подключим свои стили сайта. 

Подключаем 2 CSS файла, bootstrap.css и styles.css

config.contentsCss = ["/css/bootstrap.css", "/css/styles.css"];

Теперь редактор работает с нашими css файлами. 

Подключение пользовательских классов

Бывалые пользователи заметили, ckeditor удаляет пользовательские классы, необходимо указать редактору, что бы он больше не отчищал наш код.

config.indentClasses = ["ul-grey", "ul-red", "text-red", "ul-content-red", "circle", "style-none", "decimal", "paragraph-portfolio-top", "ul-portfolio-top", "url-portfolio-top", "text-grey"];

Разрешить теги <script>

config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);

Разрешить тег <style>

config.protectedSource.push(/<(style)[^>]*>.*<\/style>/ig);

Итог

В конце всех настроек у меня получился во такой config.js

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.indentClasses = ["ul-grey", "ul-red", "text-red", "ul-content-red", "circle", "style-none", "decimal", "paragraph-portfolio-top", "ul-portfolio-top", "url-portfolio-top", "text-grey"];
	//config.contentsCss = ["/css/bootstrap.css", "/css/styles.css"];
	config.contentsCss = ["/css/styles.css"];
	customConfig: '/js/bootstrap.min.js';
	config.bodyClass = 'mystyle';
	config.protectedSource.push(/<(style)[^>]*>.*<\/style>/ig);
	config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);// разрешить теги <script>
	config.protectedSource.push(/<(i)[^>]*>.*<\/i>/ig);// разрешить теги <i>
	config.protectedSource.push(/<\?[\s\S]*?\?>/g);// разрешить php-код
	config.protectedSource.push(/<!--dev-->[\s\S]*<!--\/dev-->/g);
	config.allowedContent = true;
	config.disableNativeSpellChecker = false;
	config.extraPlugins = 'btgrid,youtube,bootstrapTabs,bgimage,lineheight,html5video,codesnippet,collapsibleItem,tableresize,ckawesome';
	config.fontawesomePath = '/js/ckeditor/plugins/fontawesome/font-awesome/css/font-awesome.min.css';
	config.codeSnippet_languages = {
    javascript: 'JavaScript',
    php: 'PHP',
		html: 'HTML',
		css: 'CSS',
		mysql: 'MYSQL'
	};	
	config.removePlugins = 'contextmenu, spellchecker, about, save, newpage, print, templates, scayt, flash, pagebreak, smiley,preview,find'
};