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.
CDNBuilds can be loaded inside pages directly from , which is optimized for worldwide super fast content delivery. When using CDN no download is actually needed.
npmAll 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 downloadGo 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 filesAfter 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
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-коде данному элементу соответствует тег input type="radio" . При нажатии на кнопку «Радиокнопка» открывается окно настроек нового элемента.
В окне настроек элемента «Радиокнопка» находятся следующие поля:
Элемент «Текстовое поле» предназначен для ввода текстовой строки пользователем. В HTML-коде данному элементу соответствует тег input type="text" . При нажатии на кнопку «Текстовое поле» открывается окно настроек нового поля.
Доступные типы содержимого:
Элемент «Многострочное текстовое поле» предназначен для ввода пользователем текста, состоящего из нескольких строк. В HTML-коде данному элементу соответствует парный тег textarea . При нажатии на кнопку «Многострочное текстовое поле» открывается окно настроек нового поля.
В окне настроек элемента «Текстовое поле» находятся следующие поля:
Элемент «Выпадающий список» предназначен для отображения списка множественного выбора или выпадающего списка. В HTML-коде данному элементу соответствует парный тег select . Элементам списка соответствует парный тег option . При нажатии на кнопку «Выпадающий список» открывается окно настроек нового списка.
В окне настроек списка множественного выбора находятся следующие поля:
Группа параметров «Доступные варианты»:
Завершение статьи следует…
Я поделился с Вами отличным 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 – это лучшая система, которую я только видел.
Рассказать в соц. сетях
Сегодня разберемся, как интегрировать и настроить очень популярный редактор контента CKEditor в стандартное приложение ASP.NET MVC. Также установим и настроим не менее популярный менеджер файлов CKFinder.Официальная страница разработчика: https://ckeditor.com/
CKEditor - это очень популярный на сегодняшний день визуальный WYSIWYG редактор HTML-содержимого.
CKFinder - это менеджер файлов, который позволяет получить доступ к файловой системе на сервере и управлять файлами из браузера клиента.
Обычно оба этих компонента идут в связке, то есть менеджер файлов интегрируется в редактор.
CKEditor представлен в двух версиях. Версия 4 как более ранняя и, соответственно, более распространенная. И версия 5, новая, реализующая модульную архитектуру, с множеством нововведений.
Настройка CKEditorЯ в своих проектах использую 4-ую версию, ее функционала вполне хватает для решения любых задач. Скачаем архив с редактором и добавим его себе в проект.
Добавить CKEditor очень просто. Это происходит в несколько этапов:
} document.addEventListener("DOMContentLoaded", function (event) { var editor = CKEDITOR.replace("content1"); });
Все готово! В приведенном выше примере CKEditor подключается к текстовой области "content1" внутри HTML-формы. Далее содержимое этого поля будет отправлено на сервер.
Стоит отметить, что для CKEditor существует множество плагинов, который расширяют его стандартный функционал. Также плагины можно писать самому (более подробно этот процесс описывается в официальной документации на сайте). Давайте добавим к редактору плагин, который позволяет встраивать на страницу видео с видеохостинга Youtube.
На момент написания статьи все плагины можно найти в отдельном разделе на сайте. Интересующий нас плагин находится по адресу: https://ckeditor.com/cke4/addon/youtube
После этого на панели инструментов редактора появится новая кнопка, позволяющая работать с новым плагином.
Теперь разберемся с менеджером файлов CKFinder . Так как файлы (например, картинки) у нас располагаются на сервере, то помимо подключения этого компонента на клиенте, то есть в браузере пользователя, нам также будет необходимо настроить его со стороны сервера, а конкретно подключить некоторые библиотеки и реализовать несколько методов.
Официальная документация по настройке коннектора для ASP.NET приложений находится по адресу: https://ckeditor.com/docs/ckfinder/ckfinder3-net/
В отличии от редактора CKEditor, который мы настраивали на сайте и скачивали вручную, CKFinder мы можем добавить в проект прямо в Visual Studio через . Минимальный необходимый для работы набор пакетов выглядит так:
После установки всех необходимых компонентов можно приступить к настройке серверной стороны.
Во-первых, CKFinder требует, чтобы доступ к файловой системе был только у аутентифицированных пользователей, то есть при каждом запросе на сервер через этот менеджер файлов мы должны сообщать ему, имеет ли право данный пользователь получить доступ к файлам на сервере или нет.
Для этого нам нужно реализовать специальный интерфейс, а в нем метод, который аутентифицирует все входящие запросы.
CKFinderAuthenticator.cs
Public class CKFinderAuthenticator: IAuthenticator { public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) { var user = new User(true, new List()); return Task.FromResult((IUser) user); } }
В приведенном выше примере мы просто каждый раз возвращаем фейкового пользователя, который всегда аутентифицирован (флаг true) и не имеет никаких ролей (пустой лист). То есть у нас всегда есть права на доступ к файловой системе. В реальном проекте к этому вопросу, конечно, нужно подойти более серьезно и совместить этот метод с существующей системой аутентификации и авторизации пользователей.
Namespace CKEditor { public class Startup { public void Configuration(IAppBuilder app) { //регистрируем файловую систему для коннектора FileSystemFactory.RegisterFileSystem(); //объявляем маршрут в приложении и сопоставляем его с коннектором //клиентская JS-библиотека CKFinder ожидает увидеть коннектор именно по этому маршруту app.Map("/ckfinder/connector", SetupConnector); } //объявляем метод по настройке и инициализации коннектора private static void SetupConnector(IAppBuilder app) { //создаем экземпляры необходимых классов var connectorFactory = new OwinConnectorFactory(); var connectorBuilder = new ConnectorBuilder(); var customAuthenticator = new CKFinderAuthenticator(); connectorBuilder .LoadConfig() //подгружаем конфигурацию из файла Web.config .SetAuthenticator(customAuthenticator) //устанавливаем ранее определенный аутентификатор.SetRequestConfiguration((request, config) => { config.LoadConfig(); }); //определяем конфигурацию для каждого отдельного запроса //создаем экземпляр коннектора var connector = connectorBuilder.Build(connectorFactory); //добавляем коннектор в pipeline app.UseConnector(connector); } } }
На этом настройка серверной части завершена. Теперь интегрируем CKFinder-клиент с CKEditor на странице.
@using (Html.BeginForm("Index", "Home", FormMethod.Post)) { } document.addEventListener("DOMContentLoaded", function (event) { var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor(editor); });
Если все скрипты подключены правильно и на стороне сервера коннектор настроен, то мы получим доступ к файловой системе через CKFinder из браузера пользователя.
В зависимости от настроек коннектора в файле Web.config мы можем менять разрешения на манипуляции с файлами и папками (создание, перемещение и т.д.).
Отмечу, что мы рассмотрели только базовую конфигурацию CKFinder. В дополнение к этому можно прикрутить логирование, кэширование файлов, различные плагины (например, добавлять водяной знак к загруженным изображениям) и т.д. Более подробно об этом можно почитать в официальной документации.
