Установка pluginов в CKEditor. Установка визуального редактора CKEditor Ckeditor настройка высоты

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

Работал я с двумя визуальными редакторами это Tinymce и CK Editor хоть эти два редактора достаточно популярны откровенно скажу, CK Editor мне больше понравился или верней сказать он больше подошел для моих задач. Поэтому здесь мы рассмотрим, как устанавливается именно редактор CK Editor , а я расскажу в другой раз.

Для начала как всегда нам нужно скачать редактор, можно скачать Full – пакет , или выбрать все необходимые пакеты на официальном сайте.

После завершения загрузки распаковываем скаченный архив, например, в папку libs которая находится в корне сайта. В index.html между тегами подключаем плагин редактора ckeditor.js ну и конечно библиотеку jquery .

HTML

И так, остается создать форму с тестовым полем , с которым и будет взаимодействовать наш редактор.

HTML

CKEDITOR.replace("editor1");

В целом по установке все, после загрузки страницы у Вас, в указанном текстовом поле уже должен отобразится текстовый редактор. Данный редактор можно настраивать под свой вкус менять фон рамки редактора или язык, можно задать ширину и высоту окна. Для этого используется файл config.js , который находится в папке libs/ckeditor/ config.js . В этом файле мы можем задать выше перечислимые настройки и многие другие. Подробней на официальном сайте.

Например, с помощью изменений в файле config.js , которые показаны ниже мы изменим язык, цвет рамки и высоту редактора.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.language = "en"; //язык config.uiColor = "#AADC6E"; //цвет рамки config.height = 300; //высота рамки };

Так же можно изменить вид редактора, установив в настройке config.toolbarBasic - минимум или Full - максимум функций редактора. Или же индивидуально настроить редактор с помощью настройки config.toolbar_Basic как показано в примере ниже.

В случае выбора минимальной конфигурации возможности редактора будут ограничены и будут доступны только кнопки: задать жирный текст, наклонный шрифт, списки, создать ссылку удалить ссылку ну и смайлики (пример см. ниже) .

JAVASCRIPT

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 .

JAVASCRIPT

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 будет иметь вид:

На этом у меня все, кто знает другие тонкости данного редактора, пишите в комментариях.

CKEditor 4 - WYSIWYG редактор статей. Он позволяет выполнять гибкое форматирование текстов, включающее работу со стилями, списками, ссылками, графическими изображениями и т.д.

Интерфейс

Рисунок 1. Окно редактора

В окне WYSIWYG редактора находятся следующие панели кнопок:

	Переключение режима просмотра
	Печать и выбор шаблона статьи
	Работа с буфером обмена (вырезать, копировать, вставить, отменить)
	Поиск и замена
	Создание форм
	Вставка спойлеров (сворачиваемого текста) и разрывов страниц
	Изменение стиля текста
	Форматирование абзацев
	Вставка ссылок
	Вставка медиа-контента сторонних сайтов
	Вставка объектов
	Выбор стиля форматирования
	Выбор форматирования абзаца
	Выбор шрифта
	Выбор размера шрифта
	Выбор цвета текста или фона
	Проверка орфографии
	Дополнительные возможности просмотра (отобразить блоки и развернуть)

В нижней панели окна редактора содержится информация о текущем теге и статистика текста:

Переключение режима просмотра

В панели переключения режимов просмотра редактора находятся кнопки:

Печать и выбор шаблона статьи

В панели печати и выбора шаблона статьи находятся следующие кнопки:

Печать статьи на принтере. После нажатия на данную кнопку откроется стандартное диалоговое окно с предложением выбрать принтер и отправить на печать текст статьи.

Выбор шаблона статьи: Image and Title – шаблон статьи, содержащей заголовок, изображение и текст Strange Template – шаблон статьи, текст которой разделен на две колонки Text and Table – шаблон статьи, содержащей заголовок, таблицу и текст Шаблон представляет собой предопределенный HTML-код разметки будущей статьи. Описание шаблонов содержится в файле «plugins/templates/templates/default.js». Можно добавить пользовательские шаблоны в данный файл или создать отдельный файл с шаблонами и настроить CKEditor на работу с ним.

Работа с буфером обмена

