Remove Formatting in the ASP.NET MVC Rich Text Editor Component

4 Mar 20255 minutes to read

The ASP.NET Core Rich Text Editor component offers a powerful Clear Format feature to remove any applied formatting from selected text.

This feature is particularly useful when you need to:

  • Remove multiple styles at once
  • Quickly standardize text formatting
  • Prepare text for new styling

Configuring Clear Format

To enable the Clear Format feature in your Rich Text Editor, you need to add it to the toolbar items. Follow these steps:

  1. Open your component file where you’ve implemented the Rich Text Editor.
  2. Locate the ToolbarSettings property in your Rich Text Editor configuration.
  3. Add 'ClearFormat' to the Items array within ToolbarSettings.

Here’s an example of how to configure the Clear Format feature:

@Html.EJS().RichTextEditor("clear-format").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.items = new[] { "ClearFormat"};
        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>";
        return View();
    }
}

Using Clear Format

Once configured, you can use the Clear Format feature as follows:

  1. Select the text with formatting you want to remove.
  2. Click the Clear Format button in the toolbar.
  3. The selected text will revert to its original, unformatted state.

Using Clear Format makes it easy to undo styling changes and keep your text looking consistent. Examples and code snippets below show how to use ‘Clear Format’ effectively in the Rich Text Editor.

@Html.EJS().RichTextEditor("clear-format").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.items = new[] { "ClearFormat"};
        ViewBag.value = @"<p style="text-align: start;"><span style="color: rgb(37, 37, 37); font-family: &quot;Segoe UI&quot;, SegoeUI, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); display: inline !important; float: none;">The </span><span style="color: rgb(37, 37, 37); font-family: &quot;Segoe UI&quot;, SegoeUI, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 0); float: none; display: inline !important;"><strong style="font-size: 16px;">clear format</strong></span><span style="color: rgb(37, 37, 37); font-family: &quot;Segoe UI&quot;, SegoeUI, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255); display: inline !important; float: none;"> tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.</span><br></p>";
        return View();
    }
}

See Also

Copy and Apply Formatting