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>Feedback