Search results

Markdown

When you format the word in Markdown format, you should add Markdown syntax to the word to indicate the words and phrases that looks different from each other.

RichTextEditor supports markdown editing when the editorMode set as markdown and using both keyboard interaction and toolbar action, you can apply the formatting to text.

To create RichTextEditor with Markdown editing feature, inject the MarkdownEditor module to the RTE using the RichTextEditor.Inject(MarkdownEditor) method.

Supported tools

The editor’s toolbar contains commands to format the markdown content. The toolbar consists of:

Tools Description Syntax in MD
Lists Ordered and unordered list types. For unorder list, preceding one or more lines of text with - or *.
Links A hyperlink can be inserted into the editor for quick access to related information. Create an inline link by wrapping link text in brackets [], and then wrapping the URL in parentheses ().
Image Inserts and manages images. Create an image by wrapping an alternative text in brackets [], and then link of the image source in parentheses ().
Format Formats the sentence in different ways such as heading level, quotation, and code snippet. For heading, Add one to six # symbols before your heading text.
Styles Allows you to apply inline styles to the selected content like bold, italic, and more. For bold, add ** or __ to front and back of the text.

Markdown to HTML

The rich text editor allows you to preview markdown changes immediately using preview. In this sample, the third-party library Marked is used to convert markdown into HTML content.

This sample demonstrates how to preview markdown changes in rich text editor. Type or edit the display text, and apply format to view the preview of markdown. The actionComplete event can be used to convert Markdown to HTML.

This sample demonstrates how to preview markdown changes in rich text editor. Type or edit the display text and apply format to view the preview of markdown.

Source
Preview
index.js
index.html
/**
 * RichTextEditor Markdown Preview Sample
 */
var textArea;
var mdsource;
var htmlPreview;

