DevExtreme React - Customize Built-In Formats and Modules

Modify

When modifying a format, you can change the markup tag associated with it and limit format values. Refer to the get(componentPath) description to see a code example.

Module modification is also possible but can cause the module to malfunction.

Extend

You can extend the HtmlEditor's formats and modules and also Quill's formats and modules. To get a format or module for further extension, pass "formats/[formatName]" or "modules/[moduleName]" to the get(componentPath) method.

In the following code, the strike format is extended so that the stricken out text is non-editable when the format is applied. The extended format is then registered.

jQuery
JavaScript
$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        onInitialized: function(e) {
            var htmlEditor = e.component;
            var Strike = htmlEditor.get("formats/strike");
            class NonEditableStrike extends Strike {
                // Overrides the method that creates a DOM node for the formatted text
                static create(value) {
                    // Creates a DOM node using the parent's implementation
                    let node = super.create(value);
                    node.setAttribute('contenteditable', false);
                    return node;
                }
            }
            // Replaces the built-in `strike` format
            htmlEditor.register({ "formats/strike": NonEditableStrike });
        }
    });

});
Angular
TypeScript
HTML
import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    onInitialized (e) {
        let htmlEditor = e.component;
        let Strike = htmlEditor.get("formats/strike");
        class NonEditableStrike extends Strike {
            // Overrides the method that creates a DOM node for the formatted text
            static create(value) {
                // Creates a DOM node using the parent's implementation
                let node = super.create(value);
                node.setAttribute('contenteditable', false);
                return node;
            }
        }
        // Replaces the built-in `strike` format
        htmlEditor.register({ "formats/strike": NonEditableStrike });
    }
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})
<dx-html-editor
    (onInitialized)="onInitialized($event)">
</dx-html-editor>