Chrome无法获取所选的html字符串换行标记(contenteditable)

Question

我正在使用Tim Down的这个解决方案在一个可疑的div中选择html,并且它工作正常(谢谢Tim!)但是使用Chrome,如果我在html标签的边界处选择一个html字符串,就像在这里一样图片:http://i.imgur.com/UiYzrcp.png？1:

我得到的只是纯文本(test在这种情况下).

如果我将选择扩展到下一个字符(c例如字母),而是我得到正确的html(<strong>test</strong> c).

我可以通过选择图像中的单词来获取Webkit中的完整html吗？谢谢

Answer 1

并不是的.当WebKit添加到选择中时,它会规范化任何范围的每个边界,以使其符合WebKit对文档中有效选择/插入位置的想法.您可以更改原始函数,以便它检测包含元素中所有文本的选择的大小写,并扩展选择范围以包围该元素(而不实际更改选择).这是一个简单的例子(对于更一般的情况,你可能需要更聪明的东西,例如当文本在嵌套元素中时,检测块/内联元素等):

演示:http://jsfiddle.net/btLeg/

码:

function adjustRange(range) {
    range = range.cloneRange();

    // Expand range to encompass complete element if element's text
    // is completely selected by the range
    var container = range.commonAncestorContainer;
    var parentElement = container.nodeType == 3 ?
            container.parentNode : container;

    if (parentElement.textContent == range.toString()) {
        range.selectNode(parentElement);
    }

    return range;
}

function getSelectionHtml() {
    var html = "", sel, range;
    if (typeof window.getSelection != "undefined") {
        sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                range = adjustRange( sel.getRangeAt(i) );
                container.appendChild(range.cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}