javascript - Contenteditable - 从插入符号提取文本到元素末尾

Question

在浏览了所有可能的问题和答案之后，我会这样尝试。

我正在编写一个 RTE，但未能成功提取 contenteditable 元素中的文本。这样做的原因是，每个浏览器以稍微不同的方式处理节点和按键(#13)事件(例如，一个创建'br'，另一个创建'div'，'p'等)为了保持这一切的一致性，我正在编写一个跨浏览器的编辑器，它使用 e.preventDefault() 终止所有默认操作；

以下场景:

1) 用户按下 #13 键(勾选)

2)检测到插入符位置(检查)

3) 在插入符所在的元素之后创建新的 p(aragraph)(选中)

4) 如果插入符和元素末尾之间有文本(节点)，则提取它 (? ? ?)

5) 将文本(node(s)) 放入新创建的p(aragraph)(选中)

如您所想，除第 4 点外，一切正常。

著名的 js rangy 库中也有类似的功能，可以提取特定的选择。

我需要的是以下内容:获取并提取从插入符号到内容可编辑段落 (p, h1, h2, ...) 元素末尾的所有文本(当然带有标签，因此 splitBoundaries)。

欢迎提供任何线索、提示或片段!提前致谢。

亲切的问候，

Answer 1

您可以通过创建一个 Range 对象来实现这一点，该对象包含从插入符到包含 block 元素末尾的内容，并调用其 extractContents() 方法:

function getBlockContainer(node) {
    while (node) {
        // Example block elements below, you may want to add more
        if (node.nodeType == 1 && /^(P|H[1-6]|DIV)$/i.test(node.nodeName)) {
            return node;
        }
        node = node.parentNode;
    }
}

function extractBlockContentsFromCaret() {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var selRange = sel.getRangeAt(0);
        var blockEl = getBlockContainer(selRange.endContainer);
        if (blockEl) {
            var range = selRange.cloneRange();
            range.selectNodeContents(blockEl);
            range.setStart(selRange.endContainer, selRange.endOffset);
            return range.extractContents();
        }
    }
}

这在 IE <= 8 中不起作用，它不支持范围或与其他浏览器相同的选择对象。您可以使用 Rangy (您提到的)提供 IE 支持。只需将 window.getSelection() 替换为 rangy.getSelection()。

jsFiddle:http://jsfiddle.net/LwXvk/3/