3

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

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

以下场景：

1）用户点击#13键（检查）

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

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

4）如果插入符号和元素末尾之间的文本（节点（s）），提取它（？？？）

5）将文本（节点）放入新创建的p（段落）（检查）

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

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

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

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

亲切的问候，p

4

1 回答 1

5

您可以通过创建一个 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/

于 2011-04-21T08:47:23.120 回答