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
$(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
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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.