Enter key Configuration in ASP.NET MVC Rich Text Editor Control

4 Mar 20255 minutes to read

Rich Text Editor allows you to customize the behavior of the Enter key and Shift+Enter key combinations. This feature provides flexibility in formatting and structuring content within the editor.

Available Options

The enterKey property accepts the following values:

  • P (default)
  • DIV
  • BR

The shiftEnterKey property accepts the following values:

  • BR (default)
  • P
  • DIV

Enter key Customization

By default, pressing the Enter key in the Rich Text Editor creates a new <p> tag. You can customize this behavior using the EnterKey property.

When you customize the Enter key, the editor will create the specified tag when the Enter key is pressed. This configuration also affects the default content structure of the Rich Text Editor.

@Html.EJS().RichTextEditor("defaultRTE").EnterKey(Syncfusion.EJ2.RichTextEditor.EnterKey.DIV).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.value = @"<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p>
        <ul>
            <li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li>
            <li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li>
            <li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li>
        </ul>";
        return View();
    }
}

Shift+Enter key Customization

By default, pressing Shift+Enter in the Rich Text Editor inserts a <br> tag. You can customize this behavior using the ShiftEnterKey property.

When you customize the Shift+Enter key, the editor will create the specified tag when the key combination is pressed. This configuration also affects the default content structure of the Rich Text Editor.

@Html.EJS().RichTextEditor("defaultRTE").ShiftEnterKey(Syncfusion.EJ2.RichTextEditor.ShiftEnterKey.BR).Value(ViewBag.value).Render()
public class HomeController : Controller
{
    public ActionResult Index()
    {
         ViewBag.value = @"<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p>
        <ul>
            <li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li>
            <li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li>
            <li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li>
        </ul>";
        return View();
    }
}

Preventing Enter Key Manipulation

In some cases, you may want to prevent the default Enter key behavior entirely. The Rich Text Editor allows you to intercept and prevent the default action of the Enter key at the editor level by handling the ActionBegin event. To ensure that the default behavior is also suppressed at the browser level, you need to call the preventDefault() method on the event object within the event handler. This approach allows for precise control over the editor’s behavior in response to the Enter key press, facilitating the implementation of custom functionality.

@Html.EJS().RichTextEditor("defaultRTE").EnterKey(Syncfusion.EJ2.RichTextEditor.EnterKey.DIV).Value(ViewBag.value).ActionBegin("onActionBegin").Render()

<script>
    function onActionBegin(args){
        if (args.requestType === 'EnterAction') {
            args.cancel = true; // to prevent default enter key action in editor level
            args.originalEvent.preventDefault(); // to prevent default enter key action in browser level
        }
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.value = @"<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p>
        <ul>
            <li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li>
            <li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li>
            <li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li>
        </ul>";
        return View();
    }
}