Getting started in EJ2 JavaScript Markdown Editor control

5 Jun 202610 minutes to read

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

Dependencies

The following list of dependencies are required to use the Rich Text Editor control in the application.

|-- @syncfusion/ej2-richtexteditor
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-splitbuttons
    |-- @syncfusion/ej2-filemanager

Setup for local development

Refer to the following steps to set up your local environment.

Step 1: Create an app folder my-app for Essential JS 2 JavaScript controls.

Step 2: Create a my-app/resources folder to store local scripts and styles files.

Step 3: Open Visual Studio Code and create my-app/index.js and my-app/index.html files for initializing the Essential JS 2 Markdown Editor control.

Adding Markdown Editor styles

Add the following styles inside the my-app/index.html file to include the tailwind3 theme styles:

index.html
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet">

IMPORTANT

Ensure that all Syncfusion Markdown Editor theme style files are loaded in the exact order shown above. The order is important because these styles have dependencies, and loading them incorrectly may cause styling issues in the controls. You can also refer to the themes section for details about built-in themes and CSS references for individual controls.

Adding Markdown Editor scripts

Add the following scripts inside the my-app/index.html file to include the Markdown Editor functionality:

index.html
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-filemanager/dist/global/ej2-filemanager.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/ej2/33.2.3/ej2-richtexteditor/dist/global/ej2-richtexteditor.min.js" type="text/javascript"></script>

IMPORTANT

Ensure that all Syncfusion Markdown Editor script files are loaded in the correct order and included before initializing the control. The order is important because the scripts have dependencies, and loading them incorrectly may prevent the Markdown Editor from working properly or cause runtime errors.
Make sure the required base and dependent scripts are included along with the Markdown Editor script.

Adding Markdown Editor control

To get started, add the Markdown Editor control in index.js and index.html files. Markdown Editor can be initialized through div element or textarea element.

Markdown Editor can be initialized on div element as shown below:

index.js
index.html
var editor = new ej.richtexteditor.RichTextEditor({
    editorMode: 'Markdown'
});

editor.appendTo("#editor");
<!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="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet">
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-base/dist/global/ej2-base.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-buttons/dist/global/ej2-buttons.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-inputs/dist/global/ej2-inputs.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-lists/dist/global/ej2-lists.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-popups/dist/global/ej2-popups.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-navigations/dist/global/ej2-navigations.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-filemanager/dist/global/ej2-filemanager.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-richtexteditor/dist/global/ej2-richtexteditor.min.js"
        type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="editor"></div>
    </div>

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

</html>

Run the application

Now, run the index.html in web browser, it will render the Essential JS 2 Markdown Editor control.

Output will be displayed as follows.

index.js
index.html
var editor = new ej.richtexteditor.RichTextEditor({
    editorMode: 'Markdown'
});

editor.appendTo("#editor");
<!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="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-lists/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-richtexteditor/styles/tailwind3.css" rel="stylesheet">
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-base/dist/global/ej2-base.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-buttons/dist/global/ej2-buttons.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-inputs/dist/global/ej2-inputs.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-lists/dist/global/ej2-lists.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-popups/dist/global/ej2-popups.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-navigations/dist/global/ej2-navigations.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-filemanager/dist/global/ej2-filemanager.min.js"
        type="text/javascript"></script>
    <script src="http://cdn.syncfusion.com/ej2/33.2.10/ej2-richtexteditor/dist/global/ej2-richtexteditor.min.js"
        type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="editor"></div>
    </div>

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

</html>

You can refer to our JavaScript Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Markdown Editor example that shows how to render the markdown editor.

Search docs

Ask Syncfusion AI Assistant