В данной статье будет показан способ установки визуального редактора себе на сайт. Такой редактор очень удобен для добавления и/или редактирования новой информации для сайта. Например, установка на форуме, в блоке с комментариями, что облегчает и расширяет возможности редактирование текста нового комментария, т.е. можно выделить текст, подчеркнуть его, вставить ссылку да и многое другое, все зависит от того сколько доступа вы дадите своему читателю. Ну и, конечно же, что нельзя забывать так это про админскую часть, которая существенно может облегчить Ваши труды при добавлении и редактировании материала.
Работал я с двумя визуальными редакторами это Tinymce и CK Editor хоть эти два редактора достаточно популярны откровенно скажу, CK Editor мне больше понравился или верней сказать он больше подошел для моих задач. Поэтому здесь мы рассмотрим, как устанавливается именно редактор CK Editor , а как установить Tinymce я расскажу в другой раз.
Для начала как всегда нам нужно скачать редактор, можно скачать Full– пакет здесь , или выбрать все необходимые пакеты на официальном сайте.
После завершения загрузки распаковываем скаченный архив, например, в папку libs которая находится в корне сайта. В index.html между тегами <head> </head> подключаем плагин редактора ckeditor.js ну и конечно библиотеку jquery.
<script src="libs/jquery/jquery-1.11.2.min.js"> </script> <script type="text/javascript" src="libs/ckeditor/ckeditor.js"> </script>
И так, остается создать форму с тестовым полем <textarea></textarea> , с которым и будет взаимодействовать наш редактор.
В целом по установке все, после загрузки страницы у Вас, в указанном текстовом поле <textarea> </textarea> уже должен отобразится текстовый редактор. Данный редактор можно настраивать под свой вкус менять фон рамки редактора или язык, можно задать ширину и высоту окна. Для этого используется файл config.js, который находится в папке libs/ckeditor/ config.js. В этом файле мы можем задать выше перечислимые настройки и многие другие. Подробней на официальном сайте.
Например, с помощью изменений в файле config.js, которые показаны ниже мы изменим язык, цвет рамки и высоту редактора.
CKEDITOR.editorConfig = function( config ) {
config.language = 'en'; //язык
config.uiColor = '#AADC6E'; //цвет рамки
config.height = 300; //высота рамки
};
Так же можно изменить вид редактора, установив в настройке config.toolbarBasic - минимум или Full - максимум функций редактора. Или же индивидуально настроить редактор с помощью настройки config.toolbar_Basic как показано в примере ниже.
В случае выбора минимальной конфигурации возможности редактора будут ограничены и будут доступны только кнопки: задать жирный текст, наклонный шрифт, списки, создать ссылку удалить ссылку ну и смайлики (пример см. ниже).
CKEDITOR.editorConfig = function( config ) {
config.width = 1050; //ширина окна редактора
config.toolbar = 'Basic'; //функциональность редактора, Basic-минимум, Full-максимум
config.toolbar_Basic = //индивидуальная настройка режима Basic
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','Smiley']
];
};
Есть возможность группировать кнопки по группам, и снова для этого нужен файл config.js.
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
};
В целом основные настройки текстового редактора показаны, одно что, мне не понравилось это размер этого редактора, после закачки он весит 4м 265кб что как то многовато. Если Вас так же это напрягает, то можно удалить каталог samples а так же почистить каталог с языками так как она и весит больше всех. В ней очень много языков, которые не используются, поэтому попросту можно их удалить и оставить только те, что нужны, например русский и английский.
Заходим в каталог libs/ckeditor/lang и тут удаляем все файлы кроме нужного для вас языка, например, оставляем: ru.js и en.js. После всех проделанных манипуляций размер уменьшится вдвое, а каталог ckeditor будет иметь вид:
На этом у меня все, кто знает другие тонкости данного редактора, пишите в комментариях.
CSS
Тигран, 2018-04-10
# 27
Спасибо