Example of Overview in React Rich Text Editor Component

All Controls
/
Rich-text-editor
/
MarkDown

This sample demonstrates markdown editing in the Rich Text Editor with complete features.

More Details...

Loading....
Description

The Rich Text Editor supports markdown editing when the editorMode is set to mode property of the Rich Text Editor

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

  • 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.
  • Alignment - Aligns the content with left, center, and right margins.
  • 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.
  • Tables – Allows you to insert a table with header.

Injecting Module

Rich Text Editor component features are segregated into individual feature-wise modules. To use Rich Text Editor feature, we need to inject Toolbar, Link, Image, MarkdownEditor, Table modules into the services.

The third-party library Marked is used in this sample to convert markdown into HTML content.