В редакторе доступны следующие операции по работе с буфером обмена:

	Кнопка «Вырезать». Вырезает выделенный фрагмент статьи и помещает его в буфер обмена.
	Кнопка «Копировать». Копирует выделенный фрагмент статьи и помещает его в буфер обмена.
	Кнопка «Вставить». Вставляет в статью содержимое буфера обмена. Если текст вставляется из внешних приложений, например, MS Office, при вставке будут включены все теги, связанные с форматированием. Большая часть данных тегов является лишней и должна быть удалена, что затрудняет редактирование статьи. Поэтому данной кнопкой рекомендуется пользоваться только для вставки неформатированных текстов.
	Кнопка «Вставить только текст». Аналогична кнопке «Вставить». При вставке фрагмента статьи из буфера обмена его форматирование полностью удаляется.
	Кнопка «Вставить из Word». Аналогично кнопке «Вставить». Используется, если требуется сохранить форматирование вставляемого фрагмента. При вставке оптимальным образом сохраняется внешний вид текста и удаляется ненужное форматирование. Рекомендуется использовать при копировании текста из MS Word или других приложений MS Office.
	Кнопка «Отменить». Используется для отмены последнего выполненного изменения.
	Кнопка «Повторить». Используется для возврата последнего отмененного изменения.

Поиск и замена

В панели поиска и замены находятся следующие кнопки:

Поиск

При нажатии на кнопку «Найти» открывается окно поиска:

В поле «Найти» вводится искомый фрагмент текста.

Доступны следующие опции:

• По всему тексту. Если опция включена, то при достижении конца статьи поиск будет продолжен с ее начала. Если опция отключена, то при достижении конца статьи поиск будет завершен.

Для выполнения поиска необходимо ввести искомый фрагмент, включить требуемые опции поиска и нажать кнопку «Найти». Редактор выполнит поиск и выделит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Найти» редактор будет выполнять поиск далее по тексту и выделять очередной найденный фрагмент.

Замена

При нажатии на кнопку «Заменить» открывается окно замены фрагмента текста:

В поле «Найти» вводится искомый фрагмент текста. В поле «Заменить на» текст, на который требуется заменить искомый фрагмент.

Доступны следующие опции:

• Учитывать регистр. Если опция включена, то при поиске будет учитываться регистр символов искомого фрагмента.
• Только слово целиком. Если опция включена, то редактор будет искать введенный фрагмент как слово целиком. В результаты поиска не попадут слова, для которых введенный фрагмент является частью.
• По всему тексту. Если опция включена, то при достижении конца статьи поиск будет продолжен с ее начала. Если опция выключена, то при достижении конца статьи поиск будет завершен.

Для выполнения замены необходимо заполнить поля «Найти» и «Заменить на», включить требуемые опции поиска и нажать кнопку «Заменить» или «Заменить все». При нажатии на кнопку «Заменить» редактор выполнит поиск и заменит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Заменить» редактор будет выполнять поиск далее по тексту и заменять очередной найденный фрагмент.
При нажатии на кнопку «Заменить все» редактор сразу выполнит поиск и замену требуемого фрагмента по всему тексту статьи.

Создание форм

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

В панели создания форм находятся следующие кнопки:

	Кнопка «Форма». Используется для вставки формы в статью. В HTML-коде форме соответствует тег form .
	Кнопка «Чекбокс». Используется для вставки чекбоксов (флаговых кнопкок, галочек) в форму или в статью.
	Кнопка «Радиокнопка». Используется для вставки радиокнопок (переключателей) в форму или в статью.
	Кнопка «Текстовое поле». Используется для вставки однострочного поля для ввода текста.
	Кнопка «Многострочное текстовое поле». Используется для вставки многострочного поля для ввода текста.
	Кнопка «Выпадающий список». Используется для вставки выпадающего списка.
	Кнопка «Кнопка». Используется для вставки кнопки в форму или в статью.
	«Кнопка-изображение». Используется для вставки изображения, используемого в качестве кнопки.
	Кнопка «Скрытое поле». Используется для вставки скрытого поля в форму или в статью.

Форма

При нажатии на кнопку «Форма» открывается окно настроек новой формы.

В окне настроек формы находятся следующие поля:

