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.
- Add a script that customizes the
insertLineBreakandinsertParagraphtools. As a result, a new line is added when pressing theEnterkey, and a paragraph is inserted by pressingShift + Enter.
- Declare the Editor after the script tag with the custom logic.
<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>
@(Html.Kendo().Editor()
.Name("Editor")
.HtmlAttributes(new { style = "height:300px" })
.Value(@<text>
<p>
Some content
</p>
</text>)
)
@addTagHelper *, Kendo.Mvc
<kendo-editor tag="textarea" name="editor" style="height:300px" value="@{<text>
<p>
Some content
</p>
</text> }">
</kendo-editor>