0

我正在使用 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 内而不是在它之前设置保存的选择边界。我不确定如何在标题元素之前移动边界。

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 回答