How to get selected value of Kendo UI Editor content

问题

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

回答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());
    });

回答2:

This is second way:

var editor = $("#editor").data('kendoEditor');
var selection = editor.getSelection();
console.log(selection.toString());

回答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>&nbsp;or&nbsp;
    <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>

来源：https://stackoverflow.com/questions/18252573/how-to-get-selected-value-of-kendo-ui-editor-content