How to get selected value of Kendo UI Editor content - kendo-ui

Question

I need insert custom editor tool for inserting links into rich text. It should work as basic link insert in editor but in dialog window I need treeview with our documents structure for select target of link.
Please can you help me with syntax for get selected text of editor content?
Best regards
David

Answer 1

To get selected text from the Kendo Editor you can use GetRange() method. Syntax is following.(http://docs.kendoui.com/api/web/editor#methods-getRange)
http://jsfiddle.net/vojtiik/Sgtxk/1/
HTML:
<textarea id="editor"></textarea>
<input class="buttonB" type="button" value="Get selected value" />
JS:
var textarea = $("#editor");
textarea.kendoEditor({ value: "Hello Davide, how are you doing !" });
var editor = textarea.data("kendoEditor");
$('.buttonB').click(function () {
alert(editor.getRange());
});

Answer 2

This is second way:
var editor = $("#editor").data('kendoEditor');
var selection = editor.getSelection();
console.log(selection.toString());

Answer 3

#helper RenderTreeview()
{
#(Html.Kendo().TreeView()
.Name("treeview")
.HtmlAttributes(new {#class="demo-section" })
.DataTextField("Name")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("Treeview", "Admin")
)
)
)
}
#(Html.Kendo().Window()
.Name("Link")
.Title("Insert link")
.Visible(false)
.Content(#<text>
<div style="margin:10px;">
<span style="width:150px; display:inline-block;">Select Section:</span>
<br />
<br />
<div style=" height:200px; overflow:auto;">
#RenderTreeview()
</div>
<br />
<br />
<span style="width:60px; display:inline-block;"></span><span style="color:red" id="errorMsn">Please highlight text</span><br /><br />
<span style="width:60px; display:inline-block;">Text:</span><input style="width:350px;" type="text" id="Linktext" />
<br />
<br />
<div> <span style="width:60px; display:inline-block;"></span><input type="checkbox" id ="check" /> Open in new window</div>
<div style=" text-align:right;">
<button class="k-dialog-insert k-button" onclick="UpdateContent();" >Insert</button> or
<a class="k-dialog-close k-link" id="btnCancel" href="#">Cancel</a>
</div>
</div>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Modal(true)
)
#(Html.Kendo().EditorFor(x=> x.PageContent.Contents)
.Encode(false)
.HtmlAttributes(new { style = "width: 1020px;height:350px" })
.ImageBrowser(img=> img
.Image("~/Content/Images/{0}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser"))
.Value(#<text></text>)
.Tools(tools => tools
.Clear()
.Formatting()
.FontName()
.Bold()
.Italic()
.Underline()
.Strikethrough()
.JustifyCenter()
.JustifyLeft()
.JustifyRight()
.Outdent()
.FontColor()
.FontSize()
.InsertOrderedList()
.InsertUnorderedList()
.Indent()
.TableEditing()
.InsertImage()
.ViewHtml()
.CreateLink()
.Unlink()
.CustomButton(cb => cb.Name("myTool").ToolTip("Insert Internal Link").Exec(#<text>
function InserLinkContent() {
var editor = $("#PageContent_Contents").data('kendoEditor');
var selection = editor.getSelection();
var string = selection.toString();
var textbox = document.getElementById('Linktext');
textbox.value = string;
if (string.length > 0) {
document.getElementById('errorMsn').style.display = "none";
}
$("#Link").data("kendoWindow").open().center();
}
</text>))
.CustomButton(cb => cb.Name("custom").ToolTip("Insert a horizontal rule").Exec(#<text>
function(e) {
var editor = $(this).data("kendoEditor");
editor.exec("inserthtml", { value: "<hr />" });
}
</text>))
)
)
}
<script>
function UpdateContent() {
var data = $('#treeview').data('kendoTreeView');
var selectednode = data.dataItem(data.select());
var itemid = selectednode.id;
var text = document.getElementById('Linktext');
var string = text.value.toString();
var checkbox = document.getElementById('check');
var target = "";
if (checkbox.checked) {
target = "target='_blank'";
}
editor.exec("inserthtml", { value: "<a " + target + " href='../ContentPage/1?leftmenu="+itemid+"'>" + string + "</a>" });
$("#Link").data("kendoWindow").close();
}
$('#btnCancel').click(function () {
$("#Link").data("kendoWindow").close();
});
</script>