DevExtreme v24.2 is now available.

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

Your search did not match any results.

JavaScript/jQuery Html Editor - Markdown Support

The DevExtreme HTML Editor uses HTML markup to format document content. This demo module converts content to Markdown using the unified plugin library.

This sample implementation sets the HTML Editor's converter property to an object that implements two functions: toHtml and fromHtml.

To review our implementation, edit or format text within the HTML Editor control and see how the Markdown Preview section reflects changes.

Backend API
$(() => { const updateValueContent = (value) => { $('.value-content').text(value); }; const converter = { toHtml(value) { const result = unified() .use(remarkParse) .use(remarkRehype) .use(rehypeStringify) .processSync(value) .toString(); return result; }, fromHtml(value) { const result = unified() .use(rehypeParse) .use(rehypeRemark) .use(remarkStringify) .processSync(value) .toString(); return result; } }; const editorInstance = $('.html-editor').dxHtmlEditor({ height: 300, converter, value: markup, toolbar: { items: [ 'undo', 'redo', 'separator', 'bold', 'italic', 'separator', { name: 'header', acceptedValues: [false, 1, 2, 3, 4, 5], options: { inputAttr: { 'aria-label': 'Header' } }, }, 'separator', 'orderedList', 'bulletList', ], }, onValueChanged({ value }) { updateValueContent(value); }, }).dxHtmlEditor('instance'); updateValueContent(markup); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <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/24.2.7/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/devextreme-quill@1.7.1/dist/dx-quill.min.js"></script> <script type="module"> import { unified } from "https://esm.sh/unified@11?bundle"; import remarkParse from "https://esm.sh/remark-parse@11?bundle"; import remarkRehype from "https://esm.sh/remark-rehype@11?bundle"; import rehypeStringify from "https://esm.sh/rehype-stringify@10?bundle"; import rehypeParse from "https://esm.sh/rehype-parse@9?bundle"; import rehypeRemark from "https://esm.sh/rehype-remark@10?bundle"; import remarkStringify from "https://esm.sh/remark-stringify@11?bundle"; window.unified = unified; window.remarkParse = remarkParse; window.remarkRehype = remarkRehype; window.rehypeStringify = rehypeStringify; window.rehypeParse = rehypeParse; window.rehypeRemark = rehypeRemark; window.remarkStringify = remarkStringify; </script> <script src="js/dx.all.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-title">Markdown Preview</div> <div class="value-content" tabindex="0"></div> </div> </div> </body> </html>
.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; margin-bottom: 22px; } .value-title { font-size: var(--dx-font-size-sm); font-weight: 500; } .value-content { margin-top: 20px; overflow: auto; height: 210px; white-space: pre-wrap; border: 1px solid var(--dx-color-border); padding: 16px; background-color: var(--dx-color-main-bg); } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); box-sizing: border-box; width: 100%; }
const markup = `## ![HtmlEditor](../../../../images/widgets/HtmlEditor.svg) Formatted Text Editor (HTML Editor) Lists: 1. Use numbers followed by a period for an ordered list. 1. Use a single asterisk for a bullet list. Formats: * Enclose a word in single asterisks for *italic*. * Enclose a word in double asterisks for **bold**. `;