Increase and Decrease Indent in ASP.NET MVC Rich Text Editor Control

4 Mar 20251 minute to read

The Rich Text Editor allows you to set indentation for text blocks such as paragraphs, headings, or lists. This feature helps you visually organize and structure your content, making it easier to read and understand.

The Rich Text Editor allows you to configure two types of indentation tools, Indent and Outdent tool in the Rich Text Editor toolbar using the ToolbarSettings Items property.

Options Description
Indent Increases the indentation
Outdent Decreases the indentation

To adjust the text indentation:

  1. Select the desired text or paragraph.
  2. Click the Indent or Outdent button in the toolbar.
  3. The indentation of the selected text will be modified accordingly.

To configure the Indent and Outdent toolbar item, refer to the below code.

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