Contenteditable - 从插入符号提取文本到元素结尾 [英] Contenteditable - extract text from caret to end of element

问题描述

在略读所有可能的问题和答案之后，我会以这种方式尝试。

after skimming all possible questions and answers, i'll try it this way.

我正在编程RTE，但无法成功提取文本在一个令人满意的元素。
原因是，每个浏览器以稍微不同的方式处理节点和按键（＃13）事件（例如，一个创建'br'，另一个'div'，'p'等。）
为了使这一切保持一致，我正在编写一个跨浏览器编辑器，用e.preventDefault（）杀死所有默认操作;

I'm programming an RTE, but didn't manage to successfully extract text in a contenteditable element. The reason for this is, that each browser handles nodes and keypress (#13) events in a slightly different way (as ex.g. one creates 'br', the other 'div', 'p', etc.) To keep this all consistent, I'm writing a cross-browser editor which kills all default action with e.preventDefault();

以下场景：

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

1) User hits the #13 key (check)

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

2) Caret position detected (check)

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

3) create new p(aragraph) after the element the caret's in (check)

4）如果插入符号与元素结束之间的文本（节点），提取它（？??）

4) if text(node(s)) between caret and the element's end, extract it (? ? ?)

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

5) put text(node(s)) to newly created p(aragraph) (check)

你可以想象，除了第4点以外，一切都有效。

As you can imagine, everything works except point 4.

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

There's a similar functionality in the well-known js rangy library, where a specific selection is being extracted.

我需要的是：从插入符号到可疑段落的末尾（p，h1）获取并提取所有文本（当然标记为splitBoundaries） ，h2，...）元素。

What i need is following: Get and extract all text (with tags of course, so splitBoundaries) from the caret on to the end of the contenteditable paragraph (p, h1, h2, ...) element.

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

Any clues, hints or snippets are welcome! Thanks in advance.

亲切的问候，
p

Kind regards, p

推荐答案

您可以通过创建一个Range对象来完成此操作，该对象包含从插入符号到包含块元素末尾的内容并调用其 extractContents（）方法：

You can do this by creating a Range object that encompasses the content from the caret to the end of the containing block element and calling its extractContents() method:

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支持。只需用 rangy.getSelection（）替换 window.getSelection（）。

This won't work in IE <= 8, which doesn't support Range or the same selection object as other browsers. You can use Rangy (which you mentioned) to provide IE support. Just replace window.getSelection() with rangy.getSelection().

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

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

这篇关于Contenteditable - 从插入符号提取文本到元素结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！