Example of Preview in Javascript Rich Text Editor Control

All Controls
/
Rich Text Editor
/
Preview

This example illustrates how to preview Markdown changes within the Rich Text Editor. You can input or modify the display text, apply formatting, and observe the Markdown preview alongside. This capability is enabled by utilizing the splitter component, which effectively separates the Rich Text Editor from the preview section.

More Details...

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. We can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library Marked is used in this sample to convert markdown into HTML content
Markdown Preview
Description

The Rich Text Editor provides the ability to instantly preview Markdown changes through the preview functionality. To achieve this, the sample utilizes the third-party library Marked.js to convert Markdown into HTML content. Injecting Module The above features built as modules have to be included in your application. For example, to use image and link, inject the specific module using RichTextEditor.Inject (Toolbar, Link, Image, MarkdownEditor). The third-party library Marked is used in this sample to convert markdown into HTML content.