如何获取Kendo UI编辑器内容的选定值

Question

我需要插入自定义编辑器工具以插入富文本中的链接。它应该像编辑器中的基本链接插入一样工作，但在对话框中，我需要树形视图来选择链接的目标。

请问能否帮助我获取编辑器内容中所选文本的语法？

最好的问候， David

- David Slavík

---

Davide，我不太确定我能理解你的意思！请你能否详细解释一下？ - Vojtiik

你好Bobby，我正在寻找解决方案，以便我可以获取编辑器中选定的文本，并在选定的文本之前和之后附加一些HTML标记。 - David Slavík

Answer 1

要从Kendo Editor中获取所选文本，您可以使用GetRange（）方法。 语法如下。(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());
    });

- Vojtiik

Answer 2

这是第二种方法：

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

- David Slavík

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>&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>

- Elena