Question

Kendo UI 2015.2.805 Jacarta的Kendo UI编辑器

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

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

获得范围很简单：

var range = editor.getRange();

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

console.log(range.toString());

奇怪的是，我见过的其他例子，包括工作示例，都表明了

console.log(range);

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

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

我已经阅读了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：

基于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，我会得到所需的结果。（编辑器确实支持br作为默认换行符vs p，但我大部分时间都想要p）。我可以用html查看器工具编辑html让我知道这是可能的，我只需要在编辑器内容中识别选择的开始和结束，然后通过编辑器值的正则表达式进行简单的文本替换就可以了。

编辑3：

在kendo.all.max.js周围发现我发现按shift + enter会为换行创建一个br而不是一个p标签。我打算将其作为单空间工具的解决方法来扩展它。如果有人知道的话，我仍然想要一个解决方案，但是现在我将指示用户移动输入单个间隔的文本块。

Answer 1

这将实现它。使用Tim Down的代码来获取HTML。 RegEx可能会更有效率。＆＃39;招＆＃39;在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编辑器如何使用范围对象

1 个答案: