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

This sample demonstrates the different behavior of toolbar support in the Rich Text Editor. Change the toolbar type as multiRow or expand from the property panel to see its appearance . Check or uncheck the floating toolbar in property panel to have a view of its behavior.

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 HTML markup or markdown 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>
 Validation 
 <ul><li>The editor’s content can be validated on form submission by applying validation rules and validation message </li></ul>
 Locale.
 <ul><li>The editor provides an option to localize its static strings to adapt the editor to a local language.</li></ul>
 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' style="width:300px" src='/aspnetcore/images/RichTextEditor/RTEImage-Feather.png' />
 </div>

The Rich Text Editor allows you to configure different types of toolbar using toolbarSettings.type property. The types of toolbar are:

Expand: The toolbar hides the overflowing items in the next row. Click the expand arrow to view overflowing toolbar items
Multi Row: The toolbar hides the overflowing items in the next row.
Floating: set boolean value to toolbarSettings.enableFloating property to enable or disable the floating toolbar.
Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.