Имя	Произвольное имя формы. В HTML-коде – параметр name.
Действие	URL-адрес программы или документа, который обрабатывает данные, введенные в форму. В HTML-коде – параметр action.
Идентификатор	Уникальный идентификатор формы. В HTML-коде – параметр id.
Кодировка	Выбор способа кодирования данных формы. В HTML-коде – параметр enctype. Доступные значения: text/plain – пробелы заменяются знаком «+», буквы и другие символы не кодируются; multipart/form-data – данные не кодируются. Применяется при отправке файлов через форму; application/x-www-form-urlencoded – пробелы заменяются знаком «+», символы отличные от латинской раскладки (буквы русского алфавита и пр.) кодируются их шестнадцатеричными значениями.
Цель	Выбор окна или фрейма, в который обработчик данных формы будет выводить результаты обработки. В HTML-коде – параметр target. Доступные значения: Новое окно (_blank) – выводит результаты в новом окне браузера; Главное окно (_top) – игнорирует фреймы и выводит результаты в полном окне браузера. Если фреймов нет, то работает аналогично _self (см. ниже); Текущее окно (_self) – выводит результаты в текущее окно; Родительское окно (_parent) – выводит результаты в родительском фрейме. Если фреймов нет, то работает аналогично _self.
Метод	Выбор используемого метода HTTP-запроса. В HTML-коде – параметр method. Доступные значения: GET – для передачи данных используется URL-адрес вызываемого обработчика. Передаваемые данные отображаются в адресной строке браузера. Объем передаваемых данных ограничен максимально допустимой длиной адресной строки браузера; POST – для передачи данных используется тело запроса веб-браузера к серверу. Передаваемые данные не отображаются в браузере. Объем передаваемых данных не ограничен. Метод позволяет передавать файлы.

Чекбокс

Чекбокс предназначен для отображения элементов управления, которые включают или выключают какое-либо свойство или опцию. Такой элемент может принимать одно из двух значений: да или нет. В HTML-коде данному элементу соответствует тег input type="checkbox" . При нажатии на кнопку «Чекбокс» открывается окно настроек нового элемента.

В окне настроек элемента «Чекбокс» находятся следующие поля:

• Имя - произвольное имя элемента. В HTML-коде – параметр name;
• Значение - выполняет роль уникального идентификатора элемента. В HTML-коде – параметр value;
• Выбрано - если опция включена, то по умолчанию данный элемент будет помечен.

Радиокнопка

Элемент «Радиокнопка» предназначен для отображения группы значений с возможностью выбора только одного из них. Т.е. элементы в пределах группы являются взаимоисключающими. Каждый элемент может принимать одно из двух значений: да или нет. В HTML-коде данному элементу соответствует тег input type="radio" . При нажатии на кнопку «Радиокнопка» открывается окно настроек нового элемента.

В окне настроек элемента «Радиокнопка» находятся следующие поля:

• Элементы в пределах группы должны иметь одно и то же имя.
• Значение - выполняет роль уникального идентификатора элемента. В HTML-коде – параметр value.
• Выбрано - если опция включена, то по умолчанию данный элемент будет помечен. В пределах группы данное свойство должно быть включено только у одного элемента. Если оно включено у нескольких элементов, то помечен будет только последний из них.

Текстовое поле

Элемент «Текстовое поле» предназначен для ввода текстовой строки пользователем. В HTML-коде данному элементу соответствует тег input type="text" . При нажатии на кнопку «Текстовое поле» открывается окно настроек нового поля.

• Имя - произвольное имя элемента. В HTML-коде – параметр name.
• Значение - содержит текст, который будет отображаться в текстовом поле по умолчанию. В HTML-коде – параметр value.
• Ширина поля (в символах) - длина области ввода текстового поля в символах. В HTML-коде – параметр size.
• Макс. количество символов - максимальная длина строки, которую можно ввести в текстовое поле, в символах. В HTML-коде – параметр maxlength.
• Тип содержимого - тип содержимого текстового поля. В HTML-коде – параметр type. Перед отправкой данных на сервер выполняется их проверка на соответствие установленному типу.

Доступные типы содержимого:

• Email – текстовое поле содержит адрес электронной почты;
• Пароль – текстовое поле содержит пароль;
• Поиск – текстовое поле предназначено для ввода искомого текста;
• Номер телефона – текстовое поле содержит телефонный номер;
• Текст – текстовое поле содержит обычную строку;
• Ссылка – текстовое поле содержит URL-адрес.

Многострочное текстовое поле

Элемент «Многострочное текстовое поле» предназначен для ввода пользователем текста, состоящего из нескольких строк. В HTML-коде данному элементу соответствует парный тег textarea . При нажатии на кнопку «Многострочное текстовое поле» открывается окно настроек нового поля.

В окне настроек элемента «Текстовое поле» находятся следующие поля:

• Имя - произвольное имя элемента. В HTML-коде – параметр name.
• Колонок - ширина поля в символах. В HTML-коде – параметр cols.
• Строк - высота поля в строках. В HTML-коде – параметр rows.
• Значение - Содержит текст, который будет отображаться в текстовом поле по умолчанию.

