Работа с данными

Структура данных

Rich Text Editor ожидает JS файл с данными, который содержит HTML строку для отображения. Пример данных приведен ниже:

const text = 
`<p>Hello World</p>
 <p><a href="https://docs.webix.com/desktop__richtext.html">Rich Text Editor</a></p>
 <p>Sample text</p>`;

Сервисы для работы с данными

У Rich Text Editor есть следующие сервисы для работы с данными:

1. Upload

обрабатывает загрузку картинок, добавленных в документ

const upload = $$("editor").getService("upload");
upload.fileDialog(id); // открывает диалог для загрузки

2. Operations

обрабатывает все внутренние операции

$$("editor").getService("operations").copy(); // копирует выделенный текст

3. Backend

обрабатывает экспорт и импорт документов

const back = $$("editor").getService("backend");
back.import(); // инициирует диалог для импорта файлов в форматах .docx, .md, .txt

Смотрите папку models исходного кода, чтобы познакомиться с сигнатурами методов.

Операции с данными

Установка значения для Rich Text Editor

Чтобы задать значение для Rich Text Editor, используйте метод setValue(). Метод принимает следующие параметры:

value (string) - значение для установки в компонент
type (string) - опциональный, формат применяемого значения: "html", "text", "markdown", "raw" (Richtext AST content)

Если параметр type не задан, метод устанавливает контент в соответствии с текущим параметром datatype (по умолчанию HTML).

const text = 
`<p>Hello World</p>
<p><a href="https://docs.webix.com/desktop__richtext.html">Rich Text Editor</a></p>
<p>Sample text</p>`;
 
$$("editor").setValue(text);

Получение значения Rich Text Editor

Чтобы получить значение виджета, используйте метод getValue(). Он принимает один опциональный параметр:

type (string) - формат используемого значения: "html", "text", "markdown", "raw" (Richtext AST content)

Метод возвращает контент виджета в заданном формате. Если параметр type не задан, метод возвращает контент в соответствии с текущим параметром datatype (по умолчанию HTML).

const value = $$("editor").getValue();
// -> '<p>Sample text</p>'

Вставка значения в позицию курсора

Для вставки значения в заданном формате в текущую позицию курсора используйте метод insertValue(). Параметры метода:

value (string) - значение для вставки
type (string) - опциональный, формат вставляемого значения: "html", "text", "markdown", "raw" (Richtext AST content)

Если параметр type не задан, метод обрабатывает контент в соответствии с текущим параметром datatype (по умолчанию "html").

const md = "**Inserted** markdown content";
 
$$("editor").insertValue(md, "markdown");

Related sample: Insert Value via API

Парсер markdown в Rich Text Editor не поддерживает вложенные структуры (кроме полужирного текста внутри курсива). Такие комбинации, как полужирный текст внутри ссылки, курсив внутри списка или многоуровневые списки, не будут корректно отображаться при вставке, добавлении через метод setValue() или вставке через метод insertValue() с форматом "markdown", а также при импорте файла .md.

Наверх