Your search did not match any results.

Output Formats

Our HtmlEditor outputs the markup in HTML and Markdown formats. To specify the format, use the valueType property. If you use Markdown, link the turndown and devextreme-showdown libraries before the DevExtreme scripts.

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.

Prev Demo
Next Demo
Backend API
$(() => { const formatOutput = (value, valueType) => { const formattedValue = valueType === 'html' ? prettierFormat(value) : value; $('.value-content').text(formattedValue); }; const editorInstance = $('.html-editor').dxHtmlEditor({ height: 300, value: markup, 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', ], }, onValueChanged({ component, value }) { formatOutput(value, component.option('valueType')); }, }).dxHtmlEditor('instance'); $('.value-types').dxButtonGroup({ items: [{ text: 'Html' }, { text: 'Markdown' }], selectedItemKeys: ['Html'], onSelectionChanged(e) { const valueType = e.addedItems[0].text.toLowerCase(); editorInstance.option({ valueType }); const value = editorInstance.option('value'); formatOutput(value, valueType); }, }); formatOutput(markup, 'html'); }); function prettierFormat(markup) { return prettier.format(markup, { parser: 'html', plugins: prettierPlugins, }); }
<!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.6/css/dx.light.css" /> <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.6/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"> <div class="html-editor"></div> <div class="options"> <div class="value-types"></div> <div class="value-content"></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>';