Question

我需要插入自定义编辑器工具，以便将链接插入到富文本中。它应该在编辑器中作为基本链接插入工作，但在对话框窗口中我需要使用我们的文档结构的树视图来选择链接目标。

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

祝你好运大卫

Answer 1

要从Kendo编辑器中获取所选文本，您可以使用GetRange（）方法。语法如下。（http://docs.kendoui.com/api/web/editor#methods-getRange）

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

这是第二种方式：

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

如何获取Kendo UI Editor内容的选定值

3 个答案: