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

Question

Kendo UI 2015.2.805 Kendo UI Jacascript 编辑器

我想通过添加一个自定义工具来扩展 kendo ui 编辑器，它将用户选择的跨越两个或多个段落的块转换为单个 spaced 文本块.这可以通过定位所有内部 p 标签并将它们转换为 br 标签来完成，注意不要更改第一个或最后一个标签。

我的问题是使用范围对象。

获取范围很容易：

var range = editor.getRange();

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

console.log(range.toString());

奇怪的是，我看到的其他示例（包括工作示例）表明

console.log(range);

将转储文本，但是这在我的项目中不起作用，我只得到单词 'Range'，这是对象的类型。这让我很担心。

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

我已经阅读了 telerik 文档和引用的 quirksmode 站点对 html 范围的解释，虽然提供的信息没有说明如何使用文本定位范围（这看起来很基本对我来说）。

我怀疑我忽略了一些简单的事情。

给定一个范围对象，我如何定位编辑器内容中的开始和结束偏移量？

编辑：经过额外的研究，它看起来比我预期的要复杂得多。看来我必须处理范围 and/or 选择对象而不是直接处理编辑器内容。由于我无法理解的原因，比我想出范围对象的头脑更聪明。

这是我目前的情况：

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：

基于Tim Down's Solution我想出了这个简单的测试：

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);

第一部分，获得 html 选择工作正常，第二部分也工作，但编辑器在所有行周围插入

标记，因此结果不正确；额外的行，包括选择的片段。

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

编辑 3：

四处寻找 kendo.all.max.js 我发现按 shift+enter 会为换行创建一个 br 而不是 p 标签。我打算扩展它以作为 single-space 工具的解决方法来做到这一点。如果有人知道，我仍然想要一个解决方案，但现在我将指示用户按 shift-enter 键输入单个 spaced 文本块。

Answer 1

这将完成它。使用 Tim Down 的代码获得 html。 RegEx 可能会变得更有效率。 'Trick' 在 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 });

}

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

kendo ui editor how to modify user selection with range object

kendo-ui

kendo-editor