Kendo ui 剑道ui编辑器如何使用范围对象修改用户选择

剑道UI 2015.2.805 Jacascript剑道UI编辑器

我想通过添加一个自定义工具来扩展剑道ui编辑器，该工具将用户选择的跨越两个或多个段落的块转换为单间距文本块。这可以通过定位所有内部p标记并将其转换为br标记来实现，注意不要更改第一个或最后一个标记

我的问题是如何处理范围对象

获取范围很容易：

var range = editor.getRange();

范围对象具有开始和结束容器以及开始和结束偏移（在该容器内）。我可以访问文本（无标记）

奇怪的是，我看到的其他例子，包括工作示例，都表明了这一点

console.log(range);

将转储文本，但是这在我的项目中不起作用，我只得到单词“Range”，它是对象的类型。这与我有关

然而，我真正需要的是编辑器标记（editor.value（））中的开始和结束偏移量，然后我可以找到p并将其更改为br

我已经阅读了telerik文档和引用的quirksmode站点对html范围的解释，虽然信息丰富，但没有任何内容显示如何使用文本定位范围（这对我来说似乎很基本）

我想我忽略了一些简单的事情

给定一个范围对象，如何在编辑器内容中定位起点和终点偏移

编辑：经过额外的研究，它看起来比我预期的要复杂得多。似乎我必须处理范围和/或选择对象，而不是直接处理编辑器内容。比我聪明的头脑想出了射程物体，原因我无法理解

以下是我到目前为止的情况：

var range = letterEditor.editor.getRange();

var divSelection;
divSelection = range.cloneRange();  
//cloning may be needless extra work...

//here manipulate the divSelection to how I want it.
//divSeletion is a range, not sure how to manipulate it

var sel = letterEditor.editor.getSelection()
sel.removeAllRanges();
sel.addRange(divSelection);

编辑2：

基于此，我提出了一个简单的测试：

var html;
var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {
    var container = document.createElement("div");
    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
    }
    html = container.innerHTML;
}

html = html.replace("</p><p>", "<br/>")

var range = letterEditor.editor.getRange();
range.deleteContents();
var div = document.createElement("div");
div.innerHTML = html;
var frag = document.createDocumentFragment(), child;
while ((child = div.firstChild)) {
    frag.appendChild(child);
}
range.insertNode(frag);

var-html；
var sel=letterEditor.editor.getSelection（）；
如果（选择范围计数）{
var container=document.createElement（“div”）；
对于（变量i=0，len=sel.rangeCount；i”，“
”）
var range=letterEditor.editor.getRange（）；
range.deleteContents（）；
var div=document.createElement（“div”）；
div.innerHTML=html；
var frag=document.createDocumentFragment（），子级；
while（（child=div.firstChild））{
附肢儿童（child）；
}
range.insertNode（frag）；

第一部分，获取html选择工作正常，第二部分也工作正常，但是编辑器在所有行周围插入标记，因此结果不正确；包括所选内容片段的额外行

编辑器支持查看html弹出窗口，该弹出窗口将编辑器内容显示为html，并允许编辑html。如果我将目标p标记更改为br，我将得到所需的结果。（编辑器确实支持br作为默认换行符vs p，但我大部分时间都需要p）。我可以使用html查看器工具编辑html，这让我知道这是可能的，我只需要在编辑器内容中标识选择的开始和结束，然后通过编辑器值上的regex进行简单的文本替换即可

编辑3：

---

翻看kendo.all.max.js，我发现按下shift+enter键会为换行符创建一个br而不是p标记。我打算把它扩展成一个单一空间工具的解决方案。如果有人知道的话，我仍然希望有一个解决方案，但现在我将指示用户在单间隔文本块上按住shift键并输入enter键。

这将完成这一任务。使用Tim Down的代码获取html。RegEx可能会变得更有效率技巧“是在insertHtml中使用split=false

var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {

    var container = document.createElement("div");
    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
    }
    var block = container.innerHTML;

    var rgx = new RegExp(/<br class="k-br">/gi);
    block = block.replace(rgx, "");

    rgx = new RegExp(/<\/p><p>/gi);
    block = block.replace(rgx, "<br/>");

    rgx = new RegExp(/<\/p>|<p>/gi);
    block = block.replace(rgx, "");

    letterEditor.editor.exec("insertHtml", { html: block, split: false });

}

var sel=letterEditor.editor.getSelection（）；
如果（选择范围计数）{
var container=document.createElement（“div”）；
对于（变量i=0，len=sel.rangeCount；i/gi）；
块=块。替换（rgx，“”）；
rgx=新的RegExp（//gi）；
block=block.replace（rgx，“
”）；
rgx=新的RegExp（/|/gi）；
块=块。替换（rgx，“”）；
letterEditor.editor.exec（“insertHtml”{html:block，split:false}）；
}

var sel = letterEditor.editor.getSelection();
if (sel.rangeCount) {

    var container = document.createElement("div");
    for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
    }
    var block = container.innerHTML;

    var rgx = new RegExp(/<br class="k-br">/gi);
    block = block.replace(rgx, "");

    rgx = new RegExp(/<\/p><p>/gi);
    block = block.replace(rgx, "<br/>");

    rgx = new RegExp(/<\/p>|<p>/gi);
    block = block.replace(rgx, "");

    letterEditor.editor.exec("insertHtml", { html: block, split: false });

}