DevExtreme v23.1 is now available.

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

Free Trial Buy
    Your search did not match any results.
    Html Editor

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.editorValue = markup; $scope.prettierFormat = function (markup) { return prettier.format(markup, { parser: 'html', plugins: prettierPlugins, }); }; $scope.htmlEditorOptions = { height: 300, toolbar: { items: [ 'undo', 'redo', 'separator', { name: 'size', acceptedValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'], options: { inputAttr: { 'aria-label': 'Font size', }, }, }, { name: 'font', acceptedValues: ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana'], options: { inputAttr: { 'aria-label': 'Font family', }, }, }, 'separator', 'bold', 'italic', 'strike', 'underline', 'separator', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'separator', 'color', 'background', ], }, bindingOptions: { value: 'editorValue', valueType: 'editorValueType', prettierFormat: 'prettierFormat', }, }; $scope.buttonGroupOptions = { items: [{ text: 'Html' }, { text: 'Markdown' }], selectedItemKeys: ['Html'], onSelectionChanged(e) { $scope.editorValueType = e.addedItems[0].text.toLowerCase(); }, }; });
    <!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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://unpkg.com/devextreme-quill@1.6.2/dist/dx-quill.min.js"></script> <script src="https://unpkg.com/turndown@7.1.2/dist/turndown.js"></script> <script src="https://unpkg.com/devextreme-showdown@1.0.1/dist/showdown.js"></script> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <script src="https://unpkg.com/prettier@2.8.4/standalone.js"></script> <script src="https://unpkg.com/prettier@2.8.4/parser-html.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div dx-html-editor="htmlEditorOptions"></div> <div class="options"> <div dx-button-group="buttonGroupOptions"></div> <div class="value-content" ng-bind="prettierFormat(editorValue)"></div> </div> </div> </body> </html>
    .dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; } .value-content { margin-top: 20px; overflow: auto; height: 110px; width: 100%; white-space: pre-wrap; } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); box-sizing: border-box; width: 100%; }
    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>';