在选择周围添加 <h1>答案

【问题标题】：Adding <h1> around a selection在选择周围添加 <h1>
【发布时间】：2014-08-09 18:04:42
【问题描述】：

我在这里有一个 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>

【问题讨论】：

喜欢这个？ jsfiddle.net/88em6qq9/2
或者像这样？ jsfiddle.net/88em6qq9/3
谢谢，但这些都不起作用。我将第一个分叉到 jsfiddle.net/kpoqzqm6/1 并添加了一个 canSurround() 检查。这将返回 false，如果我继续进行，环绕将失败，并显示“无法在 'Range' 上执行 'surroundContents'：Range 已部分选择了非文本节点。”我将第二个分叉到 jsfiddle.net/510szd5m/2 并得到相同的结果。

标签： javascript range rangy

【解决方案1】：

我为此敲定了一个可行的解决方案。当我开始时，选定的文本范围可以处于四种状态之一：

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

通过应用以下四种操作之一，我可以用 h1 将它们包围起来：

不要更改开始或结束容器；按原样应用 h1
在focusNode父节点之后设置end
将 start 设置在 anchorNode 父级之前
将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;

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

谢谢

【讨论】：