0

私は rangy を使用しており、HTML を挿入できるように、ユーザーの選択を保存して後で復元できる contenteditable div のケースがあります。

私の問題は、ユーザーがヘッダー要素内で選択した場合、ヘッダー内に html を挿入したくないということです。

そのため、ヘッダー内で選択が行われた場合にヘッダー要素の前に移動できるように、rangyの使用方法を理解しようとしています。

したがって、ユーザーが h1 内で選択した場合:

<div id="editable" contenteditable>
     <h1>|user selects here| Header Text</h1>
</div>

次に、保存された選択範囲が h1 の前に移動されます。

| selection boundary moved here |<div id="editable" contenteditable>
     <h1>|user selects here| Header Text</h1>
</div>

選択境界を移動できるかどうかを確認するために、次のことを試しました。

var sel = rangy.getSelection();
var range = sel.getRangeAt(0);

range.setStartBefore(sel.anchorNode.parentNode);

sel.removeAllRanges();
sel.addRange(range);

selected = rangy.saveSelection();

しかし、H1 内で選択すると、保存された選択境界が H1 内に設定され、その前には設定されません。ヘッダー要素の前に境界を移動する方法がわかりません。

4

1 に答える 1

0

私は rangy でこれを行う方法を理解できず、最終的に jQuery で後でクリーンアップを処理することになりました。それが最善の方法かどうかはわかりませんが、私にとってはうまくいっています。基本的に、ヘッダー内に配置される可能性のある div を削除したかったのです。

$('#cleanup').click(function(e){

        e.preventDefault();

        var header, clone;

        // loop through each header element
        $(#editor :header').each(function(){

            // assign header element to variable
            header = $(this);

            // go through the header's children
            $(header).children().each(function(){

                // if we have a div in the header,
                if( $(this).is("div")){ 

                    // clone it
                    clone = $(this).clone();

                    // put clone before the header
                    $(header).before(clone);

                    // remove the original from the header
                    $(this).remove();

                }

            });

        });

});
于 2012-09-12T18:58:42.397 に答える