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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<template>
<div class="widget-container">
<DxHtmlEditor
v-model:value="valueContent"
:value-type="editorValueType"
:height="300"
>
<DxToolbar>
<DxItem name="undo"/>
<DxItem name="redo"/>
<DxItem name="separator"/>
<DxItem
name="size"
:accepted-values="sizeValues"
:options="fontSizeOptions"
/>
<DxItem
name="font"
:accepted-values="fontValues"
:options="fontFamilyOptions"
/>
<DxItem name="separator"/>
<DxItem name="bold"/>
<DxItem name="italic"/>
<DxItem name="strike"/>
<DxItem name="underline"/>
<DxItem name="separator"/>
<DxItem name="alignLeft"/>
<DxItem name="alignCenter"/>
<DxItem name="alignRight"/>
<DxItem name="alignJustify"/>
<DxItem name="separator"/>
<DxItem name="color"/>
<DxItem name="background"/>
</DxToolbar>
</DxHtmlEditor>
<div class="options">
<DxButtonGroup v-model:selected-items="selectedItems">
<DxButtonGroupItem text="Html"/>
<DxButtonGroupItem text="Markdown"/>
</DxButtonGroup>
<div class="value-content">{{ prettierFormat(valueContent) }}</div>
</div>
</div>
</template>
<script>
import {
DxHtmlEditor,
DxToolbar,
DxItem,
} from 'devextreme-vue/html-editor';
import {
DxButtonGroup,
DxItem as DxButtonGroupItem,
} from 'devextreme-vue/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';
export default {
components: {
DxHtmlEditor,
DxToolbar,
DxItem,
DxButtonGroup,
DxButtonGroupItem,
},
data() {
return {
valueContent: markup,
selectedItems: [{ text: 'Html' }],
sizeValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'],
fontValues: ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana'],
fontSizeOptions: { inputAttr: { 'aria-label': 'Font size' } },
fontFamilyOptions: { inputAttr: { 'aria-label': 'Font family' } },
};
},
computed: {
editorValueType() {
return this.selectedItems[0].text.toLowerCase();
},
},
methods: {
prettierFormat(text) {
if (this.editorValueType === 'html') {
return prettier.format(text, {
parser: 'html',
plugins: [parserHtml],
});
}
return text;
},
},
};
</script>
<style>
.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%;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html>
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
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.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.3.4/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'devextreme-showdown': 'npm:devextreme-showdown@1.0.1/dist/showdown.js',
'turndown': 'npm:turndown@7.1.2/lib/turndown.browser.umd.js',
'mitt': 'npm:mitt/dist/mitt.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@23.1.5/cjs',
'devextreme-vue': 'npm:devextreme-vue@23.1.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'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',
'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.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);