The rich text editor is an advanced text editor control allowing users to apply different text formatting and headers, insert lists, images, links, and tables. The rich text editor is rendered as a large resizable textbox with a toolbar. The available toolbar options can be configured through attributes.

Rich text editor

Usage

The rich text editor is the default editor for HtmlString properties (in the Microsoft.AspNetCore.Html namespace). The editor can also be used for string properties by decorating the property with the RichTextEditorAttribute. Additional configuration can be set through several attributes.

Width

The pixel width of the editor in the back office can be set through the Width property of the RichTextEditorAttribute. This is equivalent to decorating the same property with the Width attribute.

Height

The pixel height of the editor (including the toolbar and chrome) in the back office can be set through the Height property of the RichTextEditorAttribute. The default height is 200 pixels.

Toolbar features

By default, all available toolbar features are rendered on the editor. You can set allowed toolbar features through the RichTextEditorToolbarAttribute. The RichTextEditorToolbarAttribute constructor accepts a params string[] parameter with the keywords for all the toolbar features that you want to allow. The following features are available:

  • RichTextEditorToolbarFeatures.Bold: bold formatting style;
  • RichTextEditorToolbarFeatures.Italic: italic formatting style;
  • RichTextEditorToolbarFeatures.Underline: underline formatting style;
  • RichTextEditorToolbarFeatures.Strikethrough: strike-through formatting style;
  • RichTextEditorToolbarFeatures.Superscript: superscript formatting style;
  • RichTextEditorToolbarFeatures.Subscript: subscript formatting style;
  • RichTextEditorToolbarFeatures.RemoveFormat: clear current formatting;
  • RichTextEditorToolbarFeatures.ParagraphStyle: block style dropdown;
  • RichTextEditorToolbarFeatures.NumberedList: insert numbered list
  • RichTextEditorToolbarFeatures.BulletList: insert bullet list;
  • RichTextEditorToolbarFeatures.ParagraphAlign: align & indent paragraph;
  • RichTextEditorToolbarFeatures.Source: HTML source view & edit;
  • RichTextEditorToolbarFeatures.Undo: undo last action;
  • RichTextEditorToolbarFeatures.Redo: redo last undone action;
  • RichTextEditorToolbarFeatures.FullScreen: full screen view;
  • RichTextEditorToolbarFeatures.Image: insert image from asset library;
  • RichTextEditorToolbarFeatures.Link: insert internal / external link;
  • RichTextEditorToolbarFeatures.Table: insert table;
  • RichTextEditorToolbarFeatures.HorizontalRule: insert horizontal rule;
  • RichTextEditorToolbarFeatures.GroupSeparator: separator for toolbar groups;

Example

public class SampleContent: IContentType
{
    // Renders a rich text editor by convention.
    public HtmlString BodyText { get; set; }

    // Explicitly specify rich text editor for string types
    [RichTextEditor]
    public string IntroText { get; set; }

    // Set height and toolbar options.
    [RichTextEditor(Height = 120)]
    [RichTextEditorToolbar(RichTextEditorToolbarFeatures.Bold, RichTextEditorToolbarFeatures.Italic, RichTextEditorToolbarFeatures.Underline)]
    public HtmlString Summary { get; set; }
}
In this article