Обычно 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 готов к работе, и выглядит очень даже не плохо.

Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.

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

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

По моему мнению, 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";