DevExtreme Angular - 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.

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>