How to Define, Use and Enable Markdown Mode in JS Rich Text editor?

This article explains how to define, use and enable Markdown mode in Javascript RichTextEditor.

The Markdown is a markup language used to format plain text. The following are the advantages of using Markdown Editor:

• Easy to format
• Simple syntax
• User can easily convert it to HTML, Word, and more.
• Suitable for all platforms.

The Syncfusion JavaScript Rich Text Editor supports markdown editing and also HTML editing. The Markdown Editor can be configured by importing the MarkdownEditor module and setting the editorMode property to ‘Markdown’.

let editMode: RichTextEditor = new RichTextEditor({

               // Enabling Markdown mode in Syncfusion Rich Text Editor

               editorMode: ‘Markdown’

})

The following are some of the Markdown Editor tools configured with Rich Text Editor:

let editMode: RichTextEditor = new RichTextEditor({              

               editorMode: ‘Markdown’,

               toolbarSettings: {

                items: [ “Bold”, “Italic”, “StrikeThrough”, “|”, “Formats”, “OrderedList”, “Unorderedlist”,

                “CreateLink”, “Image”, “CreateTable”, “|”, “Undo”, “Redo”]

           }

})

Figure 1: Syncfusion Markdown Editor

This Markdown Editor provides options for formatting, alignments, inserting links and tables. You can perform formatting with the editor in your convenient ways using the keyboard interaction or by toolbar actions. The code preview of the editor is an additional support, in which the marked syntax is converted to the valid HTML format using the marked library. 

Conclusion

We hope you enjoyed learning about how to use a markdown editor.

You can refer to our JavaScript Rich Text editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.  You can also explore our  JavaScript Rich Text editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls..

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!