DevExtreme v23.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Output Formats

Our HtmlEditor can output the markup in HTML and Markdown formats. To specify the format, use the valueType property. If you use Markdown, import the Markdown converter as described in the valueType article.

The HtmlEditor stores the markup in the value property. In this demo, the value is displayed under the HtmlEditor. You can click the Html and Markdown buttons to switch between output formats.

Backend API
<dx-html-editor [height]="300" [(valueType)]="editorValueType" [(value)]="valueContent" > <dxo-toolbar> <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']" [options]="{ inputAttr: { 'aria-label': 'Font size' } }" ></dxi-item> <dxi-item name="font" [acceptedValues]="[ 'Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana' ]" [options]="{ inputAttr: { 'aria-label': 'Font family' } }" ></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="color"></dxi-item> <dxi-item name="background"></dxi-item> </dxo-toolbar> </dx-html-editor> <div class="options"> <dx-button-group (onSelectionChanged)="onValueTypeChanged($event)" [selectedItemKeys]="['Html']" > <dxi-item text="Html"></dxi-item> <dxi-item text="Markdown"></dxi-item> </dx-button-group> <div class="value-content" tabindex="0">{{ prettierFormat(valueContent) }}</div> </div>
import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import 'devextreme/ui/html_editor/converters/markdown'; import prettier from 'prettier/standalone'; import parserHtml from 'prettier/parser-html'; import { DxHtmlEditorModule, DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor'; import { DxButtonGroupModule, DxButtonGroupTypes } from 'devextreme-angular/ui/button-group'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service], }) export class AppComponent { valueContent: string; editorValueType: DxHtmlEditorTypes.MarkupType = 'html'; constructor(service: Service) { this.valueContent = service.getMarkup(); } onValueTypeChanged({ addedItems }: DxButtonGroupTypes.SelectionChangedEvent) { this.editorValueType = addedItems[0].text.toLowerCase(); } prettierFormat(markup: string) { if (this.editorValueType === 'html') { return prettier.format(markup, { parser: 'html', plugins: [parserHtml], }); } return markup; } } @NgModule({ imports: [ BrowserModule, BrowserTransferStateModule, DxHtmlEditorModule, DxButtonGroupModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; } ::ng-deep .value-content { margin-top: 20px; overflow: auto; height: 110px; width: 100%; white-space: pre-wrap; } ::ng-deep .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); box-sizing: border-box; width: 100%; }
import { Injectable } from '@angular/core'; const markup = '<h2><img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor"> Formatted Text Editor (HTML Editor)</h2><p><br></p><p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML or Markdown.</p>'; @Injectable() export class Service { getMarkup(): string { return markup; } }
// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.17', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17', '@angular/forms': 'npm:@angular/forms@12.2.17', '@angular/common': 'npm:@angular/common@12.2.17', '@angular/compiler': 'npm:@angular/compiler@12.2.17', 'tslib': 'npm:tslib@2.6.2/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'devextreme-showdown': 'npm:devextreme-showdown@1.0.1/dist/showdown.js', 'turndown': 'npm:turndown@7.1.2/lib/turndown.browser.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@23.2.5/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@23.2.5/bundles/dx.all.js', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51', 'devextreme-angular': 'npm:devextreme-angular@23.2.5', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.17/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@23.2.5/*/package.json', 'npm:devextreme-angular@23.2.5/ui/*/package.json', 'npm:devextreme-angular@23.2.5/package.json', 'npm:devexpress-diagram@2.2.5/package.json', 'npm:devexpress-gantt@4.1.51/package.json', ], }; System.config(window.config);
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>