Code Block Formatting in the ASP.NET MVC Rich Text Editor Control

4 Mar 20251 minute to read

The Rich Text Editor control offers a powerful feature to format text as preformatted code blocks, making it ideal for displaying programming snippets or structured contents.

Enabling Code Block Formatting

To enable code block formatting, ensure that the Formats item is included in the toolbar items of your Rich Text Editor configuration.

Below are examples and code snippets demonstrating how to add and effectively use the code block formatting option in the Rich Text Editor.

@Html.EJS().RichTextEditor("formatting").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()
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[] { "Formats" };
            
        return View();
    }
}

See Also