Example of Overview in ASP.NET Core Rich Text Editor Control

This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.

DEMO

SOURCE

<div>
 The Rich Text Editor is a WYSIWYG ('what you see is what you get') editor useful to create and edit content and return the valid <a href='https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/formation/?no-cache=1#markdown-editor'>HTML markup</a> or <a href='https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/formation/?no-cache=1#html-editor'>markdown</a> of the content
 Toolbar 
 <ol>
 <li>
 The Toolbar contains commands to align the text, insert a link, insert an image, insert list, undo / redo operations, HTML view, etc 
 </li>
 <li>
 The Toolbar is fully customizable 
 </li>
 </ol>
 Links 
 <ol>
 <li>
 You can insert a hyperlink with its corresponding dialog
 </li>
 <li>
 Attach a hyperlink to the displayed text. 
 </li>
 <li>
 Customize the quick toolbar based on the hyperlink 
 </li>
 </ol>
 Image.
 <ol>
 <li>
 Allows you to insert images from an online source as well as the local computer
 </li>
 <li>
 You can upload an image
 </li>
 <li>
 Provides an option to customize the quick toolbar for an image 
 </li>
 </ol>
 <img alt='Logo' src="/aspnetcore/images/RichTextEditor/RTEImage-Feather.png" style='width: 300px' />
 </div>

This sample used Code mirror plugins helps to highlight the HTML content and when changes happens in code view, the same has been reflected in preview mode.

The quick toolbar provides a convenient way to customize Image, Video, Audio, Table, and Link elements. Simply right-click on the desired element, utilizing the ShowOnRightClick property, and the quick toolbar will appear, providing an easy way for customization.

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

Lists - NumberFormat list and BulletFormat list types.
Links - A hyperlink can be inserted into the editor for quick access to related information.
Image - Inserts and manages images.
Table - Inserts and manages Tables.
Alignment - Aligns the content with left, center, and right margins.
Undo/Redo - Allows undo/redo operations.
Indent/ Outdent - Increases/decreases the indent level of the content.
Font - Able to do styling on text like font family, size, fore color and background color.
Lower / Upper case – Changes the casing of the selected text.
SubScript / SuperScript - Makes the selected text as subscript (lower)/superscript(upper).
FullScreen - Stretches the editor to the maximum width and height of the browser window.
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.
Insert Code - Allows you to apply code format to the selected parent nodes. In the above sample, the style for the code format ('pre' tag) is applied by adding the background color.
Insert Emoticon - Inserts the emoticon to the editor
Audio - Inserts and manages audios.
Video - Inserts and manages videos.
Format Painter - The Format Painter feature allows you to copy the formats and apply them to content without formatting thus saving time to reformat the content.