Выпадающий список

Элемент «Выпадающий список» предназначен для отображения списка множественного выбора или выпадающего списка. В HTML-коде данному элементу соответствует парный тег select . Элементам списка соответствует парный тег option . При нажатии на кнопку «Выпадающий список» открывается окно настроек нового списка.

В окне настроек списка множественного выбора находятся следующие поля:

• Имя - произвольное имя элемента. В HTML-коде – параметр name.
• Значение - содержит значение элемента списка, который выбран по умолчанию. В HTML-коде для данного элемента в теге option устанавливается параметр selected="selected" .
• Размер - высота отображаемой области списка в строках. Если размер равен единице, то будет отображаться выпадающий список. Если размер не указан, то вид списка будет зависеть от параметра «Разрешить выбор нескольких вариантов».

Группа параметров «Доступные варианты»:

• Текст - поле ввода отображаемого текста элемента списка. Вводится в паре с полем «Значение». Для добавления пары «Текст – Значение» в список необходимо нажать кнопку «Добавить».
• Значение - поле ввода значения элемента списка, передаваемого на сервер. Вводится в паре с полем «текст». Для добавления пары «Текст – Значение» в список необходимо нажать кнопку «Добавить».
• Добавить - кнопка добавления введенной пары «Текст – Значение» в список.
• Изменить - кнопка изменения выбранного элемента списка. Для изменения необходимо выбрать требуемый элемент в настройках списка, отредактировать содержимое полей «Текст» и «Значение» и нажать кнопку «Изменить». В выбранный элемент будут внесены соответствующие изменения.
• Поднять - кнопка перемещения выбранного элемента списка на один уровень выше.
• Опустить - кнопка перемещения выбранного элемента списка на один уровень ниже.
• Пометить как выбранное - при нажатии на кнопку выбранный элемент списка становится помеченным как выбранный по умолчанию. Значение элемента отображается в поле «Значение» (см. выше). В HTML-коде для данного элемента в теге option устанавливается параметр selected="selected" .
• Удалить - кнопка удаления выбранного элемента из списка.
• Разрешить выбор нескольких вариантов - если свойство включено, то с помощью клавиши ctrl можно будет выбрать несколько элементов списка. Если размер списка не указан и свойство выключено, то будет отображаться выпадающий список. Если же размер списка не указан и свойство включено, то устанавливается размер списка равный четырем.

Завершение статьи следует…

По моему мнению, CKEditor – один из лучших wysiwyg редакторов для сайтов. Последнее время в нем появилось много зауми для упрощения жизни пользователя в итоге мешающей ему как ACF. Как его редактировать и отключать я уже . Но вернемся к теме нашей статьи как установить плагины на CKEditor.

Я вижу здесь два подхода.

Первый – заходим на сайт редактора и пересобираем CKeditor под себя, включая необходимые для нас плагины. Делается это следующим образом. Заходим на сайт ckeditor.com, переходим на вкладку download. Далее выбираем Or let me customize CKEditor

Но в данном случае отображаются не все плагины. Чтобы включить какие-то новые или особенные плагины в сборку, необходимо собирать свою сборку несколько иначе. Заходим в пункт Add-ons ->Plug-ins и видим справа следующую двигающуюся менюшку

При нажатии на кнопку add to my editor плагин добавляется в сборку. По окончании нажимаем Build my editor и заменяем наш встроенный на сайт редактор сгенерированным.

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

На сайте ckeditor.com переходим в раздел add-ons->plug-ins и нажимаем на необходимом плагине.

Выбираем Download и следуем инструкциям с сайта. В большинстве своем они либо сводятся к тому, что нужно установить зависимости к данному плагину и прописать и сам плагин в поле конфигурационного файла config.js и плагин, от которого зависит устанавливаемый через запятую, например,

Config.extraPlugins = "codemirror,youtube,imagerotate";

Download options

There are several options to download CKEditor 5 builds:

After downloading the editor jump to the Basic API guide to see how to create editors.

CDN

Builds can be loaded inside pages directly from , which is optimized for worldwide super fast content delivery. When using CDN no download is actually needed.

npm

All builds are released on npm. Use this search link to view all official build packages available in npm.

Installing a build with npm is as simple as calling one of the following commands in your project:

