Search results

Markdown

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.

Supported Tools

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

Tools Description
Lists Ordered and unordered list types.
Links A hyperlink can be inserted into the editor for quick access to related information.
Image Inserts and manages images.
Format Formats the sentence in different ways such as heading level, quotation, and code snippet.
Styles Allows you to apply inline styles to the selected content like bold, italic, and more.
Table A table can be insert into the editor.

Markdown to HTML

The RichTextEditor allows you to preview markdown changes immediately using preview. The third-party library Marked is used in this sample to convert markdown into HTML content.

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

razor
controller.cs
@using Syncfusion.EJ2.RichTextEditor

<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").EditorMode(EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).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']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        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 = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.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';
        }
    }
</script>
<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;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            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>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"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](http://npmci.syncfusion.com/development/demos/#/material/rte/markdown-editor-custom-format.html).

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}

Table

RichTextEditor 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 RichTextEditor 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

razor
controller.cs
@using Syncfusion.EJ2.RichTextEditor

<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").EditorMode(EditorMode.Markdown).ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        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 = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.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';
        }
    }
</script>
<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;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            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>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"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.

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}

Changing Table Constants

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

razor
controller.cs
<div class="control-wrapper">
    <div class="control-section">
        @Html.EJS().RichTextEditor("markdown").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value((string)ViewBag.value).Created("created").Render()
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
    L10n.load({
        'en-US': {
            'richtexteditor': {
                'TableHeadingText': 'Header',
                'TableColText': 'Cell'
            }
        }
    });
</script>
<script type="text/javascript">
    var mdsource, defaultRTE, textArea;
    function created() {
        defaultRTE = this;
        textArea = defaultRTE.contentModule.getEditPanel();
        textArea.addEventListener('keyup', (event) => { markDownConversion(); });
        var rteObj = defaultRTE;
        mdsource = document.getElementById('preview-code');
        mdsource.addEventListener('click', (event) => {
            fullPreview({ mode: true, type: 'preview' });
            if ((event.currentTarget).classList.contains('e-active')) {
                defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            } else {
                defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                    'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
            }
        });
    };
    function markDownConversion() {
        if (mdsource.classList.contains('e-active')) {
            var id = defaultRTE.getID() + 'html-preview';
            var htmlPreview = defaultRTE.element.querySelector('#' + id);
            var rteElement = defaultRTE.contentModule.getEditPanel();
            var rteValue = rteElement.value;
            htmlPreview.innerHTML = marked(defaultRTE.value);
        }
    };
    function fullPreview(event) {
        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 = ej.base.createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (event.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';
        }
    }
</script>
<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;
        overflow: auto;
        height: inherit;
        padding: 8px;
        height: 100%;
    }

    .e-rte-content .e-content.e-pre-source {
        width: 100%;
    }
</style>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        object tools1 = new
        {
            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>"
        };
        ViewBag.items = new[] { "Bold", "Italic", "StrikeThrough", "|", "Formats", "OrderedList", "UnorderedList", "|", "CreateLink", "Image", "CreateTable", "|", tools1, "|", "Undo", "Redo" };

        ViewBag.value = @"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.

The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content";
        return View();
    }
}

See Also