Работа с CKEditor5-classic

CKEditor5 — визуальный редактор, который может работать на веб - страницах. Эта разработка кардинально отличается от CKEditor4.

В сравнении с прежней версией WYSIWYG - редактор CKEditor5

• компактен

• имеет несколько вариантов: classic, baloon, inline

• хорошо масштабируется

• прост в настройке

• интуитивно понятен

• имеет приятный интерфейс

Как работать с CKEditor5

Когда редактор установлен, в месте его расположения мы увидим поле с инструментальной панелью (рис. 1). Инструменты, доступные без дополнительных настроек — это: CKEditor5 обозначение заголовков — h1, h2, h3, тип шрифта — жирный или курсив, CKEditor5 ссылки, CKEditor5 списки: маркированный и нумерованный, CKEditor5 таблицы.

Рис. 1. Общий вид редактора

Рассмотрим каждый инструмент отдельно.

Заголовки

В левом верхнем углу видим Paragraph и стрелку, означающую множественный выбор (рис. 2). Нажав на стрелку, выводим выпадающий список.

Рис. 2. Заголовки

Heading1 означает Заголовок1 или H1, Heading2 — Заголовок2 или H2, Heading3 — Заголовок3 или H3.

Например, нам нужно какую-то фразу сделать заголовком. Выделяем ее в тексте (рис. 3) и нажимаем на Paragraph. После чего выбираем нужный тип заголовка из выпадающего списка. В результате выбранный текст будет обозначен как заголовок (рис. 4).

рис. 3. Выделение фрагмента текста

рис. 4. Внешний вид заголовка

CKEditor5 Шрифты

Литеры I и B инструментальной панели позволяют изменить вид шрифта. B (bold) делает выделенный текст жирным (рис. 5) , I (italic) - курсивом (рис. 6).

Рис. 5 Жирный шрифт

Выделив часть текста и нажав на B, получим текст, написанный жирным шрифтом.

Рис. 6. Курсив

CKEditor5 Ссылка

Чтобы в текст вставит ссылку, нужно выделить фрагмент, который будет текстовой частью ссылки и нажать на символ скрепки (рис. 7).

рис. 7. Поле для ссылки

Открывается поле для того, чтобы вписать в него адрес ссылки, что мы и делаем (рис. 8).

рис. 8. Вставляем ссылку

После чего ссылку можно будет сохранить, нажав на галочку.

Чтобы отредактировать существующую ссылку, выделяем ее (рис.9)

рис. 9. Редактирование ссылки

и нажимаем на карандашик. Будет вновь выведено поле для ввода ссылки (рис. 7). Редактируем ссылку и сохраняем ее.

Чтобы удалить существующую ссылку (рис. 10), выделяем ее и нажимаем символ скрепки с крестиком. Ссылка будет удалена.

Рис. 10. Удаление ссылки

CKEditor5 Списки

Панель инструментов позволяет ввести в текст маркированный или нумерованный список.

Чтобы сделать маркированный список, нажимаем на его символ (рис. 11). Или выделяем фрагмент текста и нажимаем на символ.

Рис. 11. Маркированный список

Для отображения нумерованного списка, нажимаем на его символ (рис. 12) и получаем нумерованный список.

Рис. 12. Нумерованный список

Цитата

Для выделения фрагмента текста, как цитаты, применяем символ цитаты (кавычки) инструментальной панели (рис. 13).

рис. 13. Цитата в тексте

CKEditor5 Таблица

Для отображения таблицы, нажимаем на панели инструментов символ таблицы (рис. 14).

рис. 14. Вставить таблицу

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

Таблицу можно изменять различными способами, например, выделяем ячейку созданной таблицы. Открывается компактное меню редактирования (рис. 15).

рис. 15. Редактирование таблицы.

Оно содержит редактирование колонок (1 символ слева), строк (центральный символ), объединение - разбиение ячеек (первый символ справа).

Изменение колонок

Выделим любую ячейку таблицы и нажмем на символ колонки, первый слева. Откроется меню редактирования колонок.

Верхняя строка компактного меню редактирования колонок (рис. 16) содержит Header column — Заголовок колонки и кнопку включения функции. Если нажать на строку, кнопка окрасится зеленым. Выделяем ячейку колонки. Нажимаем Header column. Все аналогичные ячейки колонок теперь будут иметь вид заголовка — жирный шрифт.

Рис. 16. Столбец заголовков колонок

Вторая строка insert column left — вставить колонку слева (рис. 17)

рис. 17. Вставить колонку слева

Выделим ячейку в любой из колонок и нажмем insert column left. К таблице слева от выделенного столбца добавится колонка (рис. 18).

рис. 18. Результат добавления колонки слева

Следующая строка insert column right — вставить колонку справа (рис. 19).

Как и в предыдущем случае выделяем ячейку того столбца, справа от которого нужно добавить колонку, нажимаем на символ столбца (первый слева) и выбираем insert column right.

