Подключение ckeditor. Установка визуального редактора CKEditor

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

Сегодня разберемся, как интегрировать и настроить очень популярный редактор контента CKEditor в стандартное приложение ASP.NET MVC. Также установим и настроим не менее популярный менеджер файлов CKFinder.

Официальная страница разработчика: https://ckeditor.com/

CKEditor - это очень популярный на сегодняшний день визуальный WYSIWYG редактор HTML-содержимого.

CKFinder - это менеджер файлов, который позволяет получить доступ к файловой системе на сервере и управлять файлами из браузера клиента.

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

CKEditor представлен в двух версиях. Версия 4 как более ранняя и, соответственно, более распространенная. И версия 5, новая, реализующая модульную архитектуру, с множеством нововведений.

Настройка CKEditor

Я в своих проектах использую 4-ую версию, ее функционала вполне хватает для решения любых задач. Скачаем архив с редактором и добавим его себе в проект.

Добавить CKEditor очень просто. Это происходит в несколько этапов:

подключаем через тег JS-библиотеку на страницу;

определяем HTML-тег , который будет использоваться в качестве контейнера для CKEditor;

используем метод CKEDITOR.replace(); для подключения редактора к ранее определенной .

} document.addEventListener("DOMContentLoaded", function (event) { var editor = CKEDITOR.replace("content1"); });

Все готово! В приведенном выше примере CKEditor подключается к текстовой области "content1" внутри HTML-формы. Далее содержимое этого поля будет отправлено на сервер.

Стоит отметить, что для CKEditor существует множество плагинов, который расширяют его стандартный функционал. Также плагины можно писать самому (более подробно этот процесс описывается в официальной документации на сайте). Давайте добавим к редактору плагин, который позволяет встраивать на страницу видео с видеохостинга Youtube.

На момент написания статьи все плагины можно найти в отдельном разделе на сайте. Интересующий нас плагин находится по адресу: https://ckeditor.com/cke4/addon/youtube

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

Настройка CKFinder

Теперь разберемся с менеджером файлов CKFinder . Так как файлы (например, картинки) у нас располагаются на сервере, то помимо подключения этого компонента на клиенте, то есть в браузере пользователя, нам также будет необходимо настроить его со стороны сервера, а конкретно подключить некоторые библиотеки и реализовать несколько методов.

Официальная документация по настройке коннектора для ASP.NET приложений находится по адресу: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

В отличии от редактора CKEditor, который мы настраивали на сайте и скачивали вручную, CKFinder мы можем добавить в проект прямо в Visual Studio через . Минимальный необходимый для работы набор пакетов выглядит так:

CKSource.CKFinder - JavaScript-клиент, подключается на стороне клиента

CKSource.CKFinder.Connector.Core - основная и ключевая библиотека, которая обеспечивает работу коннектора CKFinder на сервере

CKSource.CKFinder.Connector.Config - эта библиотека позволяет настраивать CKFinder через общий . Обратите внимание, как изменится конфиг-файл после установки этого пакета, теперь там находятся все настройки для CKFinder.

CKSource.CKFinder.Connector.Host.Owin - эта библиотека позволяет подключить коннектор как OWIN-компонент в приложении. На серверной стороне CKFinder работает как раз следуя этой спецификации, т.е. Open Web Interface for .NET

Microsoft.Owin.Host.SystemWeb - сразу же установим OWIN хост или сервер

CKSource.FileSystem.Local - этот компонент добавляет поддержку работы с файловой системой на сервере

После установки всех необходимых компонентов можно приступить к настройке серверной стороны.

Во-первых, 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. В дополнение к этому можно прикрутить логирование, кэширование файлов, различные плагины (например, добавлять водяной знак к загруженным изображениям) и т.д. Более подробно об этом можно почитать в официальной документации.

Table of contents

When creating an editor in your page, it is possible to set up configurations that change many of its aspects. For example:

ClassicEditor .create(document .querySelector("#editor" ), { toolbar : [ "heading" , "|" , "bold" , "italic" , "link" , "bulletedList" , "numberedList" , "blockQuote" ], heading : { options : [ { model : "paragraph" , title : "Paragraph" , class : "ck-heading_paragraph" }, { model : "heading1" , view : "h1" , title : "Heading 1" , class : "ck-heading_heading1" }, { model : "heading2" , view : "h2" , title : "Heading 2" , class : "ck-heading_heading2" } ] } }) .catch(error =>

As you can see, configurations are set by a simple JavaScript object passed to the create() method.

Removing features

Builds come with all features included in the distribution package enabled by default. They are defined as plugins for CKEditor.

In some cases, you may need to have different editor setups in your application, all based on the same build. For that purpose, you need to control the plugins available in the editor at runtime.

In the example below Heading and Link plugins are removed:

// Remove a few plugins from the default setup. ClassicEditor .create(document .querySelector("#editor" ), { removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] }) .catch(error => { console .log(error); });

Be careful when removing plugins from CKEditor builds using config.removePlugins . If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the updated toolbar configuration as in the example above.

List of plugins

Each build has a number of plugins available. You can easily list all plugins available in your build:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

Adding features Adding complex features

As CKEditor builds do not include all possible features, the only way to add more features to them is to create a custom build .

Adding simple (standalone) features

There is an exception to every rule. Although it is impossible to add plugins that have dependencies to @ckeditor/ckeditor5-core or @ckeditor/ckeditor5-engine (that includes nearly all existing official plugins) without rebuilding the build, it is still possible to add simple, dependency-free plugins.

import ClassicEditor from "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) { editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) { // ... }; } // Load the custom upload adapter as a plugin of the editor. ClassicEditor .create(document .querySelector("#editor" ), { extraPlugins : [ MyUploadAdapterPlugin ], // ... }) .catch(error => { console .log(error); }); Toolbar setup

In builds that contain toolbars an optimal default configuration is defined for it. You may need a different toolbar arrangement, though, and this can be achieved through configuration.

Each editor may have a different toolbar configuration scheme, so it is recommended to check its documentation. In any case, the following example may give you a general idea:

ClassicEditor .create(document .querySelector("#editor" ), { toolbar : [ "bold" , "italic" , "link" ] }) .catch(error => { console .log(error); });

The above is a strict UI-related configuration. Removing a toolbar item does not remove the feature from the editor internals. If your goal with the toolbar configuration is to remove features, the right solution is to also remove their respective plugins. Check above for more information.

Listing available items

You can use the following snippet to retrieve all toolbar items available in your editor:

Array .from(editor.ui.componentFactory.names());

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

Работал я с двумя визуальными редакторами это 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 будет иметь вид:

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