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
Обычно 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 - это визуальный редактор, который вы можете совершенно бесплатно добавить на свой сайт, блог или форум. Он имеет открытый исходный код и работает на большинстве популярных CMS. С установкой данного визуального редактора справятся даже неопытные веб-мастера. По сути, добавление CKEditor на сайт происходит в два шага: сначала вы распаковываете архив на сервер, после чего добавляете несколько строк в код страницы. Подробную инструкцию по инсталляции вы найдете в архиве с редактором.
"Из коробки" данное расширение для веб-сайта поддерживает возможность изменения размеров окна ввода, функции копирования и вставки текста, оформления ссылок, изменения шрифта, работу с надстрочным и подстрочным текстом, добавление специальных символов, добавление источника информации, вставку изображений, якорей и так далее. Предоставляемый функционал зависит от выбранной версии CKEditor. Всего их три: Basic, Standart и Full. Если же функционала самой "продвинутой" редакции вам оказалось недостаточно, то можете расширить возможности редактора при помощи плагинов.
Не забыли разработчики и про возможность изменения внешнего вида CKEditor. Если ни одна из двух стандартных тем оформления не пришлась вам по вкусу, то можете поискать дополнительные "скины" на официальном сайте и сторонних специализированных ресурсах. Напоминаем, что весь вышеперечисленный функционал доступен веб-мастерам для "одиночного" использования совершенно бесплатно. Также есть версии визуального редактора с коммерческими лицензиями.
Ключевые особенности и функции- распространяется в трех версиях, которые различаются между собой функционалом;
- может быть "расширен" за счет плагинов;
- очень прост в установке и работает на большинстве популярных CMS;
- поддерживает смену тем оформления панели инструментов;
- является совершенно бесплатным.
4.6.1 (08.12.2016)
- параметр "callback" в CKEDITOR.ajax.post теперь является опциональным;
- исправлены проблемы с выделением всего содержимого редактора в том случаем, если проект начинался или заканчивался виджетом или другим не выделяемым элементом. Эти же проблемы наблюдалась при работе с плагином "Выделить все";
- исправлено зависание браузера при попытке вставить таблицу в список с отсутствующим последним элементом;
- улучшен плагин, предназначенный для нормализации свойств фона CSS;
- прочие исправления и улучшения.
По моему мнению, 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";