рис. 19. Вставляем колонку справа

Справа от выделенной ячейки добавится новая колонка (рис. 20).

рис. 20. Результат добавления колонки справа

Чтобы убрать колонку, выделяем ячейку того столбца, который нужно удалить, нажимаем редактор колонки и далее строку Delete column — Удалить колонку (последняя строка).

Изменение строк

Выделим любую ячейку таблицы и нажмем на символ строки, расположен по центру. Откроется меню редактирования строк.

Верхняя строка компактного меню редактирования строк (рис. 21) содержит Header row — Заголовок строки и кнопку включения функции. Если нажать на Header row , кнопка окрасится зеленым. Выделяем ячейку. Нажимаем Header row. Все аналогичные ячейки строк теперь будут иметь вид заголовка — жирный шрифт.

рис. 21. Редактирование строк. Строка заголовков

Вторая строка insert row below — вставить строку ниже (рис. 22).

рис. 22. Порядок вставки строки ниже указанной

Выделяем строку, ниже которой хотим добавить еще одну. Нажимаем insert row below. Ниже указанной строки будет добавлена еще одна (рис. 22).

рис. 22. Добавление строки снизу

Третья строка insert row above — вставить строку выше (рис. 23).

рис. 23. Порядок вставки строки выше указанной

Выделяем строку, выше которой хотим добавить еще одну. Нажимаем insert row above. Выше указанной строки будет добавлена еще одна (рис. 24).

рис. 24. Результат вставки строки выше указанной

Чтобы убрать строку, выделяем ячейку той строки, которую нужно удалить, нажимаем редактор строки и далее Delete row— Удалить строку (рис. 25).

рис. 25. Удаление строк

Редактор ячеек

Компактное меню редактирования ячеек (рис. 26) позволяет объединять и разбивать ячейки. Его символ находится справа, с краю.

рис. 26. Редактор ячеек

Объединение ячеек

Для объединения двух ячеек в направлении вверх используется команда — Merge cell up — Объединить ячейки вверх. Выделяем ячейку кликом по ней и нажимаем Merge cell up (рис. 27).

рис. 27. Объединить ячейки вверх

Если у ячейки имеется возможность быть растянутой вверх, то 2 из них, рядом лежащие, будут объединены (рис. 28).

рис. 28. Результат объединения ячеек вверх - Merge cell up

Вторая сверху команда Merge cell right — объединить ячейки вправо (рис. 29).

рис. 29. Объединение ячеек вправо

Выделяем ячейку, нажимаем строку Merge cell right и получаем результат (рис. 30)

рис. 30. Ячейки объединены вправо

Третья строка Merge cell down — объединить ячейки вниз (рис. 31).

рис. 31. Объединение ячеек вниз

Выделяем ячейку, нажимаем строку Merge cell down и получаем результат (рис. 32).

рис. 32. Объединение ячеек вниз - Merge cell down

Четвертая строка Merge cell left — объединить ячейки влево (рис.33).

рис. 33. Порядок объединения ячеек влево

Выделяем ячейку и нажимаем строку Merge cell left (рис. 34).

рис. 34. Результат объединения ячеек влево - Merge cell left

Разбить ячейки

Ранее объединенные ячейки можно разбить по вертикали или горизонтали.

Вертикальную ячейку разбивают по горизонтали (рис. 35).

рис. 35. Порядок разбивки ячейки по горизонтали

Выделяем ячейку кликом по ней. Нажимаем крайний правый символ. Открывается меню. В самом низу находим строку Split cell horizontally - Разбить ячейку по горизонтали. Нажимаем на нее. Ячейка будет разбита по горизонтали на 2 равные части (рис. 36).

рис. 36. Результат разбивки ячейки по горизонтали Split cell horizontally

Горизонтальную ячейку разбивают по вертикали - Split cell vertically (рис. 37).

рис. 37. Разбивка ячейки по вертикали

Выделяем ячейку кликом по ней. Нажимаем крайний правый символ. Открывается меню. В нижней части находим строку Split cell vertically - Разбить ячейку по вертикали. Нажимаем на нее. Ячейка будет разбита по вертикали на 2 равные части (рис. 38).

рис. 38. Результат разбивки ячейки по вертикали - Split cell vertically

Удаление таблицы

Для удаления таблицы нажимаем на любую из ее сторон. Периметр окрасится желтым цветом и в верхнем левом углу появится крестик. Нажав на крестик, получим периметр голубого цвета (рис. 39). Далее можно воспользоваться клавишей Delete или другим способом удаления текста.

Рис. 39. Удаление таблицы

Отменить и повторить

Любую операцию можно отменить, пользуясь кнопкой undo (рис. 40).

рис. 40. Кнопка Отменить - undo

или повторить, используя кнопку redo (рис. 41).

рис. 41. Кнопка Повторить - redo

Заключение

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

2019-04-03

◄ Назад 

 Вперед ►