Having trouble getting help?
Contact Support
Contact Support
Markdown to HTML preview in EJ2 JavaScript Markdown Editor Control
22 Mar 202513 minutes to read
The Markdown Editor provides an instant preview of Markdown changes, allowing users to see the formatted output while typing or editing text. This enhances the editing experience by enabling real-time visualization of Markdown formatting.
Enable Markdown Preview in EJ2 JavaScript Markdown Editor
To enable the Markdown preview feature, integrate the third-party Marked library, which converts Markdown content into HTML format. The following example demonstrates how to enable Markdown to HTML preview in the Markdown Editor.
ej.base.enableRipple(true);
var textArea;
var srcArea;
var splitObj = new ej.layouts.Splitter({
height: '450px',
resizing: onResizing,
created: updateOrientation,
width: '100%',
paneSettings: [
{
resizable: true,
size: '50%',
min: '40%',
},
{ min: '40%' },
],
});
splitObj.appendTo('#splitter-rte-markdown-preview');
var markdownRTE = new ej.richtexteditor.RichTextEditor({
height: '100%',
value:
'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
placeholder: 'Enter your text here...',
floatingToolbarOffset: 0,
editorMode: 'Markdown',
toolbarSettings: {
type: 'Expand',
enableFloating: false,
items: [
'Bold',
'Italic',
'StrikeThrough',
'|',
'Formats',
'Blockquote',
'OrderedList',
'UnorderedList',
'|',
'CreateLink',
'Image',
'CreateTable',
'|',
'Undo',
'Redo',
],
},
saveInterval: 1,
actionComplete: updateValue,
change: onChange,
showCharCount: true,
maxLength: 5000,
created: onCreate,
});
markdownRTE.appendTo('#markdown-editor');
function onChange() {
updateValue();
}
function onResizing() {
markdownRTE.refreshUI();
}
function onCreate() {
loadExternalFile();
textArea = markdownRTE.contentModule.getEditPanel();
srcArea = document.querySelector('.source-code');
}
function updateValue() {
srcArea.innerHTML = marked(markdownRTE.contentModule.getEditPanel().value);
}
function updateOrientation() {
if (ej.base.Browser.isDevice) {
splitObj.orientation = 'Vertical';
document.body.querySelector('.heading').style.width = 'auto';
}
}
function loadExternalFile() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js';
script.onload = function () {
updateValue();
};
document.getElementsByTagName('head')[0].appendChild(script);
}<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="default-section">
<div id="splitter-rte-markdown-preview">
<div class="splitter-default-content pane1">
<div id="markdown-editor"></div>
</div>
<div class="heading right">
<div>
<h6 class="title"><b>Markdown Preview</b></h6>
</div>
<div
class="splitter-default-content source-code pane2"
style="padding: 20px"
></div>
</div>
</div>
</div>
</div>
<style>
.heading {
float: left;
width: 50%;
position: relative;
box-sizing: border-box;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
}
.title {
color: #333333;
letter-spacing: 1px;
padding-left: 10px;
text-align: center;
margin: 15px 0;
}
.e-richtexteditor textarea.e-content {
float: left;
border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.e-richtexteditor .e-rte-content .e-content {
min-height: 150px;
}
.e-richtexteditor .e-rte-content {
overflow: hidden;
}
.bootstrap4 .e-icon-btn.e-active .e-md-preview::before {
content: '\e790';
}
.bootstrap4 .e-icon-btn .e-md-preview::before {
content: '\e787';
}
.tailwind .e-icon-btn.e-active .e-md-preview::before,
.tailwind-dark .e-icon-btn.e-active .e-md-preview::before,
.tailwind3 .e-icon-btn.e-active .e-md-preview::before,
.tailwind3-dark .e-icon-btn.e-active .e-md-preview::before,
.fluent .e-icon-btn.e-active .e-md-preview::before,
.fluent-dark .e-icon-btn.e-active .e-md-preview::before,
.fluent2 .e-icon-btn.e-active .e-md-preview::before,
.fluent2-dark .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5 .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5\.3 .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5\.3-dark .e-icon-btn.e-active .e-md-preview::before,
.bootstrap5-dark .e-icon-btn.e-active .e-md-preview::before,
.material3 .e-icon-btn.e-active .e-md-preview::before,
.material3-dark .e-icon-btn.e-active .e-md-preview::before {
content: '\e80e';
}
.tailwind .e-icon-btn .e-md-preview::before,
.tailwind-dark .e-icon-btn .e-md-preview::before,
.tailwind3 .e-icon-btn .e-md-preview::before,
.tailwind3-dark .e-icon-btn .e-md-preview::before,
.bootstrap5 .e-icon-btn .e-md-preview::before,
.bootstrap5\.3 .e-icon-btn .e-md-preview::before,
.bootstrap5\.3-dark .e-icon-btn .e-md-preview::before,
.bootstrap5-dark .e-icon-btn .e-md-preview::before,
.fluent .e-icon-btn .e-md-preview::before,
.fluent-dark .e-icon-btn .e-md-preview::before,
.fluent2 .e-icon-btn .e-md-preview::before,
.fluent2-dark .e-icon-btn .e-md-preview::before,
.material3 .e-icon-btn .e-md-preview::before,
.material3-dark .e-icon-btn .e-md-preview::before {
content: '\e7de';
}
.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';
}
.e-icon-btn .e-md-preview::before {
content: '\e345';
}
.e-rte-content .e-content {
float: right;
width: 50%;
overflow: auto;
height: inherit;
padding: 8px;
height: 100%;
}
.e-rte-content .e-content.e-pre-source {
width: 100%;
}
.highcontrast .e-richtexteditor textarea.e-content {
border-right: 1px solid #fff;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>