$(() => {
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.5/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.5/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>';