Angular HtmlEditor - Predefined Items
Toolbar items allow users to format the HTML Editor's content and perform actions on it.
Predefined toolbar items include:
- Buttons that apply single-choice formats to the text.
- Action buttons.
- Select boxes that apply multiple-choice formats.
- Separators that are not user-interactive and only divide other elements.
The following table lists toolbar items and the formats they apply (if applicable):
Toolbar item name | Format | acceptedValues |
---|---|---|
"background" | "background" | Any value the background-color CSS property accepts. |
"bold" | "bold" | true or false |
"color" | "color" | Any value the color CSS property accepts. |
"italic" | "italic" | true or false |
"link" | "link" | String or Object ({ href: String, text: String, target: Boolean }) |
"image" | "extendedImage" | String or Object ({ src: String, width: Number, height: Number, alt: String }) |
"strike" | "strike" | true or false |
"subscript" | "script" | "sub" |
"superscript" | "script" | "super" |
"underline" | "underline" | true or false |
"blockquote" | "blockquote" | true or false |
"header" | "header" | 1, 2, 3, 4, 5, or 6 |
"increaseIndent" | "indent" | "+1" |
"decreaseIndent" | "indent" | "-1" |
"orderedList" | "list" | "ordered" |
"bulletList" | "list" | "bullet" |
"alignLeft" | "align" | "left" |
"alignCenter" | "align" | "center" |
"alignRight" | "align" | "right" |
"alignJustify" | "align" | "justify" |
"codeBlock" | "code-block" | true or false |
"variable" | "variable" | Object ({ value: String, escapeChar: String | Array<String> }) |
"font" | "font" | Any value the font-family CSS property accepts. |
"size" | "size" | Any value the font-size CSS property accepts. |
"undo" | - | - |
"redo" | - | - |
"clear" | - | - |
"separator" | - | - |
"cellProperties" | - | - |
"tableProperties" | - | - |
"insertTable" | - | - |
"insertHeaderRow" | - | - |
"insertRowAbove" | - | - |
"insertRowBelow" | - | - |
"insertColumnLeft" | - | - |
"insertColumnRight" | - | - |
"deleteColumn" | - | - |
"deleteRow" | - | - |
"deleteTable" | - | - |
To add a button to the toolbar, add its name to the items array:
- <dx-html-editor>
- <dxo-toolbar>
- <dxi-item name="bold"/>
- <dxi-item name="italic"/>
- <dxi-item name="alignRight"/>
- <dxi-item name="alignLeft"/>
- </dxo-toolbar>
- </dx-html-editor>
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- // ...
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
To add a select box, specify the name and acceptedValues:
- <dx-html-editor>
- <dxo-toolbar>
- <dxi-item
- [acceptedValues]="headerAcceptedValues"
- name="header"
- />
- <dxi-item
- [acceptedValues]="alignAcceptedValues"
- name="align"
- />
- </dxo-toolbar>
- </dx-html-editor>
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- headerAcceptedValues = [1, 2, 3, false];
- alignAcceptedValues = ["left", "right", "center"];
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
Customize Predefined Items
To customize a button, assign its name to the name property and specify button properties in the options object:
- <dx-html-editor>
- <dxo-toolbar>
- <dxi-item
- [options]="clearFormatOptions"
- name="clear">
- </dxi-item>
- </dxo-toolbar>
- </dx-html-editor>
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- clearFormatOptions = { icon: "clear", type: "danger" };
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
To customize a select box, specify select box properties in the options object in addition to the name and acceptedValues properties:
- <dx-html-editor>
- <dxo-toolbar>
- <dxi-item
- [options]="sizeFormatOptions"
- [acceptedValues]="sizeAcceptedValues"
- name="size"
- />
- </dxo-toolbar>
- </dx-html-editor>
- import { DxHtmlEditorModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- sizeAcceptedValues = ["11px", "14px", "16px"];
- sizeFormatOptions = { width: 150 };
- }
- @NgModule({
- imports: [
- // ...
- DxHtmlEditorModule
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.