Question

我在这里有一个jsfiddle - http://jsfiddle.net/88em6qq9/ - 我试图在整行的选择中添加<h1>个标签：“这里有一些内容也在这里”

选择整行并释放鼠标按钮会进入处理程序，但使用setStartBefore（）和setEndAfter（）将开始和结束点四舍五入会使我进入不同的开始和结束容器，因此环绕声不起作用。

如果我在其自己的<span>中添加“这是一些内容” - 请参阅http://jsfiddle.net/88em6qq9/1/ - 然后我们转到同一个容器，h1插件就可以了。但是我需要一个解决方案，在选择周围放置<h1>标签，不管第一个短语是否在一个范围内。

感谢您的帮助。

<div id="container">
     <div class="content" contenteditable="true">Here is some content<span class="red"> and here too</span></div>
</div>

Answer 1

我为此制定了可行的解决方案。我开始时，所选文本范围可以是四种状态之一：

startContainer in a span    endContainer in a span
         no                       no
         yes                      no
         no                       yes
         yes                      yes

我可以通过应用以下四种操作之一，以h1包围其中的每一项：

不要更改开始或结束容器;按原样申请h1
将end设置为focusNode parent
将start设置为anchorNode parent
将end设置为在focusNode parent之后并将start设置为在anchorNode parent

所以我逐步完成这四个操作，将每个操作应用到我的范围，然后在每个操作后，我看到canSurround（）是否返回true。我什么时候停下来做环绕声。

代码是：

case "RTE_h1_icon" :
                newNode = document.createElement("h1");
                var sel = rangy.getSelection(); 
                anchorParent = sel.anchorNode.parentNode;
                focusParent = sel.focusNode.parentNode;
                range = sel.getRangeAt(0);

                if(range.canSurroundContents()) {  // no modification
                    range.surroundContents(newNode);
                    break;
                }
                range1 = range;
                range1.setEndAfter(focusParent);  // adjust end
                if(range1.canSurroundContents()) {
                    range1.surroundContents(newNode);
                    break;
                }

                range2 = range;
                range2.setStartBefore(anchorParent);  // adjust start
                if(range2.canSurroundContents()) {
                    range2.surroundContents(newNode);
                    break;
                }

                range3 = range;
                range3.setStartBefore(anchorParent);  // adjust start
                range3.setEndAfter(focusParent);      // and end
                if(range3.canSurroundContents()) {
                    range3.surroundContents(newNode);
                    break;
                }
                break;

如果有人有更好的解决方案或看到我正在做的事情的问题，我很高兴收到你的来信。

由于

在选择</h1>周围添加<h1>

1 个答案: