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
- Переходим на официальный сайт и скачиваем необходимый плагин, я выбрал youtube плагин.
- Копируем содержимое папки в папку с плагинами http://example.com/js/ckeditor/plugins/youtube
Кстати на странице почти любого плагина есть своя документация на английском языке, но не думаю что в этом будут сложности, все познается путем перебора разных параметров.
config.extraPlugins = 'youtube';
Обновляем страницу, а если не помогло обновляем кэш страницы и видим кнопку youtube. По аналогии подключаем и другие необходимые плагины.
Вот что у меня получилось, когда я собирал плагины для редактирования статей и уроков на этом сайте.
config.extraPlugins = 'btgrid,youtube,bootstrapTabs,bgimage,lineheight,html5video,codesnippet,collapsibleItem,tableresize,ckawesome';
Используемые плагины
btgrid- bootstrap колонкиbootstrapTabs- bootstrap табыbgimage- фоновое изображение в блокиlineheight- подключение межстрочного интервалаhtml5video- вставить видео на страницуcodesnippet- инструмент для вставки кодаcollapsibleitem- bootstrap аккардеонtableresize- редактирование размера таблицы путем движения курсора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'
};
Все материалы вы можете скачать в исходниках
