Angular HtmlEditor - Getting Started
This tutorial explains how to add an HTML Editor to a page and configure its core features. The following control demonstrates the result:
Refer to the following sections for details on each configuration step. You can also find the full code in the GitHub repository.
Create an HtmlEditor
The HTML Editor uses the DevExtreme Quill library. This library is installed automatically when you add DevExtreme to your application. To create an HTML Editor on your page, use the following code:
- <dx-html-editor>
- <!-- Configuration goes here -->
- </dx-html-editor>
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
- })
- export class AppComponent {
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxHtmlEditorModule } from 'devextreme-angular';
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxHtmlEditorModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
Set the Initial Value
The control stores the document markup in the value property. You can also declare HTML content inside the HTML Editor element.
- <dx-html-editor>
- <h2>
- <img src="assets/images/HtmlEditor.svg" alt="HTML Editor">
- Rich Text Editor (HTML Editor)
- </h2>
- <br>
- <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG editor that allows its users to format textual and visual content and output it as HTML.</p>
- <p>Supported features:</p>
- <ul>
- <li>Inline formats:
- <ul>
- <li><strong>Bold</strong>, <em>italic</em>, <s>strikethrough</s> text formatting</li>
- <li>Typeface, font size, text color changes (HTML only)</li>
- </ul>
- </li>
- <li>Block formats:
- <ul>
- <li>Headers</li>
- <li>Lists (ordered and unordered)</li>
- <li>Code blocks</li>
- <li>Quotes</li>
- </ul>
- </li>
- <li>Built-in format customization</li>
- <li>Mail Merge</li>
- <li>Adaptive toolbar for working with images, links, and color formats</li>
- <li>Copy-paste rich content (the control strips unsupported formats)</li>
- <li>Embedded images specified as a link to an image file or as base64-encoded binary data</li>
- <li>Mention (for example, @person)</li>
- <li>Tables</li>
- </ul>
- <br>
- <p>The editor supports the following frameworks and libraries:</p>
- <table>
- <tr>
- <td><strong>jQuery</strong></td>
- <td>v2.1 - v2.2 and v3.x</td>
- </tr>
- <tr>
- <td><strong>Angular</strong></td>
- <td>v7.0.x - v11.0.x</td>
- </tr>
- <tr>
- <td><strong>React</strong></td>
- <td>v16.2+</td>
- </tr>
- <tr>
- <td><strong>Vue</strong></td>
- <td>v2.6.3+</td>
- </tr>
- </table>
- </dx-html-editor>
- ::ng-deep .dx-htmleditor-content img {
- vertical-align: middle;
- }
- ::ng-deep .dx-htmleditor-content table {
- width: 50%;
- }
- ::ng-deep .dx-htmleditor-content table td:last-child {
- text-align: right;
- }
Configure the Toolbar
The HTML Editor's toolbar contains buttons and drop-down menus that allow users to edit and format content. To configure the toolbar, specify an array of items in the toolbar object. You can use predefined items or create custom items. You can specify a list of accepted values for certain predefined items, such as font size. To do so, use the name property to define the item and the acceptedValues property to assign an array of available values.
If toolbar items overflow the length of the toolbar, enable the multiline property to arrange the items in multiple lines.
- <dx-html-editor ... >
- <dxo-toolbar [multiline]="true">
- <dxi-item name="undo"></dxi-item>
- <dxi-item name="redo"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="size" [acceptedValues]="['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']"></dxi-item>
- <dxi-item name="font" [acceptedValues]="['Arial', 'Georgia', 'Tahoma', 'Times New Roman', 'Verdana']"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="bold"></dxi-item>
- <dxi-item name="italic"></dxi-item>
- <dxi-item name="strike"></dxi-item>
- <dxi-item name="underline"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="alignLeft"></dxi-item>
- <dxi-item name="alignCenter"></dxi-item>
- <dxi-item name="alignRight"></dxi-item>
- <dxi-item name="alignJustify"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="orderedList"></dxi-item>
- <dxi-item name="bulletList"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="header" [acceptedValues]="[false, 1, 2, 3, 4, 5]"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="color"></dxi-item>
- <dxi-item name="background"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="link"></dxi-item>
- <dxi-item name="image"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- <dxi-item name="clear"></dxi-item>
- <dxi-item name="codeBlock"></dxi-item>
- <dxi-item name="blockquote"></dxi-item>
- <dxi-item name="separator"></dxi-item>
- </dxo-toolbar>
- </dx-html-editor>
Work with Tables
Users can insert and modify tables if you add the following items to the toolbar:
- <dx-html-editor ... >
- <dxo-toolbar ... >
- <!-- ... -->
- <dxi-item name="insertTable"></dxi-item>
- <dxi-item name="deleteTable"></dxi-item>
- <dxi-item name="insertRowAbove"></dxi-item>
- <dxi-item name="insertRowBelow"></dxi-item>
- <dxi-item name="deleteRow"></dxi-item>
- <dxi-item name="insertColumnLeft"></dxi-item>
- <dxi-item name="insertColumnRight"></dxi-item>
- <dxi-item name="deleteColumn"></dxi-item>
- <dxi-item name="cellProperties"></dxi-item>
- <dxi-item name="tableProperties"></dxi-item>
- </dxo-toolbar>
- </dx-html-editor>
Users can also modify tables with the context menu if you set the tableContextMenu.enabled property to true. Note that the context menu cannot be used to create new tables because the menu is only available within table boundaries. If you want users to create tables, add an "insertTable" item to the toolbar.
- <dx-html-editor ... >
- <dxo-toolbar ... >
- <!-- ... -->
- <dxi-item name="insertTable"></dxi-item>
- </dxo-toolbar>
- <dxo-table-context-menu
- [enabled]="true">
- </dxo-table-context-menu>
- </dx-html-editor>
The HTML Editor tables are native HTML tables that use native features; therefore, the same limitations apply. For example, users cannot paste multiline text in separate cells.
The HTML Editor tables do not support complex elements in cells, such as block elements, lists, nested tables, etc.
Resize Images
Users can resize images embedded within the content. To enable this functionality, set the mediaResizing.enabled property to true:
- <dx-html-editor ... >
- <!-- ... -->
- <dxo-media-resizing
- [enabled]="true">
- </dxo-media-resizing>
- </dx-html-editor>
For further information on the HTML Editor component, refer to the following resources:
If you have technical questions, please create a support ticket in the DevExpress Support Center.