Обзор RichText

DHTMLX RichText — гибкий и лёгкий WYSIWYG-редактор, написанный на JavaScript. Разработанный для удобного редактирования в современных веб-приложениях, RichText предлагает чистый интерфейс, богатые возможности форматирования и полный контроль над отображением контента. Будь то CMS, внутренний административный инструмент или встраиваемый редактор документов — RichText легко интегрируется и настраивается под ваши нужды.

Компонент DHTMLX RichText включает следующие возможности:

• Два режима отображения

• Сериализация контента в HTML, обычный текст и Markdown

• Настраиваемая toolbar со встроенными и пользовательскими кнопками

• Статическая menubar, которую можно показать или скрыть

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

• Полный доступ к АПИ для обработки событий, управления контентом и реактивного управления состоянием

RichText не зависит от фреймворка и легко интегрируется с React, Angular, Vue и Svelte, что делает его подходящим для широкого спектра фронтенд-экосистем.

Данная документация содержит подробные сведения об установке, настройке, использовании и кастомизации. Здесь вы найдёте примеры для типовых сценариев, полный справочник АПИ и лучшие практики встраивания RichText в ваше приложение.

Структура RichText

Строка меню

Строка меню RichText открывает доступ к действиям редактирования: создание нового документа, печать, импорт/экспорт контента и другое. По умолчанию она скрыта.

Используйте свойство menubar, чтобы управлять её видимостью. Строку меню можно включить или отключить, однако её содержимое на данный момент не настраивается.

Панель инструментов

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

Свойство toolbar позволяет полностью настроить содержимое и раскладку панели инструментов. Вы можете включить или отключить панель, переупорядочить стандартные элементы или задать полностью кастомную панель с помощью массива идентификаторов предопределённых кнопок и объектов пользовательских кнопок.

Редактор

Редактор RichText — центральная область, в которой пользователи создают и форматируют контент. Вы можете управлять внешним видом и поведением редактора через параметры конфигурации: value, layoutMode и defaultStyles. RichText также поддерживает кастомные стили, встраивание изображений и адаптивную раскладку в соответствии с требованиями вашего приложения.

Два режима работы

DHTMLX RichText может работать с контентом в режимах «classic» и «document». Выберите наиболее удобный режим для редактирования текста. Используйте свойство layoutMode, чтобы переключать режимы программно.

• "classic"

• "document"

Поддерживаемые форматы

Редактор RichText поддерживает разбор и сериализацию контента в форматах HTML, обычный текст и Markdown.

Формат HTML

Текстовый формат

Формат Markdown

Передайте встроенные энкодеры markdown в setValue() / getValue(), чтобы загружать или сериализовывать контент в формате Markdown:

const editor = new richtext.Richtext("#root", {
    value: "Hello world"
    // остальные свойства конфигурации
});

// загрузка Markdown в редактор
editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown);

// чтение содержимого редактора как Markdown
const md = editor.getValue(richtext.markdown.toMarkdown);

Примечание

Поддержка Markdown охватывает ограниченное подмножество синтаксиса — распространённые блочные и строчные элементы: заголовки, абзацы, переносы строк, выделение, цитаты, списки и ссылки. Форматирование, не имеющее аналога в Markdown (семейство шрифта, размер шрифта, цвета, выравнивание, межстрочный интервал), при сериализации отбрасывается.

Вложенные строчные структуры не поддерживаются, за исключением жирного внутри курсива. Комбинации вида «жирный внутри ссылки», «курсив внутри элемента списка» или многоуровневые (вложенные) списки отображаться корректно не будут.

Копирование и вставка

Редактор RichText поддерживает операции с буфером обмена через стандартные системные сочетания клавиш (Ctrl+C / Ctrl+X / Ctrl+V на Windows/Linux, ⌘+C / ⌘+X / ⌘+V на macOS), соответствующие кнопки панели инструментов и пункты строки меню.

При копировании или вырезании контента RichText записывает в системный буфер обмена два представления:

• версию в обычном тексте для совместимости с простыми целевыми приложениями (терминалы, редакторы кода, простые поля ввода)
• версию в HTML, сохраняющую всё строчное и блочное форматирование (жирный, курсив, подчёркивание, зачёркивание, семейство и размер шрифта, цвет текста и фона, заголовки, цитаты, списки, выравнивание, отступы, межстрочный интервал, ссылки и изображения)

Поведение при вставке зависит от источника содержимого буфера обмена:

• Вставка между двумя экземплярами RichText (в одном документе или на разных страницах) использует HTML-представление и сохраняет исходное форматирование.
• Вставка из любого внешнего источника — браузеров, текстовых процессоров и других редакторов — обрабатывается как обычный текст. Вставляемый контент добавляется без внешнего форматирования.

Примечание

Кнопка Вставить на панели инструментов использует асинхронный Clipboard API, который предоставляет только обычный текст. Чтобы вставить контент, скопированный из другого RichText, с сохранением форматирования, используйте сочетание Ctrl+V / ⌘+V — оно получает полный HTML-пакет непосредственно из события clipboard браузера.

Сочетания клавиш

Редактор RichText поддерживает набор стандартных сочетаний клавиш для ускоренного форматирования и редактирования. Сочетания соответствуют платформенным соглашениям и доступны как на Windows/Linux (Ctrl), так и на macOS (⌘).

Форматирование текста

Действие	Windows/Linux	macOS
Жирный*	Ctrl+B	⌘B
Курсив	Ctrl+I	⌘I
Подчёркивание	Ctrl+U	⌘U
Зачёркивание	Ctrl+Shift+X	⌘⇧X

Редактирование

Действие	Windows/Linux	macOS
Отменить	Ctrl+Z	⌘Z
Повторить	Ctrl+Y / Ctrl+Shift+Z	⌘Y / ⌘⇧Z
Вырезать	Ctrl+X	⌘X
Копировать	Ctrl+C	⌘C
Вставить	Ctrl+V	⌘V
Удалить слово	Ctrl+Backspace / Ctrl+Delete	⌥⌫ / ⌥⌦
Удалить строку	—	⌘⌫ / ⌘⌦

Отступы

Действие	Windows/Linux	macOS
Увеличить отступ блока / вложить список	Tab	⇥
Уменьшить отступ блока / поднять список	Shift+Tab	⇧⇥

Специальные действия

Действие	Windows/Linux	macOS
Вставить ссылку	Ctrl+K	⌘K
Печать	Ctrl+P	⌘P

Информация

В будущих обновлениях могут быть добавлены дополнительные сочетания клавиш.

Чтобы получить актуальный справочник сочетаний клавиш RichText, нажмите Help и выберите пункт Keyboard shortcuts: