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

Question

浏览完所有可能的问题和答案后，我会尝试这种方式。

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

以下场景：

1) 用户按下 #13 键（检查）

2) 检测到插入符号位置（检查）

3) 在插入符号所在的元素后面创建新的 p(aragraph)（检查）

4) if text(node(s)) Between插入符和元素的末尾，提取它 (? ? ?)

5) 将文本(节点) 放入新创建的 p(aragraph) (检查)

正如你可以想象的，除了第 4 点之外，一切正常

。著名的 js rangey 库，其中正在提取特定的选择。

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

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

亲切的问候， p

Answer 1

您可以通过创建一个包含从插入符号到包含块元素末尾的内容的 Range 对象并调用其 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 中不起作用，它不支持 Range 或与其他浏览器相同的选择对象。您可以使用 Rangy（您提到的）来提供 IE 支持。只需将 window.getSelection() 替换为 rangy.getSelection() 即可。

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