Add a New Line instead of a New Paragraph in the Editor when Pressing Enter Key

Environment

Product	Telerik UI for ASP.NET Core Editor
Progress Telerik UI for ASP.NET Core version	2024.4.1112

Description

How can I configure the Editor to add a new line instead of a paragraph when pressing the Enter key?

Solution

By default, the Editor adds a paragraph (p element) when the focus is in the Editor's content area and you press the Enter key. Pressing Shift + Enter adds a new line (br element). You can reverse the default behavior by customizing the Editor's tools.

1. Add a script that customizes the insertLineBreak and insertParagraph tools. As a result, a new line is added when pressing the Enter key, and a paragraph is inserted by pressing Shift + Enter.
2. Declare the Editor after the script tag with the custom logic.

Html

    <script>
        var editorNS = kendo.ui.editor,
            registerTool = editorNS.EditorUtils.registerTool,
            Tool = editorNS.Tool;
        registerTool("insertLineBreak", new Tool({ key: 13, command: editorNS.NewLineCommand }));
        registerTool("insertParagraph", new Tool({ key: 13, shift: true, command: editorNS.ParagraphCommand }));
    </script>

Razor

    @(Html.Kendo().Editor()
      .Name("Editor")
      .HtmlAttributes(new { style = "height:300px" })
      .Value(@<text>
            <p>
               Some content
            </p>
      </text>)
    )

Razor

    @addTagHelper *, Kendo.Mvc

    <kendo-editor tag="textarea" name="editor" style="height:300px" value="@{<text>
            <p>
                Some content
            </p>
        </text> }">
    </kendo-editor>

More ASP.NET Core Editor Resources

• ASP.NET Core Editor Documentation

• ASP.NET Core Editor Demos

• ASP.NET Core Editor Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Editor for ASP.NET Core

• Server-Side API Reference of the Editor for ASP.NET Core

• Server-Side TagHelper API Reference of the Editor for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base