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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div class="widget-container"> <DxHtmlEditor v-model:value="valueContent" :height="300" :converter="converter" > <DxToolbar> <DxItem name="undo"/> <DxItem name="redo"/> <DxItem name="separator"/> <DxItem name="bold"/> <DxItem name="italic"/> <DxItem name="separator"/> <DxItem name="header" :accepted-values="headerValues" :options="headerOptions" /> <DxItem name="separator"/> <DxItem name="orderedList"/> <DxItem name="bulletList"/> </DxToolbar> </DxHtmlEditor> <div class="options"> <div class="value-title"> Markdown Preview </div> <div class="value-content" tabindex="0" > {{ valueContent }} </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { unified } from "unified"; import remarkParse from "remark-parse"; import remarkRehype from "remark-rehype"; import remarkStringify from "remark-stringify"; import rehypeParse from "rehype-parse"; import rehypeRemark from "rehype-remark"; import rehypeStringify from "rehype-stringify"; import { DxHtmlEditor, DxToolbar, DxItem, } from 'devextreme-vue/html-editor'; import { markup } from './data.ts'; const valueContent = ref(markup); const headerValues = [false, 1, 2, 3, 4, 5]; const headerOptions = { inputAttr: { 'aria-label': 'Header' } }; 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; }, }; </script> <style> .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%; } </style>

export 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**. `;

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!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/25.1.3/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>