Get cursor position in textbox

[Kees]

Hello,

Is there a way to get the cursor position in the kendo Editor? I want to give the user the option to add a kind of placeholders to the text in the editor. To do this he selects a variable name from a list, the selected variable will be added to the text.

The simple way is to just append it to the text in the editor;
    var body_text = $("[id$='_txtMailBody']").data("kendoEditor").value();
    body_text += " %" + selected_item.id + "% ";
    $("[id$='_txtMailBody']").data("kendoEditor").value(body_text);

A better way is to find the cursor position an then insert the selected item to the text. But how can I do this?

Thank you for your help.

[Dimo]

Hi Kees,

Generally, the Editor's InsertHtml tool is intended for use in cases like yours:

http://demos.kendoui.com/web/editor/snippets.html

However, if your scenario requires greater flexibility and the quantity and value of the inserted snippets can change on the fly, you can use the Editor's API:

<textarea id="editor" name="editor" cols="40" rows="10"></textarea>
<label for="content">content</label><textarea id="content" cols="40" rows="10"></textarea>
<button type="button" id="button">inject content</button>

var editor = $("#editor").kendoEditor({
    tools: ["insertHtml"],
    insertHtml: [
        { text: "dummy label", value: "dummy content" }
    ]
}).data("kendoEditor");

$("#button").click(function() {
    var editor = $("#editor").data("kendoEditor");
    editor.exec("inserthtml", { value: $("#content").val() });
});

Note that even in the latter case, you must have the InsertHtml tool initialized.

Kind regards,
Dimo
the Telerik team

[Kees]

Thank you for this answer, it works great.

Used $(".k-insertHtml").hide(); to hide the insertHtml dropdown control. And linked another menu to this control.

// When user clicks on a variable in the list menu, insert this variable in the mail text.
function addMailVariableToBodyText(selected_item) {
    var editor = $("[id$='_txtMailBody']").data("kendoEditor");
    editor.exec("inserthtml", { value: " %" + selected_item.id + "% " });
}

Regards,
Kees

[Sijeesh]

How did you link another menu to the insertHTML control?