var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: '300px', editorMode: 'Markdown',
    toolbarSettings: {
        items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|',
            { tooltipText: 'Preview', template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                '<span class="e-btn-icon e-md-preview e-icons"></span></button>' }, '|', 'Undo', 'Redo']
    },
    created: () => {
        textArea = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
        textArea.addEventListener('keyup', (e: KeyboardEventArgs) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (e: MouseEvent) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
              
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
               
            }
        });
    },
    
});
defaultRTE.appendTo('#defaultRTE');
function markDownConversion(): void {
    if (mdsource.classList.contains('e-active')) {
        var id = defaultRTE.getID() + 'html-view';
        var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');
        var rteElement = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
        var rteValue = rteElement.value;
        htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value);
    }
}
function fullPreview(e: { [key: string]: string | boolean }): void {
    var id = defaultRTE.getID() + 'html-preview';
    htmlPreview = defaultRTE.element.querySelector('#' + id);
    if (mdsource.classList.contains('e-active')) {
        mdsource.classList.remove('e-active');
        mdsource.parentElement.title = 'Preview';
        textArea.style.display = 'block';
        textArea.style.width = '100%';
        htmlPreview.style.display = 'none';
    } else {
        mdsource.classList.add('e-active');
        if (!htmlPreview) {
            htmlPreview = createElement('div', { className: 'e-content' });
            htmlPreview.id = id;
            textArea.parentNode.appendChild(htmlPreview);
        }
        if (e.type === 'preview') {
            textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
        } else {
            htmlPreview.classList.remove('e-pre-source');
            textArea.style.width = '50%';
        }
        htmlPreview.style.display = 'block';
        markDownConversion();
        mdsource.parentElement.title = 'Code View';
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
   
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <div id="defaultRTE">
In RichTextEditor , 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

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We 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            
        </div>
    </div>
    <style>
        .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;
        }
    
        .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;
        }
    
        .sb-header {
            z-index: 100;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Table

Rich Text Editor allows to insert Markdown table in edit panel with 2 X 2 rows and columns along with the heading. To use table tool, add the CreateTable item in toolbar items.

Insert table

To insert the table in RichTextEditor, click the table toolbar option to insert the table into rich text editor content and this is the default way in all the devices. Please refer the below sample and code snippets to add the table in Markdown editor

Source
Preview
index.js
index.html
/**
 * RichTextEditor Markdown Preview Sample
 */
var textArea;
var mdsource;
var htmlPreview;

var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: '300px', editorMode: 'Markdown',
    toolbarSettings: {
        items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|',
            { tooltipText: 'Preview', template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                '<span class="e-btn-icon e-md-preview e-icons"></span></button>' }, '|', 'Undo', 'Redo']
    },
    created: () => {
        textArea = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
        textArea.addEventListener('keyup', (e: KeyboardEventArgs) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (e: MouseEvent) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
              
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
               
            }
        });
    },
    
});
defaultRTE.appendTo('#defaultRTE');
function markDownConversion(): void {
    if (mdsource.classList.contains('e-active')) {
        var id = defaultRTE.getID() + 'html-view';
        var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');
        var rteElement = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
        var rteValue = rteElement.value;
        htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value);
    }
}
function fullPreview(e: { [key: string]: string | boolean }): void {
    var id = defaultRTE.getID() + 'html-preview';
    htmlPreview = defaultRTE.element.querySelector('#' + id);
    if (mdsource.classList.contains('e-active')) {
        mdsource.classList.remove('e-active');
        mdsource.parentElement.title = 'Preview';
        textArea.style.display = 'block';
        textArea.style.width = '100%';
        htmlPreview.style.display = 'none';
    } else {
        mdsource.classList.add('e-active');
        if (!htmlPreview) {
            htmlPreview = createElement('div', { className: 'e-content' });
            htmlPreview.id = id;
            textArea.parentNode.appendChild(htmlPreview);
        }
        if (e.type === 'preview') {
            textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
        } else {
            htmlPreview.classList.remove('e-pre-source');
            textArea.style.width = '50%';
        }
        htmlPreview.style.display = 'block';
        markDownConversion();
        mdsource.parentElement.title = 'Code View';
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
   
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <div id="defaultRTE">
In RichTextEditor , 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

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We 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            
        </div>
    </div>
    <style>
        .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;
        }
    
        .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;
        }
    
        .sb-header {
            z-index: 100;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Changing table constants

The Markdown table constants can be changed for the table heading and the column name.

Source
Preview
index.js
index.html
/**
 * RichTextEditor Markdown Preview Sample
 */
var textArea;
var mdsource;
var htmlPreview;

var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: '300px', editorMode: 'Markdown',
    toolbarSettings: {
        items: ['Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|',
            { tooltipText: 'Preview', template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                '<span class="e-btn-icon e-md-preview e-icons"></span></button>' }, '|', 'Undo', 'Redo']
    },
    created: () => {
        textArea = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
        textArea.addEventListener('keyup', (e: KeyboardEventArgs) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (e: MouseEvent) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
              
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo']);
               
            }
        });
    },
    
});
defaultRTE.appendTo('#defaultRTE');
function markDownConversion(): void {
    if (mdsource.classList.contains('e-active')) {
        var id = defaultRTE.getID() + 'html-view';
        var htmlPreview = document.body.querySelector('#defaultRTEhtml-preview');
        var rteElement = defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement;
        var rteValue = rteElement.value;
        htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel() as HTMLTextAreaElement).value);
    }
}
function fullPreview(e: { [key: string]: string | boolean }): void {
    var id = defaultRTE.getID() + 'html-preview';
    htmlPreview = defaultRTE.element.querySelector('#' + id);
    if (mdsource.classList.contains('e-active')) {
        mdsource.classList.remove('e-active');
        mdsource.parentElement.title = 'Preview';
        textArea.style.display = 'block';
        textArea.style.width = '100%';
        htmlPreview.style.display = 'none';
    } else {
        mdsource.classList.add('e-active');
        if (!htmlPreview) {
            htmlPreview = createElement('div', { className: 'e-content' });
            htmlPreview.id = id;
            textArea.parentNode.appendChild(htmlPreview);
        }
        if (e.type === 'preview') {
            textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
        } else {
            htmlPreview.classList.remove('e-pre-source');
            textArea.style.width = '50%';
        }
        htmlPreview.style.display = 'block';
        markDownConversion();
        mdsource.parentElement.title = 'Code View';
    }
}
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
   
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <div id="defaultRTE">
In RichTextEditor , 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

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We 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            
        </div>
    </div>
    <style>
        .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;
        }
    
        .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;
        }
    
        .sb-header {
            z-index: 100;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Custom format

The rich text editor allows you to customize the markdown syntax by overriding its default syntax. Configure the customized markdown syntax using the formatter property.

This sample demonstrates how to customize tags of markdown formatting.

For example, apply ‘+’ to Unordered list, apply ‘2’ to Ordered list, for bold, ‘_’, and for italic ‘’.

Source
Preview
index.js
index.html
// initialize RichTextEditor component with define your own formats for MD
var defaultRTE = new ej.richtexteditor.RichTextEditor({
    height: '260px',
    toolbarSettings: {
        items: ['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', '|','Undo', 'Redo']
    },
    editorMode: 'Markdown',
    formatter: new MarkdownFormatter({
        listTags: { 'OL': '2. ', 'UL': '+ ' },
        formatTags: {
            'Blockquote': '> '
        },
        selectionTags: {'Bold': '__',  'Italic': '_'}
    })
});
defaultRTE.appendTo('#defaultRTE');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-richtexteditor/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
     <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
   
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <div id="defaultRTE">
In RichTextEditor , 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

RichTextEditor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text.

We 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            
        </div>
    </div>
    <style>
        .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;
        }
    
        .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;
        }
    
        .sb-header {
            z-index: 100;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also