Basic Text Styling in ASP.NET MVC Rich Text Editor control

21 Mar 20254 minutes to read

The Rich Text Editor’s basic styles feature provides essential formatting options, including bold, italic, underline, strikethrough, subscript, superscript, and case changes. These fundamental tools enable users to enhance and customize their text effortlessly. By leveraging these options, users can ensure their content is both visually appealing and well-structured.

Available Text Styles

The table below lists the available text styles in the Rich Text Editor’s toolbar.

Name	Icons	Summary	Initialization
Bold		Makes text thicker and darker	toolbarSettings: { items: [‘Bold’]}	<b>bold</b>
Italic		Slants text to the right	toolbarSettings: { items: [‘Italic’]}	<em>italic</em>
Underline		Adds a line beneath the text	toolbarSettings: { items: [‘Underline’]}
StrikeThrough		Applies a line through the text.	toolbarSettings: { items: [‘StrikeThrough’]}
InlineCode		Formats text as inline code	toolbarSettings: { items: [‘InlineCode’]}	<code>inline code</code>
SubScript		Positions text slightly below the normal line	toolbarSettings: { items: [‘SubScript’]}
SuperScript		Positions text slightly above the normal line	toolbarSettings: { items: [‘SuperScript’’]}
LowerCase		Converts text to lowercase	toolbarSettings: { items: [‘LowerCase’]}
UpperCase		Converts text to uppercase	toolbarSettings: { items: [‘UpperCase’’]}

Please refer to the sample below to add these basic text styling options in the Rich Text Editor.

CSHTML

@Html.EJS().RichTextEditor("basic-text-styling").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()

Controller.cs

public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
        ViewBag.items = new[] { "Bold", "Italic", "Underline", "SubScript", "SuperScript", "LowerCase", "UpperCase", "StrikeThrough" };
            
        return View();
    }
}

See Also

Customizing Font Family, Size, and Color in Rich Text Editor