How to remove extra HTML formatting after pasting content in kendo editor

See more:

Kendo-UI

editor

Requirement:
There is a textarea (name: txtFName) control. When users will enter some value over there and will click on a button, then Kendo Editor should open up and that text from "txtFName" should get pasted in Kendo Editor, under "

...

" tag. The cursor should keep blinking just after the pasted text.

Problem:
The data from "txtFName" is getting pasted to the kendo Editor, but the cursor is blinking on next line, not after the pasted text. When I debugged, I saw a extra "div" tag is getting added after the pasted text. If I can remove the "div" tag or can set the cursor just after the pasted text, then it would be perfect.!!!

What I have tried:

I tried in few ways:

1. By subscribing paste event and removing "div" tags from there -

function txtSelectedTemplatePasteCleanUp(e)
{
    try {
        e.innerHTML = e.innerHTML.replace(/<\/?div[^>]*>/g, "");
    }
    catch (oErr) {
        CHW.HandleError(oErr, "", arguments);
    }
}

Then subscribing the above method like below:

$("#txtSelectedTemplate").kendoEditor({
        tools: [
        ],
        select: function (e) {
            txtSelectedTemplateClick(e);
        },
        keydown: function (e) {
            txtSelectedTemplateKeyUp(e);
        },
        paste: function (e) {
            txtSelectedTemplatePasteCleanUp(e);
        }
    });
kEditor = $("#txtSelectedTemplate").data("kendoEditor");

But, this way it was not getting called. So, I again invoked it OnLoad(), like below:

txtSelectedTemplate.focus();
        
txtSelectedTemplatePasteCleanUp(kEditor.body);

2. By calculating the cursor position and setting it through Kendo Editor related functions -

this.moveCaret = function (position) {
        var range = widget.editor.getRange();
        if (range.collapsed) {
            var textNode = widget.editor.body.firstChild;
            range.setStart(textNode, position);
            range.collapse(true); // collapse to start
            widget.editor.selectRange(range);
        }
    }

Then calling it like below:

txtSelectedTemplate.focus();
var pp = txtSelectedTemplate.GetCursorPosition();
txtSelectedTemplate.moveCaret(pp);

The above two techniques I have implemented after pasting the text into the Editor.

Please help me in setting the cursor after the text ends and to prevent creation of extra HTML elements.

NOTE: Please ask me if you need more clarifications about the problem.

Thanks,
Agnib