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

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

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)

Обратите внимание, что парсер формата markdown, используемый в Rich Text Editor, не поддерживает вложенные структуры. Это означает, что сложные структуры, такие как использование полужирного шрифта внутри текста, выделенного курсивом, или ссылки внутри списка, или многоуровневые списки, не будут работать корректно при вставке, добавлении при помощи метода setValue() (с форматом markdown) или при импорте файла в формате .md.

Если параметр type не задан, метод интерпретирует контент как 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 не передается, метод возвращает контент как HTML строку.

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

Наверх