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 with minimum configuration settings but has API for redefining the logic of inner modules.

Jet App and Inner Modules

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

Views

The interface of Rich Text Editor is split into parts (views). Each view is a class that extends the JetView class and has 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
  ...

Go to the Class Map page to see the list of all Jet views in Rich Text Editor and where they are in the interface.

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();

Customizing Views

• you can override the config() method for changes in the UI
• you can override the init() for changes in the UI and behavior
• you can override any existing method but with a caution
• you can add and call your own methods

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

Customizing Jet Services

• you can add and call your own methods
• you can override any existing method but with a caution

Firstly, 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();
        })
    }
}

Secondly, 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

Backward Compatibility

Rich Text Editor is extremely flexible when it comes to customizations: 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.

Back to top