DevExtreme v24.1 is now available.

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

Your search did not match any results.

React 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.

Backend API
import React, { useCallback, useState } from 'react'; import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor'; import ButtonGroup, { Item as ButtonItem } from 'devextreme-react/button-group'; import prettier from 'prettier/standalone'; import parserHtml from 'prettier/parser-html'; import { markup } from './data.ts'; import 'devextreme/ui/html_editor/converters/markdown'; const sizeValues = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']; const fontValues = ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana']; const defaultSelectedItemKeys = ['Html']; const fontSizeOptions = { inputAttr: { 'aria-label': 'Font size', }, }; const fontFamilyOptions = { inputAttr: { 'aria-label': 'Font family', }, }; export default function App() { const [valueContent, setValueContent] = useState(markup); const [editorValueType, setEditorValueType] = useState<'html' | 'markdown'>('html'); const valueChanged = useCallback((e: { value?: string; }) => { setValueContent(e.value); }, [setValueContent]); const valueTypeChanged = useCallback((e: { addedItems: { text: string; }[]; }) => { const newEditorValue = e.addedItems[0].text.toLowerCase() as 'html' | 'markdown'; setEditorValueType(newEditorValue); }, [setEditorValueType]); const prettierFormat = useCallback((text) => { if (editorValueType === 'html') { return prettier.format(text, { parser: 'html', plugins: [parserHtml], }); } return text; }, [editorValueType]); return ( <div className="widget-container"> <HtmlEditor height={300} defaultValue={valueContent} valueType={editorValueType} onValueChanged={valueChanged} > <Toolbar> <Item name="undo" /> <Item name="redo" /> <Item name="separator" /> <Item name="size" acceptedValues={sizeValues} options={fontSizeOptions} /> <Item name="font" acceptedValues={fontValues} options={fontFamilyOptions} /> <Item name="separator" /> <Item name="bold" /> <Item name="italic" /> <Item name="strike" /> <Item name="underline" /> <Item name="separator" /> <Item name="alignLeft" /> <Item name="alignCenter" /> <Item name="alignRight" /> <Item name="alignJustify" /> <Item name="separator" /> <Item name="color" /> <Item name="background" /> </Toolbar> </HtmlEditor> <div className="options"> <ButtonGroup onSelectionChanged={valueTypeChanged} defaultSelectedItemKeys={defaultSelectedItemKeys} > <ButtonItem text="Html" /> <ButtonItem text="Markdown" /> </ButtonGroup> <div className="value-content" tabIndex={0}> {prettierFormat(valueContent)} </div> </div> </div> ); }
import React, { useCallback, useState } from 'react'; import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor'; import ButtonGroup, { Item as ButtonItem } from 'devextreme-react/button-group'; import prettier from 'prettier/standalone'; import parserHtml from 'prettier/parser-html'; import { markup } from './data.js'; import 'devextreme/ui/html_editor/converters/markdown'; const sizeValues = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']; const fontValues = [ 'Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana', ]; const defaultSelectedItemKeys = ['Html']; const fontSizeOptions = { inputAttr: { 'aria-label': 'Font size', }, }; const fontFamilyOptions = { inputAttr: { 'aria-label': 'Font family', }, }; export default function App() { const [valueContent, setValueContent] = useState(markup); const [editorValueType, setEditorValueType] = useState('html'); const valueChanged = useCallback( (e) => { setValueContent(e.value); }, [setValueContent], ); const valueTypeChanged = useCallback( (e) => { const newEditorValue = e.addedItems[0].text.toLowerCase(); setEditorValueType(newEditorValue); }, [setEditorValueType], ); const prettierFormat = useCallback( (text) => { if (editorValueType === 'html') { return prettier.format(text, { parser: 'html', plugins: [parserHtml], }); } return text; }, [editorValueType], ); return ( <div className="widget-container"> <HtmlEditor height={300} defaultValue={valueContent} valueType={editorValueType} onValueChanged={valueChanged} > <Toolbar> <Item name="undo" /> <Item name="redo" /> <Item name="separator" /> <Item name="size" acceptedValues={sizeValues} options={fontSizeOptions} /> <Item name="font" acceptedValues={fontValues} options={fontFamilyOptions} /> <Item name="separator" /> <Item name="bold" /> <Item name="italic" /> <Item name="strike" /> <Item name="underline" /> <Item name="separator" /> <Item name="alignLeft" /> <Item name="alignCenter" /> <Item name="alignRight" /> <Item name="alignJustify" /> <Item name="separator" /> <Item name="color" /> <Item name="background" /> </Toolbar> </HtmlEditor> <div className="options"> <ButtonGroup onSelectionChanged={valueTypeChanged} defaultSelectedItemKeys={defaultSelectedItemKeys} > <ButtonItem text="Html" /> <ButtonItem text="Markdown" /> </ButtonGroup> <div className="value-content" tabIndex={0} > {prettierFormat(valueContent)} </div> </div> </div> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export 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>';
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, '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/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'showdown': 'npm:showdown@2.1.0/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@24.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.6/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', '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', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export 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>';
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></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%; }