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.

Sample backend for image uploading for Rich Text Editor is available for downloading.

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 .pdf and .docx formats and import from the .docx format. The actual processing of files and text content 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:

this.app.getService("operations").action("import");
this.app.getService("operations").action("pdf");
this.app.getService("operations").action("docx");

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

this.app.getService("backend").import();
this.app.getService("backend").export("pdf");
this.app.getService("backend").export("docx");

All of these 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 .docx/.pdf files.

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. The URL for the request is Backend.importExportUrl + "/import/docx"

• 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

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