Кастомизация Rich Text Editor

Rich Text Editor - это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.

Природа Jet-приложения и внутренние модули

Rich Text Editor построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.

Компоненты

Интерфейс Rich Text Editor разбит по частям (компонентам). Каждый компонент - это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.

Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.

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

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

Модели/Сервисы

В моделях Rich Text Editor описана логика для работы с текстом, загрузки картинок, импорта и экспорта файлов. В Webix Jet модели называются сервисами.

Исходный код для моделей (сервисов Jet) находится в папке sources/models.

models
  Backend.js
  Operations.js
  Upload.js

Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:

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

Кастомизация компонентов

• вы можете переопределять метод config() для изменений в UI
• вы можете переопределять метод init() для изменений в UI и поведении компонентов
• вы можете переопределять любой метод, но с осторожностью
• вы можете создавать и вызывать свои методы

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

Кастомизация сервисов Jet

• вы можете добавлять и вызывать свои методы
• вы можете переопределять любые существующие методы, но с осторожностью

Прежде всего, создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:

class Backend extends editor.services.Backend {
    // открывает диалог для импорта файла
    import() {
        webix.confirm({
            title: "Open file dialog?",
            text: "Press OK for selecting a .docx file"
        }).then(() => {
            this.uploader.fileDialog();
        })
    }
}

Затем переопределите класс по умолчанию вашим с помощью свойства override:

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 - это очень гибкий виджет в отношении кастомизаций: вы можете менять в нём практически всё, что угодно. Однако следует помнить о следующих моментах:

• Внутренняя логика модулей Rich Text Editor может меняться в последующих релизах.
• Мы сделаем всё, чтобы оставить сигнатуры методов без изменений, но в случае необходимости возможны критические изменения.

Наверх