CKEditor 5 на русском

Инструмент визуализации набора текста, иначе — визуальный редактор или редактор форматированного текста. 
Компактен, есть: 

• classic - классический, 
• baloon, 
• inline — встроенный,

хорошо масштабируется, интуитивно понятен. 

На этой странице внизу я предлагаю скачать эдитор бесплатно на русском языке с примером теста. CKEditor 5 можно будет использовать только в работах под лицензией GNU GPL.

Пример демонстрирует установку и подключение визуального редактора html. 
Структура директории для теста WYSIWYG (рис. 1): 

Здесь, в папке test-ru-OK лежат файл index.html и папка ckeditor5. В файле index.html, CKEditor 5 привязан к области div.
В конце кода html, после закрывающего тега body или перед ним, подключаем редактор как обычный js скрипт: 
Привязывается ckeditor5 к тегу области страницы div или полю textarea с идентификатором id=“editor“.

Тест:

•  распаковать скачанный архив;
• добавить в images изображения 
• открыть test-ru-OK в любом браузере(если вдруг непонятно, то 1. открыть папку test-ru-OK, 2. выбрать файл index.html, 3. Открыть в любом браузере).

На странице Вы увидите сборку-classic. Когда я открываю у себя, приходится немного подождать окончания загрузки. 

Инструменты

Слева — направо: 

• абзац или заголовок, 
• жирный шрифт, 
• курсив, 
• ссылка, 
• маркированный список, 
• нумерованный список, 
• сдвиг влево, 
• сдвиг вправо 

Следующая иконка означает загрузку изображений с компьютера. Ею не пользуемся. После нее: 

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

Есть еще возможность вставить сниппет html и просмотр исходного кода под названием HTML редактор.

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

Изображения в CKEditor 5

На панели инструментов есть две почти одинаковые иконки. Первая связывает область ввода текста с коммерческими адаптерами: CKFinder, CloudServices, CKBox или с Вашим личным адаптером. В моей сборке не работает. Вторая иконка с галочкой работает двумя способами: либо как первая, либо вставляет картинки по адресу. В приводимом примере теста редактора используем адрес. Для этого в тестовой папке создаем директорию images, куда помещаем картинки. Откроем вторую пиктограмму на втором уровне (рис. 3): 

Первая строка «Загрузить с компьютера» без адаптера работать не будет. Нажимаем на «Вставить изображение по URL», откроется скрытая панелька с полем ввода. Наши картинки хранятся в папке images рядом с эдитором. Можно добавлять их по полному адресу, как показали разработчики. Или ввести относительный адрес images/имя_файла (рис. 4). 

Это будет работать, если: папка images лежит на одном уровне с CKEditor 5 и html-документом, где он установлен - index.html (рис. 1). 

Результат — рисунок 5. 

Вверху или внизу - иконки обработки изображения: 

1. альтернативный текст — при нажатии появится поле ввода текста,
2. подпись, 
3. разместить в тексте: картинка расположится в тегах р, 
4. выравнять по центру: появится в теге figure class=“image“, 
5. боковое изображение: использует тег figure class=“image image-style-side“, 

Отображение сохраненной разметки будет зависеть от стилей, назначенных классам image и image-style-side. 

Нажимая на иллюстрацию, видим обрамление желтого или синего цвета. Синий имеет стрелки вверху и внизу. Они опускают изображение или добавляют внизу новую свободную полосу(рис. 6).

 Коммерческие версии адаптеров изображений

CloudServices — облачный сервис для совместной работы. CKBox, CKFinder — файловые менеджеры. Грузят картинки в редактор перетаскиванием, обрабатывают и сортирует файлы.

Таблицы и коды

Иконка таблиц открывает поле выбора вида (рис.7): 

В области редактора доступно изменение свойств столбцов, строк, ячеек(рис.8, 9).

Вставить код: последняя пиктограмма на панели(рис. 10). 

Код в тексте выделяется с помощью разметки. 

Выбираю тип языка и нажимаю на него. В поле редактора получаю область кода(рис. 11).

Отображение на странице будет зависеть от стилевых свойств. Здесь class="language-javascript".

Краткое описание визуального редактора CKEditor 5 закончено. Скачивайте его на русском языке. 

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

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