Hello,
After changing new line to <br>, the editor inserts the ordered/unordered list always at the top of textarea box instead of the current position of the cursor.
Here's how I changed the default new line break for editor:
var defaultTools = kendo.ui.Editor.defaultTools;
defaultTools["insertLineBreak"].options.shift = false;
delete defaultTools["insertParagraph"].options;
While inspecting the HTML, I noticed that the editor starts the list at the top of the textarea but I had placed the cursor on the new line under Text3
<body autocorrect="off" contenteditable="true" class="">
<ul>
<li>Text1<br>
Text2<br>
Text3<br>
<br class="k-br">
</li>
</ul>
</body>
If I change back to default behaviour for new line, i.e., <p>, then the list gets inserted at the current cursor position. Please advise.
Thanks,
Alex
5 Answers, 1 is accepted
Rank 1
Hi,
I notived that the list will get inserted at the nearest <p> tag closest to cursor. here's the HTML:
<body autocorrect="off" contenteditable="true" class="">
<p>
Text1<br>
Text2<br>
Text3<br>
<!-- If cursor is near here list start at Text1 -->
Text4<br>
<br><br>
Text6
</p>
<p>
<!-- If cursor is near here list start at Text7-->
Text 7
</p>
</body>
How to select and enclose text with a new <p> tag ? For example, if I wanted to start list at "Text 4" .
Please advise.
Thanks,
Alex
Rank 1
Hi,
I tried in dojo with this code ( https://dojo.telerik.com/UcibIxuJ ) see below. The same issue happens. The order/unordered list starts at the top and not at the cursor position.
My added code is in between //added comments.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
function editor_keydown(e) {
console.log("keydown : keyCode=", e.keyCode);
}
//added
var defaultTools = kendo.ui.Editor.defaultTools;
defaultTools["insertLineBreak"].options.shift = false;
delete defaultTools["insertParagraph"].options;
//added
$("#editor").kendoEditor();
var editor = $("#editor").data("kendoEditor");
editor.bind("keydown", editor_keydown);
</script>
</body>
</html>
Thanks,
James
Hi Alex,
I will need time to investigate the case. I will write you back in the next 24 hours with more details about the reported behavior.
Regards,
Petar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hi Alex,
I've discussed the reported behavior with my colleagues and what I can say is that the reported behavior is expected for the Editor component. It is how the Microsoft Word actually works.
Below is a screenshot of a text entered in Word. The first four lines are created by pressing just the "Enter" button. The last three lines are created using the "Shift + Enter" combination. If you add an ordered/unordered list to the first four lines, they will appear on the currently selected row. If we add a list when the selected row is one of the last three, the list will appear before the "New line with" row.
I hope the above description is clear enough.
Regards,
Petar
Progress Telerik
Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).
Rank 1