Question

我正在使用rangy并且有一个带有contenteditable div的案例，用户选择可以保存并稍后恢复，以便可以插入HTML。

我的问题是，如果用户在标题元素中选择，我不希望在标题中插入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内而不是之前。我不确定如何在标题元素之前移动边界。

Answer 1

我无法弄清楚如何用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();

                }

            });

        });

});

Rangy将用户选择的边界移出header元素

1 个答案: