WYSIWYG-редактор

WYSIWYG-редактор («What You See Is What You Get» — «что видишь, то и получишь») — визуальный редактор для создания и форматирования контента: текста, таблиц, изображений и формул. Содержимое отображается в процессе редактирования именно так, как оно будет выглядеть в итоге — без необходимости знать разметку.

Редактор в Citeck построен на основе фреймворка Lexical.

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

../../_images/comment_edit.png

Рассмотрим ее функционал подробнее:
Выбрать уровень заголовков, вида списка и т.д.

Изменить размер шрифта, применить стиль текста — жирный, курсив, подчёркнутый, добавить блок кода, ссылку

Изменить цвет текста, цвет фона

Изменить выравнивание и отступ

Вставить объект.
Изображение можно вставить как из файла, так и из ссылки.


Загрузить файл
Файл будет отображаться в виде ссылки:
По клику доступен его просмотр:
Упомянуть пользователя

Пример работы с редактором:

../../_images/wysiwyg_01.png

Быстрое редактирование выделенного текста

../../_images/highlighted_area.png

  • 1 - перемещение строки или выделенной области

  • 2 - форматирование выделенного текста

Добавление и редактирование таблицы

Выберите в меню Вставка - Таблица, выберите количество строк и столбцов:

../../_images/table_01.png

Для таблицы доступно изменение ширины и высоты ячеек, как в обычных редакторах, добавление столбцов и строк (1), действия с таблицей доступны по нажатию на (2):

Вставка текста в формате Markdown

При вставке текста из буфера обмена в пустой редактор происходит автоматическое определение формата Markdown. Если вставляемый текст содержит элементы разметки Markdown (заголовки, списки, выделение текста, ссылки, блоки кода, таблицы и др.), он автоматически преобразуется в форматированный контент.

Условия автоматической конвертации:

  • редактор пуст (не содержит текста)

  • текст содержит не менее двух различных элементов Markdown-разметки

  • в буфере обмена нет HTML-данных (только plain text)

Если условия не выполнены, текст вставляется как обычно, без преобразования.