Установка pluginов в CKEditor. Установка визуального редактора CKEditor Ckeditor настройка кнопок
CKEditor 4 - WYSIWYG редактор статей. Он позволяет выполнять гибкое форматирование текстов, включающее работу со стилями, списками, ссылками, графическими изображениями и т.д.
ИнтерфейсРисунок 1. Окно редактора
В окне WYSIWYG редактора находятся следующие панели кнопок:
Переключение режима просмотра | |
Печать и выбор шаблона статьи | |
Работа с буфером обмена (вырезать, копировать, вставить, отменить) | |
Поиск и замена | |
Создание форм | |
Вставка спойлеров (сворачиваемого текста) и разрывов страниц | |
Изменение стиля текста | |
Форматирование абзацев | |
Вставка ссылок | |
Вставка медиа-контента сторонних сайтов | |
Вставка объектов | |
Выбор стиля форматирования | |
Выбор форматирования абзаца | |
Выбор шрифта | |
Выбор размера шрифта | |
Выбор цвета текста или фона | |
Проверка орфографии | |
Дополнительные возможности просмотра (отобразить блоки и развернуть) |
В нижней панели окна редактора содержится информация о текущем теге и статистика текста:
Переключение режима просмотра
В панели переключения режимов просмотра редактора находятся кнопки:
Печать и выбор шаблона статьи
В панели печати и выбора шаблона статьи находятся следующие кнопки:
Печать статьи на принтере. После нажатия на данную кнопку откроется стандартное диалоговое окно с предложением выбрать принтер и отправить на печать текст статьи. | |
Выбор шаблона статьи:
|
В редакторе доступны следующие операции по работе с буфером обмена:
Кнопка «Вырезать». Вырезает выделенный фрагмент статьи и помещает его в буфер обмена. | |
Кнопка «Копировать». Копирует выделенный фрагмент статьи и помещает его в буфер обмена. | |
Кнопка «Вставить». Вставляет в статью содержимое буфера обмена. Если текст вставляется из внешних приложений, например, MS Office, при вставке будут включены все теги, связанные с форматированием. Большая часть данных тегов является лишней и должна быть удалена, что затрудняет редактирование статьи. Поэтому данной кнопкой рекомендуется пользоваться только для вставки неформатированных текстов. | |
Кнопка «Вставить только текст». Аналогична кнопке «Вставить». При вставке фрагмента статьи из буфера обмена его форматирование полностью удаляется. | |
Кнопка «Вставить из Word». Аналогично кнопке «Вставить». Используется, если требуется сохранить форматирование вставляемого фрагмента. При вставке оптимальным образом сохраняется внешний вид текста и удаляется ненужное форматирование. Рекомендуется использовать при копировании текста из MS Word или других приложений MS Office. | |
Кнопка «Отменить». Используется для отмены последнего выполненного изменения. | |
Кнопка «Повторить». Используется для возврата последнего отмененного изменения. |
В панели поиска и замены находятся следующие кнопки:
Поиск
При нажатии на кнопку «Найти» открывается окно поиска:
В поле «Найти» вводится искомый фрагмент текста.
Доступны следующие опции:
- По всему тексту. Если опция включена, то при достижении конца статьи поиск будет продолжен с ее начала. Если опция отключена, то при достижении конца статьи поиск будет завершен.
Для выполнения поиска необходимо ввести искомый фрагмент, включить требуемые опции поиска и нажать кнопку «Найти». Редактор выполнит поиск и выделит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Найти» редактор будет выполнять поиск далее по тексту и выделять очередной найденный фрагмент.
ЗаменаПри нажатии на кнопку «Заменить» открывается окно замены фрагмента текста:
В поле «Найти» вводится искомый фрагмент текста. В поле «Заменить на» текст, на который требуется заменить искомый фрагмент.
Доступны следующие опции:
- Учитывать регистр. Если опция включена, то при поиске будет учитываться регистр символов искомого фрагмента.
- Только слово целиком. Если опция включена, то редактор будет искать введенный фрагмент как слово целиком. В результаты поиска не попадут слова, для которых введенный фрагмент является частью.
- По всему тексту. Если опция включена, то при достижении конца статьи поиск будет продолжен с ее начала. Если опция выключена, то при достижении конца статьи поиск будет завершен.
Для выполнения замены необходимо заполнить поля «Найти» и «Заменить на», включить требуемые опции поиска и нажать кнопку «Заменить» или «Заменить все». При нажатии на кнопку «Заменить» редактор выполнит поиск и заменит первый найденный фрагмент в тексте статьи. При каждом повторном нажатии на кнопку «Заменить» редактор будет выполнять поиск далее по тексту и заменять очередной найденный фрагмент.
При нажатии на кнопку «Заменить все» редактор сразу выполнит поиск и замену требуемого фрагмента по всему тексту статьи.
Формы предназначены для ввода данных пользователем в окне браузера, передаче их обработчику и, при необходимости, вывода результатов обработки. Например: форма регистрации пользователя, форма обратной связи и т.д.
В панели создания форм находятся следующие кнопки:
Кнопка «Форма». Используется для вставки формы в статью. В HTML-коде форме соответствует тег form . | |
Кнопка «Чекбокс». Используется для вставки чекбоксов (флаговых кнопкок, галочек) в форму или в статью. | |
Кнопка «Радиокнопка». Используется для вставки радиокнопок (переключателей) в форму или в статью. | |
Кнопка «Текстовое поле». Используется для вставки однострочного поля для ввода текста. | |
Кнопка «Многострочное текстовое поле». Используется для вставки многострочного поля для ввода текста. | |
Кнопка «Выпадающий список». Используется для вставки выпадающего списка. | |
Кнопка «Кнопка». Используется для вставки кнопки в форму или в статью. | |
«Кнопка-изображение». Используется для вставки изображения, используемого в качестве кнопки. | |
Кнопка «Скрытое поле». Используется для вставки скрытого поля в форму или в статью. |
При нажатии на кнопку «Форма» открывается окно настроек новой формы.
В окне настроек формы находятся следующие поля:
Имя | Произвольное имя формы. В HTML-коде – параметр name. |
Действие | URL-адрес программы или документа, который обрабатывает данные, введенные в форму. В HTML-коде – параметр action. |
Идентификатор | Уникальный идентификатор формы. В HTML-коде – параметр id. |
Кодировка | Выбор способа кодирования данных формы. В HTML-коде – параметр enctype. Доступные значения:
|
Цель | Выбор окна или фрейма, в который обработчик данных формы будет выводить результаты обработки. В HTML-коде – параметр target. Доступные значения:
|
Метод | Выбор используемого метода HTTP-запроса. В HTML-коде – параметр method. Доступные значения:
|
Чекбокс предназначен для отображения элементов управления, которые включают или выключают какое-либо свойство или опцию. Такой элемент может принимать одно из двух значений: да или нет. В 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 можно будет выбрать несколько элементов списка. Если размер списка не указан и свойство выключено, то будет отображаться выпадающий список. Если же размер списка не указан и свойство включено, то устанавливается размер списка равный четырем.
Завершение статьи следует…
Обычно WYSIWYG редактор требуется когда необходимо написать админку, в которой обычному пользователю не знающему html, будет легко и удобно добавлять собственные тексты. Так было и в моем случае.
Скачиваем CKEditor с официального сайта: скачать ckeditor
Скачиваем бесплатный файл менеджер KCFinder: скачать kcfinder
Стандартным способом интегрируем CKEditor на сайт. Добавляем на страницу скрипт ckeditor.js (в моем случае скрипт лежит в корне сайта в каталоге ckeditor). KCFinder я распаковал в папку ckeditor, просто для удобства.
Пусть на странице имеется поле textarea которое нужно заменить WYSIWYG редактором:
CKEDITOR.replace("ckeditor");
Далее нам необходимо указать настройки в ckeditor для того чтоб при нажатии на кнопку «загрузить файл» или просмотреть файлы на сервере открывался KCFinder, для этого добавляем в CKEDITOR.replace следующие настройки:
CKEDITOR.replace("ckeditor",{"filebrowserBrowseUrl":"/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":"/ckeditor/kcfinder/browse.php?type=images", "filebrowserFlashBrowseUrl":"/ckeditor/kcfinder/browse.php?type=flash", "filebrowserUploadUrl":"/ckeditor/kcfinder/upload.php?type=files", "filebrowserImageUploadUrl":"/ckeditor/kcfinder/upload.php?type=images", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"});
В каталоге /ckeditor/kcfinder/ есть скрипт с конфигурацией config.php, там необходимо указать путь к папке в которую будут загружаться добавленные файлы (не забудьте посмотреть чтоб директория была доступна для записи).
Кажется что все работает, но есть еще несколько моментов касающихся настроек форматирования кода в CKEditor, мне например не нравится что при нажатии на клавишу enter в редакторе, текст заключается в тег
Так же этот тег постоянно записывается когда пытаемся сохранить пустое поле с подключенным редактором. Чтоб это исправить добавляем небольшой скрипт:
If(typeof CKEDITOR !== "undefined") { CKEDITOR.on("instanceReady", function(ev) { // Output paragraphs as . ev.editor.dataProcessor.writer.setRules("*", { indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true }); }); }
Убрали автозаполнения тегом
Теперь уберем заключение текста в данный тег при нажатии на enter. Для этого допишем следующие настройки в файл конфигурации /ckeditor/config.js :
// при нажатии enter добавляем br config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;
Если кажется что последние две строчки кода не помогают решению проблемы, очистите кеш браузера и повторите тестирование, все должно работать. Таким образом ваш редактор CKEditor c файловым менеджером KCFinder готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.
По моему мнению, 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";
Я поделился с Вами отличным WISIWIG -редактором, который замечательно подходит для использования его на большинстве сайтов. Этот инструмент несомненно облегчает набор и редактирование текста, несведущим в html людям.
Лично для меня было достаточно сложно на просторах русского интернета найти какую-нибудь информацию по настройке этого WISIWIG -редактора, поэтому пришлось читать документацию на английском. Кстати, этот факт и сподвиг меня на написание этой заметки.
Секрет всего фокуса заключается в том, что практически все настройки сосредоточены в файле /ckeditor/config.js
. Неожиданно правда. Если Вы, как и я, используете в качестве CMS
Textpattern, то путь к файлу будет немного другой — /textpattern/ckeditor/config.js
.
По-умолчанию (без какой-либо настройки) файл выглядит так:
CKEDITOR.editorConfig = function(config) {};
Для того, чтобы настроить вывод значков на панели, нужно добавить параметр config.toolbar_Full . Для того, чтобы вывести все возможные значки, которые предлагает эта система, на панель, добавляем код:
CKEDITOR.editorConfig = function(config) { config.toolbar_Full = [ { name: "document", items: [ "Source","-","Save","NewPage","DocProps","Preview","Print","-","Templates" ] }, { name: "clipboard", items: [ "Cut","Copy","Paste","PasteText","PasteFromWord","-","Undo","Redo" ] }, { name: "editing", items: [ "Find","Replace","-","SelectAll","-","SpellChecker", "Scayt" ] }, { name: "forms", items: [ "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" ] }, "/", { name: "basicstyles", items: [ "Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat" ] }, { name: "paragraph", items: [ "NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl" ] }, { name: "links", items: [ "Link","Unlink","Anchor" ] }, { name: "insert", items: [ "Image","Flash","Table","HorizontalRule","Smiley","SpecialChar","PageBreak" ] }, "/", { name: "styles", items: [ "Styles","Format","Font","FontSize" ] }, { name: "colors", items: [ "TextColor","BGColor" ] }, { name: "tools", items: [ "Maximize", "ShowBlocks","-","About" ] } ]; };
Для того, чтобы убрать ненужные значки, необходимо вручную удалить его обозначение („Maximize“, „ShowBlocks“ и т.д.) в этом коде. Соответственно сохранив правильный синтаксис. Сложного здесь, думаю, ничего нет.
Как делаю я?Обычно для клиентского сайта я использую вот такой вид:
Я намерено убираю инструменты для форматирования текста, которые меняют вид отображения текста на сайте, такие как цвет шрифта, его гарнитура и размер, так как считаю, что этим должен заниматься web-разработчик, а не человек, который наполняет сайт. К тому же большинство людей, которые впоследствии будут работать с этим сайтом, чаще всего имеют «странный вкус», который может испортить общий вид сайта.
Для примера, такой вид интерфейса, можно настроить вот таким кодом:
CKEDITOR.editorConfig = function(config) { config.toolbar_Full = [ { name: "document", items: [ "Undo","Redo"] }, { name: "basicstyles", items: [ "Bold","Italic","Underline","Subscript","Superscript","Format" ] }, { name: "paragraph", items: [ "NumberedList","BulletedList","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock" ] }, { name: "links", items: [ "Link","Unlink" ] }, { name: "insert", items: [ "Image","Table","SpecialChar" ] }, { name: "tools", items: [ "Maximize","Source"] } ]; };
Еще раз повторюсь, если скажу, что на сегодняшний день CKE dit – это лучшая система, которую я только видел.
Рассказать в соц. сетях