Working with Server

Rich Text Editor widget uses two types of backend:

• the Upload service for loading and storing images inserted into the text
• the Backend service for import/export of files

Upload Service for Loading and Storing images

You can provide a link to the Upload service by the upload setting:

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

The Upload service contains the Uploader component in the the apiOnly mode. It takes the URL for uploading from the Rich Text Editor configuration. After uploading is complete, the server must return a link to the image, which will be used in the content of Rich Text Editor.

Backend Service for Import/Export of Files

Backend service is a server-side model that contains methods for sending requests. Check out the full list of methods below.

Rich Text Editor provides export to the .docx, .pdf, .txt and .md formats and import from the .docx, .txt and .md formats. Depending on the file format, there are two ways of processing it:

• The import and export of the .md and .txt formats is processed on the client. When exporting files to these formats, the content of the exported files are the same as in files returned by the getValue() method.

• The actual processing of files and text content for the .docx and .pdf formats is done by our standalone server-side service outside of Rich Text Editor itself. The Backend service stores the default URL to our CDN.

Export and import can be initiated by the menu or by calling the methods of the Operations service:

$$("editor").getService("operations").action("import");
// export
$$("editor").getService("operations").action("pdf"); // "pdf", "docx", "txt", "md"

or more directly - by calling the methods of the Backend service:

$$("editor").getService("backend").import();
// export
$$("editor").getService("backend").export("pdf"); // "pdf", "docx", "txt", "md"

As it has already been mentioned, the .md and .txt formats are processed on the client side. In case of working with the .docx and .pdf formats, all of the above described ways will connect to the richtext-export server that will do the job and return the text content for Rich Text Editor or the resulting file in the specified format.

Backend Service Methods

Rich Text Editor connects to the export server via the link that's returned by Backend.getExportImportUrl() (and is stored in Backend.importExportUrl).

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

If you don't want to use this default service, this is the place where you can set the link to your own service or some third-party library.

The logic of export and import is described below:

• Backend.import() does not require any parameters, opens the file dialogue for upload. The rest is done by the Webix Uploader. It sends the file in a POST request inside FormData and receives the resulting HTML, then sets it into Rich Text Editor after erasing its previous contents. In case of a .docx file the URL for the request is formed as Backend.importExportUrl + "/import/docx". The .md and .txt formats are processed on the client.

• Backend.export() requires as a parameter the name of the file type ("pdf" or "docx"), sends the contents of Rich Text Editor in a JSON payload of a POST request, and expects a Blob in return. That blob (file) will be downloaded by default. The .md and .txt formats are processed on the client.

How to extend the default backend API

• Backend.import() - redefine this method to change the URL specifically for import or to change any other aspects of the default logic, like adding supported files for import for third party libraries to process

• Backend.getFileType(mode) - redefine this method to add supported file types for uploader

• Backend.export() - redefine this method to change the URL specifically for export or to modify any other aspects of the default logic, like adding other file types, changing the way the file is downloaded, etc.

• Backend.getExportImportUrl() - redefine this method to change the link to the export/import service

Back to top