添加< h1>选择周围 [英] Adding <h1> around a selection

问题描述

我有一个jsfiddle - http://jsfiddle.net/88em6qq9/ - 我在哪里尝试在整行的选择中添加< h1> 标记：这里有一些内容，这里也是

I have a jsfiddle here - http://jsfiddle.net/88em6qq9/ - where I'm trying to add <h1> tags around a selection of the entire line: "Here is some content and here too"

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

Selecting the entire line and releasing the mouse button goes into the handler but rounding off the start and end end points with setStartBefore() and setEndAfter() gets me to different start and end containers, so the surround doesn't work.

如果我在自己的< span> 中加上这是一些内容 - 请参阅 http://jsfiddle.net/88em6qq9/1/ - 然后我们转到同一个容器和 h1 插入确实有效。但我需要一个解决方案，在选择周围放置< h1> 标签是否第一个短语是否在一个范围内。

If I put "Here is some content" in its own <span> - see http://jsfiddle.net/88em6qq9/1/ - then we round to the same container and the h1 insert does work. But I need a solution that puts <h1> tags around the selection whether the first phrase is in a span or not.

感谢您的帮助。

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

推荐答案

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

I hammered out a workable solution to this. The selected text range can be in one of four states when I start:

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

我可以通过以下四种操作中的一种来用h1围绕每一个：

And I'm able to surround each of these by an h1 by applying one of the four operations below:

1. 不要改变开始或最终容器;按原样应用h1


2. 将结束设置为在focusNode之后


3. 将start设置为在anchorNode之前


4. 设置结束到focusNode之后的父节点并将其设置为在anchorNode父节点之前开始

1. don't change start or end container; apply h1 as is
2. set end to after focusNode parent
3. set start to before anchorNode parent
4. set end to after focusNode parent and set start to before anchorNode parent

所以我将介绍这四个操作，将每个操作应用到我的范围，每次之后我都会看到canSurround（）是否返回true。当它停止并做环绕声。

So I go down through these four operations, applying each one to my range, and after each I see if canSurround() returns true. When it does I stop and do the surround.

代码是：

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;

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

If anyone has a better solution or sees problems with what I'm doing I'd be glad to hear from you.

谢谢

这篇关于添加< h1>选择周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！