CKEditor

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

Редактор используется для быстрого создания и редактирования веб-страниц. После скачивания CKEditor можно загрузить его на сервер, где хранится сайт, и подключить к нему. Можно подключить меню редактора, например, к формам для комментариев на стороне клиента. А можно использовать CKEditor внутри CMS, чтобы создавать и редактировать контент на страницах сайта.

Редактор поддерживает множество языков, включая русский. Интерфейс — по умолчанию на английском, но можно подгрузить дополнительные языковые пакеты.

Раньше программа называлась FCKEditor, но сменила название начиная с версии 3.0. Актуальные версии на момент написания статьи — 4 и 5.

Для чего нужен CKEditor

В первую очередь инструмент нужен для удобства. CKEditor –— это редактор формата WYSIWYG. Аббревиатура расшифровывается как What You See Is What You Get: что видишь, то и получишь. Это означает, что результат видно сразу: человек вводит текст, форматирует его и тут же понимает, как он будет выглядеть.

Поэтому CKEditor пользоваться удобнее, чем стандартными полями для ввода контента. Чтобы отформатировать текст, не нужно вручную писать HTML-теги — достаточно нажать на кнопку, как в обычном текстовом редакторе. Все применится автоматически.

Кроме того, CKEditor расширяет возможности сайта. Иногда стандартных средств недостаточно: на этот случай в редакторе есть плагины и разнообразные настройки, которые позволяют добавить новые функции.

А еще редактор можно подключить к текстовым полям на самих страницах сайта — тогда пользователи тоже смогут форматировать свой контент, например комментарии. Стандартные формы для ввода зачастую лишены возможности по-разному настраивать текст.

Кто пользуется CKEditor

• Веб-разработчики, которые могут заниматься его настройкой и подключением к сайту, а также установкой плагинов и кастомизацией.
• Контент-менеджеры, которые наполняют сайт текстами, картинками и другим содержимым. Они работают с редактором, поэтому им даже не обязательно знать HTML.
• SEO-специалисты, маркетологи, вебмастера и другие люди, которым может понадобиться работать с CMS сайта.
• Обычные пользователи, которые могут воспользоваться CKEditor, если владелец сайта подключил его на стороне клиента.

Какие возможности дает CKEditor

Форматирование текста. Можно не просто вводить текст, но и делать его жирным, курсивом, зачеркнутым или подчеркнутым, менять цвет и тип. Можно добавлять заголовки, выравнивать контент по разным краям — словом, делать все, что предлагают классические текстовые редакторы. При этом не нужно работать с HTML: он стандартно используется в вебе для форматирования текстов, но CKEditor берет расстановку тегов на себя.

Кастомные настройки. Разработчики CKEditor предлагают несколько основных пакетов для загрузки редактора, с большим или меньшим наполнением. Но есть и возможность кастомизировать сборку: добавить в редактор компоненты, которые нужны непосредственно вам, и как бы «собрать» из них нужное наполнение.

Установка плагинов. Плагины — это расширения, которые устанавливаются в редакторе. Они позволяют добавить в него самые разные новые функции для работы с контентом. Например, возможность экспортировать документ в формат PDF или автоматически изменять размер поля ввода в зависимости от объема текста. Есть плагины для работы с изображениями, шрифтами и многим другим, а также для автоматической подстановки форматирования при копировании текстов из Word и прочих офисных программ.

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

Командная работа. Возможности для командной работы особенно хорошо заметны в новых версиях программы. Там есть возможность оставлять комментарии к документам, как, например, в «Ворде», просматривать историю правок, давать разные уровни доступа в зависимости от статуса пользователя. Это только примеры: на деле возможностей куда больше, а плагины дополнительно их расширяют.

Как выглядит работа с CKEditor

Когда редактор подключен, в поле ввода текста внутри административной панели CMS — или в поле для ввода комментариев на странице сайта — появляется панель инструментов. На ней есть кнопки, привычные нам по текстовым редакторам: «Полужирный текст», «Курсив», «Заголовок» и другие. Ими можно пользоваться как обычно, редактор сам переведет все в HTML.

В нижней части окна редактор показывает, какие теги применены к той части текста, где сейчас находится курсор. Это полезно, чтобы понять, с каким участком мы имеем дело: например, со списком, отдельным абзацем или чем-то еще.

Если по какой-то причине человеку понадобится ввести в текстовое поле HTML-код, он может нажать в панели CKEditor соответствующую кнопку и перейти в режим написания кода. В этом случае CKEditor не будет применять стили — они будут читаться сразу из HTML-разметки.

Совместимость с популярными технологиями

CKEditor совместим с большинством современных CMS: Drupal, OpenCart, MODX и другими. Он поддерживает ряд технологий и языков программирования, которые используются в вебе. На стороне клиента это JavaScript, на стороне сервера — PHP, Perl, Ruby, Java, Python, ASP.NET и другие. Поддержка редактора есть в большинстве браузеров, таких как Chrome, Firefox и других.

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

Как установить CKEditor

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

В бесплатном доступе есть opensource-версия CKEditor — вариант с открытым исходным кодом, где есть основные возможности редактора. Правда, в этой версии работают не все функции: за некоторые возможности необходимо доплачивать.

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

Если у вас есть веб-проект на локальном компьютере, можете распаковать редактор в его папку. Для сайтов CKEditor загружается на сервер, где запущен проект.

Как настроить CKEditor

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

Кроме основных официальных плагинов, при скачивании можно сразу выбрать из списка дополнительные, в том числе от сторонних разработчиков. Такая возможность есть на странице CKEditor Builder — инструмента, который помогает собрать свою конфигурацию редактора.

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

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

Как начать работать с CKEditor

Подробные инструкции по подключению редактора к CMS и административной панели есть в документации, а также в мануалах от создателей конкретной CMS. Процесс может несколько различаться в зависимости от продукта, которым вы пользуетесь.

Проще всего работу редактора можно проверить, если подключить его на стороне клиента. Для этого даже не понадобится сервер: достаточно HTML-файла на локальном компьютере.

Чтобы это сделать, нужно сначала подключить файл ckeditor.js. Это тоже можно сделать прямо в HTML-документе с помощью тега script. В таком случае функции из этого файла станут доступны внутри документа и ими можно будет пользоваться.

В HTML-файл нужно будет добавить поле для ввода текста — оно называется textarea. Затем понадобится дать ему уникальное имя и с помощью JavaScript заменить стандартное отображение textarea с таким именем на окно редактора. Благодаря ckeditor.js это можно сделать с помощью одной команды: в файле уже есть функция CKEDITOR.replace(). В скобках понадобится указать уникальное имя textarea, к которой вы хотите добавить поле редактора.

После этого вместо стандартного текстового поля на странице отобразится интерфейс редактора с кнопками форматирования текста.