Наверх

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

Опубликовано:
7254
1 2 3 4 5
(97.5%) / 8

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'
};

Все материалы вы можете скачать в исходниках

Дорогой web-мастер.
Для меня очень важна обратная связь от Вас в виде лайков или рейтинга.
Пожалуйста оцените эту публикацию или поставь лайк за старание.
Статья подготовлена для Вас сайтом kisameev.ru
Перевел: Кисамеев Дмитрий
Статью просмотрели: 7254
Понравилось:
Поделится ссылкой
Иван
Как реализовать дополнительные функции?


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


Список функций:
1. изменить расстояние между текстовыми строками;
2. Вставка текста со ссылкой на источник;
Пример сценария:
       - Я копирую текст из браузера в буфер обмена;
- Я вставляю текст из буфера обмена в текстовый редактор;
- Текст вставлен и внизу текста автоматически вставляется строка «источник» с гиперссылкой на страницу, откуда я скопировал текст:
Пример строки:
"источник - https://kisameev.ru/javascript/nastroyka-ckeditor-pod-sebya---podklyuchenie-plaginov"
3. Вставка изображения в текст из буфера обмена;
4. Вставка изображения в текст, используя метод Drag-and-Drop с локального диска;
5. Вставка файла ниже в текст с помощью метода Drag-and-drop с локального диска (или другие инетррпритации этой функции);

6. Вставка спойлеров;
Пример: https://ibb.co/j3VwcH
[SPOILER] [/SPOILER]
7. Возможность сохранения настроек редактора;
8. Как правильно вставить "iframe"?;
Делаю как на скрине.
Не рабтоает.
Скрин настроек - http://prntscr.com/j3dmhv


Я начинающий программист, поэтому извиняюсь, если мои вопросы неверны.
Дмитрий Кисамеев
Добрый день, все дополнительные плагины на оф. странице редактора https://ckeditor.com/cke4/addons/plugins/all
Суть:
1. скачиваете нужный плагин
2. Закачиваете на сервер в папку /ckeditor/plugins/
3.Добавляете свой плагин в эту строку через запятую
config.extraPlugins = "btgrid,youtube,bootstrapTabs,bgimage,lineheight,html5video,codesnippet,collapsibleItem,tableresize,ckawesome"

Обратите внимания некоторые плагины связаны с другими. Это можно увидеть в самом низу в строке Add-on dependencies когда скачиваете плагин
иван
дмитрий, пожалуйста поправьте стили коментариев. они очень кривые.
посмотрите свой сайт в других браузерах. у меня опера, вивальди, мозила - видно проблему.
успеха.

Для вставки кода используйте комментарии от ВК или FB:

Похожие публикации

В этой статье я расскажу Вам, как за 2 простых шага настроить автоматическую транслитерацию загружаемых файлов в CKFinder русских символов...

Нашли баг или ошибку?

Выдели текст
мышкой и нажми:
Нашел ошибку