Example of undefined in React Rich Text Editor Component

All Controls
/
Rich-text-editor
/
MentionFormatIntegration

This example demonstrates how to easily apply formatting or insert media and tables in the Rich Text Editor content using the Mention component. To use it, simply type the slash (/) key in the editor and select the desired format from the suggestion list that appears.

More Details...

Loading....
Description

The @mention component is integrated into the Rich Text Editor and shows the suggestion list when the slash (/) key is pressed in an editor and applies suggested formats. To achieve this, the sample is customized for the Mention and Rich Text Editor .

  • Prevent the @mention default selection action by setting the args.cancel as true at the select event.
  • Get the command name from the Mention component, select an event, and pass it to the public method executeCommand to perform the specified formats on the selected text in an editor.

The following formats are shown in the mention suggestion list; apply them in an editor.

  • Basic blocks - The Rich Text Editor supports basic text formatting blocks, including paragraph, headings, code,quotation, lists, and table making it easier for users to structure their content. When a user selects a basic block format, it will be applied to the next line or paragraph.
  • Inline formats - The Rich Text Editor supports inline formatting, allowing you to add emojis to the specific text within the content.
  • Media formats - The Rich Text Editor also supports media formats, including image, video, and audio making it an efficient tool for the content creation.