0

Kendo UI 2015.2.805 Jacascript 的 Kendo UI 编辑器

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

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

获取范围很容易：

var range = editor.getRange();

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

console.log(range.toString());

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

console.log(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：

基于Tim Down 的解决方案，我想出了这个简单的测试：

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

编辑3：

浏览 kendo.all.max.js 我发现按 shift+enter 会为换行创建一个 br 而不是 ap 标签。我打算将其扩展为单空间工具的解决方法。如果有人知道，我仍然希望有一个解决方案，但现在我将指导用户对单个间隔的文本块进行 shift-enter。

4

1 回答 1

0

这将完成它。使用 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 });

}
于 2018-06-02T01:48:35.553 回答