javascript - 在选择周围添加 <h1>

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 包围:

1. 不要更改开始或结束容器；按原样应用 h1
2. 将 end 设置为 focusNode 父级之后
3. 将起始位置设置在anchorNode父级之前
4. 将 end 设置为 focusNode 父级之后，将 start 设置为anchorNode 父级之前

因此，我依次执行这四个操作，将每个操作应用到我的范围，然后在每个操作之后查看 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;

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

谢谢