Customizing Rich Text Editor

Rich Text Editor is a complex widget created with Webix Jet, the MV* framework for Webix Library. It is a ready-to-use application that needs minimal configuration and has an API for redefining the logic of inner modules.

Rich Text Editor is built as a Jet App and wrapped in a Webix view, so you can initialize Rich Text Editor in either way.

Views

The interface of Rich Text Editor is split into parts (views). Each view is a class that extends the JetView class and has its own handlers for setting the configuration and logic.

The sources for interface parts (Jet Views) are located in the sources/views folder.

views
  topbar
    index.js
    menubar.js
    toolbar.js
  editor.js
  ...

Models/Services

Rich Text Editor models contain the logic for working with text, uploading of images, import and export of files. They are defined as Jet Services.

The sources for models (Jet Services) are located in the sources/models folder.

models
  Backend.js
  Operations.js
  Upload.js

Service methods are called by the UI and can be called by a programmer as:

$$("editor").getService("backend").import();

When you customize a view, you can:

• override the config() method to change the UI
• override the init() method to change the UI and behavior
• override any existing method, but do it with caution
• add and call your own methods

Check the Class Map to find which view renders the part you want to modify.

class Menu extends editor.views["topbar/menubar"] {
    config(){
        const menu = super.config();
        menu.rows.unshift({ 
            template: "Custom header",
            type: "header"
        })
        return menu;
    }
}
 
webix.ui({
    view: "editor",
    menubar: true,  
    override: new Map([
        [editor.views["topbar/menubar"], Menu]
    ])
});

Related sample:  Rich Text Editor: View Customization

When you customize a service, you can:

• add and call your own methods
• override any existing method, but do it with caution

First, create your own service class and inherit it from one of the default services:

class Backend extends editor.services.Backend {
    // initiates file dialog for importing a file
    import() {
        webix.confirm({
            title: "Open file dialog?",
            text: "Press OK for selecting a .docx file"
        }).then(() => {
            this.uploader.fileDialog();
        })
    }
}

Then, replace the default service via the override map:

webix.ui({
    view: "editor",
    upload: "https://docs.webix.com/richtext-backend/images",
    override: new Map([
        [editor.services.Backend, Backend]
    ])
});

Related sample:  Rich Text Editor: Backend Customization

Rich Text Editor is flexible: you can change almost anything in it. However, keep in mind the following:

• The inner logic of Rich Text Editor modules may change in future releases.
• We will try to maintain method signatures, but breaking changes might happen if they are necessary for further development of the widget.