This is a migrated thread and some comments may be shown as answers.

After changing new line to <br>, ordered/unordered list tool inserts bullet/number at first <p> tag instead of current cursor position.

5 Answers 153 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 24 Sep 2020, 08:32 PM

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

Sort by
0
Alex
Top achievements
Rank 1
answered on 24 Sep 2020, 08:49 PM

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

0
Alex
Top achievements
Rank 1
answered on 25 Sep 2020, 01:32 AM

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

 

0
Petar
Telerik team
answered on 28 Sep 2020, 03:09 PM

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/.

0
Accepted
Petar
Telerik team
answered on 29 Sep 2020, 02:04 PM

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).

0
Alex
Top achievements
Rank 1
answered on 03 Oct 2020, 11:01 PM
Thanks Petar
Tags
Editor
Asked by
Alex
Top achievements
Rank 1
Answers by
Alex
Top achievements
Rank 1
Petar
Telerik team
Share this question
or