Creating custom button in kendo editor

Question

I'm using kendo editor. when i want to create list of items for multi line, facing a problem(see image)

for solving this problem, I'm create custom button:

 {
                name: "custom",
                tooltip: "Insert a List",
                exec: function(e) {
                    var editor = $(this).data("kendoEditor");
                    var selectedText = editor.getSelection().toString();
                    if (selectedText.length > 0) {
                        var list = selectedText.split("\n").join("</li><li>");
                        list = "<ul><li>" + list.substring(0, list.length - 5) + "</ul>";
                    }
                    editor.exec("inserthtml", { value: list });
                }
            }

This code works fine when select whole text of line but when select just part of a line(not whole line just some character of line), list items not created from starting point of line.

Answer 1

Before executing toString() over the Selection object, you need to work with the Selection and Range APIs in order to obtain the complete text nodes and then apply the splitting.

https://developer.mozilla.org/en-US/docs/Web/API/Selection

https://developer.mozilla.org/en-US/docs/Web/API/Range