Npm install --save @ckeditor/ckeditor5-build-classic # Or: npm install --save @ckeditor/ckeditor5-build-inline # Or: npm install --save @ckeditor/ckeditor5-build-balloon # Or: npm install --save @ckeditor/ckeditor5-build-balloon-block # Or: npm install --save @ckeditor/ckeditor5-build-decoupled-document

CKEditor will then be available at node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js . It can also be imported directly to your code by require("@ckeditor/ckeditor5-build-") .

Zip download

Go to the and download your preferred build. For example, you may download the ckeditor5-build-classic-1.0.0.zip file for the Classic editor build.

Extract the .zip file into a dedicated directory inside your project. It is recommended to include the editor version in the directory name to ensure proper cache invalidation once a new version of CKEditor is installed.

Included files

• ckeditor.js – The ready-to-use editor bundle, containing the editor and all plugins.
• ckeditor.js.map – The source map for the editor bundle.
• translations/ – The editor UI translations (see Setting UI language).
• README.md and LICENSE.md

Loading the API

After downloading and installing a CKEditor 5 build in your application, it is time to make the editor API available in your pages. For that purpose, it is enough to load the API entry point script:

Once the CKEditor script is loaded, you can

→ WYSIWYG CKeditor

Наверняка многие разработчики как минимум слышали о существовании HTML - редакторов, встраиваемых в веб страницы. Хочу представить Вам пожалуй самый продвинутый на сегодняшний день WYSIWYG . Для непосвященных опишу в двух словах о чем идет речь. Если Вы или Ваши клиенты хотите своими руками редактировать контент сайта, а познавать основы html нет времени или желания - то Ckeditor то что нужно.

Ранее продукт назывался FCKeditor , но из-за нездоровых ассоциаций у англичан связанных с аббревиатурой FCK (создатель проекта Frederico Calderia Knabben ), редактор был переименован в Ckeditor . Кроме названия в новой версии исчезли api для работы с файлами на perl и python , по крайней мере в бесплатном дистрибутиве. Разработчики предлагают несколько тарифных планов по поддержке и возможно на этих условиях вам предоставят не только их. На данный момент по умолчанию есть asp и php . Я же в своей работе использую perl и буду писать интерфейс сам. Позже выложу. А в целом проект имеет плагинную архитектуру, которой довольно легко управлять если разбираетесь в JS .

Скачать WYSIWYG ckeditor можно здесь или на сайте www.ckeditor.com .

Так он собственно выглядит. Правда я вам представил немного урезанную версию, но от полного комплекта почти не отличается.

Подключение и настройка ckeditor Подключение по умолчанию

Подключается и настраивается ckeditor очень легко.

1 . Скачиваем ckeditor и распаковываем в корень сайта, CMS или другой системы. Разработчики не рекомендуют начинающим программистам переименовывать каталоги и файлы во избежание конфликтов в редакторе. Если все оставить как есть то запуск по умолчанию - минутное дело.

2 .В коде страницы грузим основной код и вставляем элемент textarea . Причем элементов textarea может быть несколько, главное им назначить разные идентификаторы.

3 .Инициализация на Ваш вкус, но лучше делать после того как объектная модель документа будет готова.

Для Jquery :

$.noConflict(); jQuery(document).ready(function($) { CKEDITOR.replace("textID",{}); });

Для Ext JS :

Ext.onReady(CKEDITOR.replace("textID",{}));

Древний способ:

Или непосредственно перед закрывающим тегом

CKEDITOR.replace("textID",{});

Дополнительная настройка

Для изменения настроек по умолчанию в ckeditor предусмотрен некоторого рода конфигурационный файл config.js , который лежит по адресу /ckeditor/config.js . Он содержит в себе настроечный хеш.

Вот пример того который используется для демо версии на данной странице:

CKEDITOR.editorConfig = function(config) { config.skin = "kama"; config.uiColor = "#E0E0E0"; config.language = "ru"; config.fullPage = false; config.height = 200; config.removePlugins = "resize,about,save"; };

config.skin - интерфейс. Возможны три варианта: kama , v2 , office2003 . По умолчанию kama .

config.uiColor - цвет интерфейса. Работает только для kama .

config.language - Язык интерфейса.

config.fullPage - оплетка для редактируемого документа. Если установлено true то редактируемая область будет содержать полноценный html документ, если false - только контент.

config.height - высота редактируемой области в пикселах. Аналогично для ширины.

config.removePlugins - Список кнопок (плагинов), которые нужно отключить. Например: resize - это благодаря которой область редактора можно растянуть как угодно, удерживая мышью нижний правый угол, save - кнопка сохранить.