Работа с сервером

Виджет Rich Text Editor использует два типа бэкенда:

• сервис Upload для загрузки и хранения картинок, вставленных в текст
• сервис Backend для импорта и экспорта файлов

Сервис Upload для загрузки и хранения картинок

Вы можете задать ссылку на сервис Upload, используя свойство upload:

webix.ui({
    type: "space",
    cols: [
        {
            view: "editor",
            upload: "path_to_server/images",
        },
    ],
});

Сервис Upload содержит компонент Uploader в режиме apiOnly. Он берет URL для загрузки из конфигурации Rich Text Editor. После завершения загрузки сервер должен вернуть ссылку на картинку, которая будет использоваться внутри контента Rich Text Editor.

Сервис Backend для импорта и экспорта файлов

Сервис Backend - это серверная модель, у которой есть методы для запросов на сервер. Ниже вы найдёте полный список методов.

Rich Text Editor позволяет экспортировать контент в форматы .docx, .pdf, .txt и .md и импортировать в форматах .docx, .txt и .md. В зависимости от формата файлов, обрабатывать их можно одним из следующих способов:

• импорт и экспорт форматов .md и .txt обрабатывается на клиенте. При экспорте файлов в эти форматы, их контент будет таким же, как и в файлах, которые возвращает метод getValue().

• фактическая обработка файлов и текстового контента для форматов .docx и .pdf осуществляется отдельным сервисом, вне виджета Rich Text Editor. Сервис Backend хранит дефолтный URL к CDN.

Для экспорта и импорта файлов можно использовать меню или вызвать методы сервиса Operations:

$$("editor").getService("operations").action("import");
// экспорт
$$("editor").getService("operations").action("pdf"); // "pdf", "docx", "txt", "md"

или методы сервиса Backend:

$$("editor").getService("backend").import();
// экспорт
$$("editor").getService("backend").export("pdf"); // "pdf", "docx", "txt", "md"

Как уже упоминалось выше, форматы .md и .txt обрабатываются на клиенте. В случае работы с форматами .docx и .pdf, все методы, описанные выше, будут использовать сервер richtext-export, который выполнит обработку и вернет текстовый контент для Rich Text Editor или полученный файл в заданном формате.

Методы сервиса Backend

Для связи с сервером экспорта Rich Text Editor использует ссылку, которая возвращается методом Backend.getExportImportUrl() (и хранится в Backend.importExportUrl).

getExportImportUrl() {
    return "https://docs.webix.com/richtext-export";
}

Если вы не хотите использовать этот дефолтный сервис, здесь вы можете задать ссылку на свой сервис или стороннюю библиотеку.

Логика экспорта и импорта описана ниже:

• Backend.import() не требует каких-либо параметров, открывает диалог для загрузки файла. Остальное обрабатывается Webix Uploader. Он отправляет файл в POST-запросе внутри FormData и получает HTML, затем устанавливает его в Rich Text Editor после удаления предыдущего контента. Для файла в формате .docx URL для запроса формируется как Backend.importExportUrl + "/import/docx". Форматы .md и .txt обрабатываются на клиенте.

• Backend.export() требует в качестве параметра название типа файла ("pdf" или "docx"), отправляет контент Rich Text Editor в JSON-payload POST-запроса, и ожидает Blob. Этот blob (файл) будет загружен по умолчанию. Форматы .md и .txt обрабатываются на клиенте.

Как расширить дефолтное API бэкенда

• Backend.import() - переопределите этот метод, чтобы изменить URL только для импорта или изменить другие аспекты дефолтной логики, например, добавление поддерживаемых типов файлов для импорта для обработки сторонними библиотеками

• Backend.getFileType(mode) - переопределите этот метод, чтобы добавить поддерживаемые типы файлов для uploader

• Backend.export() - переопределите этот метод, чтобы изменить URL только для экспорта или другие аспекты дефолтной логики, например, добавление других типов файлов, или изменение способа загрузки файла, и т.д.

• Backend.getExportImportUrl() - переопределите этот метод, чтобы изменить ссылку на сервис экспорта/импорта

Наверх