Ckeditor установка и настройка. Установка pluginов в CKEditor. Встроенное редактирование с jQuery
Я поделился с Вами отличным 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 – это лучшая система, которую я только видел.
Рассказать в соц. сетях
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 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
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
В данной статье будет показан способ установки визуального редактора себе на сайт. Такой редактор очень удобен для добавления и/или редактирования новой информации для сайта. Например, установка на форуме, в блоке с комментариями, что облегчает и расширяет возможности редактирование текста нового комментария, т.е. можно выделить текст, подчеркнуть его, вставить ссылку да и многое другое, все зависит от того сколько доступа вы дадите своему читателю. Ну и, конечно же, что нельзя забывать так это про админскую часть, которая существенно может облегчить Ваши труды при добавлении и редактировании материала.
Работал я с двумя визуальными редакторами это 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 будет иметь вид:
На этом у меня все, кто знает другие тонкости данного редактора, пишите в комментариях.
→ 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 - кнопка сохранить.
Сегодня разберемся, как интегрировать и настроить очень популярный редактор контента 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. В дополнение к этому можно прикрутить логирование, кэширование файлов, различные плагины (например, добавлять водяной знак к загруженным изображениям) и т.д. Более подробно об этом можно почитать в официальной документации.