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

在略读了所有可能的问题和答案之后，我将这样尝试

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

以下场景：

1） 用户点击#13键（选中）

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

3） 在插入符号所在的元素后创建新的p（aragraph）（选中）

4） 如果插入符号和元素结尾之间有文本（节点），则将其提取（？？？）

5） 将文本（节点）放入新创建的p（aragraph）（选中）

正如你所能想象的，除了第4点，一切都正常

众所周知的js rangy库中也有类似的功能，其中提取了特定的选择

我需要的是：获取并提取从插入符号到contenteditable段落（p，h1，h2，…）元素末尾的所有文本（当然带有标记，所以拆分边界）

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

亲切问候,，

---

p

您可以通过创建一个包含从插入符号到包含块元素末尾的内容的范围对象并调用其

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

---

这在（非常感谢你，你就是那个男人！）工作起来很有魅力，太棒了！