3

私はTim Downによるこのソリューションを使用して、コンテンツ編集可能なdivで選択されたhtmlを取得していますが、正常に動作しています(Timに感謝します!)しかし、Chromeを使用して、htmlタグの境界で正確にhtml文字列を選択すると、このようになります画像: http://i.imgur.com/UiYzrcp.png?1 :

私が得るのは単なるプレーンテキストです（testこの場合）。

選択範囲を次の文字 (文字cなど) に拡張すると、代わりに正しい html ( <strong>test</strong> c) が取得されます。

画像のような単語を選択して、Webkit で完全な html を取得できますか? ありがとう

4

1 に答える 1

6

あまり。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;
}
于 2013-02-04T18:18:18.777 に答える