Работа с CKEditor4

CKEditor - свободный WYSIWYG-редактор, может быть использован на веб-страницах. Работа с ним подобна аналогичным редакторам. CKEditor4 - визуальный редактор, имеет множество инструментов. Бесплатная версия 4 содержит не все из них, тем не менее набор достаточно обширен. Инструментальная панель редактора (рис.1) имеет следующие функции:

 рис. 1. Панель инструментов WYSIWYG - редактора CKEditor4

Нумерация по верхней части

1. Вырезать

2. Копировать

3. Вставить

4. Вставить только текст

5. Вставить из Word

6. Отменить

7. Повторить

8. Проверка орфографии

9. Вставить ссылку

10. Удалить ссылку

11. Вставить якорь

12. Вставить изображение

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

14. Горизонтальная линия

15. Вставить спецсимвол

16. Развернуть

Нумерация по нижней части

1. жирный текст

2. курсив

3. зачеркнутый текст

4. подчеркнутый текст

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

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

7. Цитата

Кнопка Источник позволяет перейти к ручной верстке.

Обычное — указать заголовки h2, h3.

Вставить ссылку

При нажатии некоторых кнопок открываются дополнительные окна:

Вставить гиперссылку (рис.2)

 рис. 2. Вкладка Вставить ссылку

Протокол открывает вложенный список видов протоколов. В поле Ссылка вводится адрес ссылки. Адрес — абсолютный.

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

Нажимаем OK.

Вставить якорь (рис. 3)

 рис. 3. Вкладка Вставить якорь

В поле Имя якоря вводится идентификатор якоря. Нажимаем OK.

Например (рис. 4) , назовем якорь "one"

 рис. 4. Установка якорей в тексте

Если теперь просмотреть код, нажав на кнопку Источник,увидим

 

Header

 

В настоящее время имя name к якорям применять не рекомендуется. Поэтому я вручную убираю лишнее:

 

Header

 

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

рис. 5. Установка ссылок на якоря

В поле вкладки Ссылка выбираем из выпадающего списка Тип ссылки — ссылка на якорь в тексте. Выбираем якорь по идентификатору и нажимаем ОК.

Якоря и ссылки на них установлены.

Вставить изображение (рис. 6)

 рис. 6. Вкладка Вставить изображение

В тексте отмечаем место установки картинки и жмем кнопку Изображение.

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

Также здесь можно указать бордер в поле Граница, вертикальный и горизонтальные отступы, выравнивание изображения. Когда они указаны в файле стилей, здесь нет нужды это делать.

При указании адреса картинки, она появится в поле предпросмотра.

Вкладка Цель выполняет те же функции, что и на вкладке Ссылка.

Нажимаем OK.

Вставить таблицу (рис. 7)

рис.7. Вкладка вставки таблицы в текст

На вкладке Таблицы можно отформатировать ее по своему усмотрению. Как и в изображениях, можно указывать относительные ширину и высоту. Указать, выбрав их из выпадающего списка Заголовки, их расположение. Также можно присвоить имя таблице, вписав его в поле Заголовок. Можно применять строку Итоги.

Вставить спецсимвол (рис.8)

 рис. 8. Вкладка Вставить спецсимвол

Иногда возникает необходимость вставки в поле текста специальных символов. Эта кнопка открывает их список. Выбрав символ, Вы получите его в тексте.
 

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

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

2019-03-25

◄ Назад 

 Вперед ►