0

我正在使用 JQuery 编写文档编辑器，并且已经实现了基本格式设置：选择文本，单击一个按钮，文本被包含在适当的标签中。

为了改善这一点，我现在需要检查选择前后的文本，查看标签是否已经打开等。有没有简单的方法来检查选择是否是更大节点的一部分？

例如，如果我要在下面的文本中选择“跳转”并单击，正确的行为是删除<strong>它，因为它已经在一个<strong>节点中。

The <strong>quick brown fox jumps over the lazy dog</strong>.
4

3 回答 3

1

将其包裹在临时标签中，使其成为可选的 DOM 元素

The <strong>quick brown fox <tmp>jumps</tmp> over the lazy dog</strong>.

然后调用临时标签的父级并将其与正在应用的标签进行比较。

var $tmp = $('tmp');
var enclosingTagType = $tmp.parent()[0].tagName;
if (enclosingTagType == requestedTagType {
  ....profit...
}

甚至

$tmp.closest(requestedTagType)

看看它是否包裹在所有...

于 2012-04-09T12:27:55.547 回答
0

在这里，试试这个：

http://jsbin.com/asajuk/7/edit

var getSelectedNode = function ()
    {
        var node, selection;
        if (window.getSelection)
        {
            selection = getSelection();
            node = selection.anchorNode;
        }
        if (!node && document.selection)
        {
            selection = document.selection
            var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
            node = range.commonAncestorContainer ? range.commonAncestorContainer : range.parentElement ? range.parentElement() : range.item(0);
        }
        if (node)
        {
            return (node.nodeName == "#text" ? node.parentNode : node);
        }
    };
于 2012-04-09T12:52:56.377 回答
0

为了改善这一点，我现在需要检查选择前后的文本，查看标签是否已经打开等。有没有简单的方法来检查选择是否是更大节点的一部分？

（标签是 [in HTML, with <] 打开的，但你真正的意思是一个元素是否已经开始。区别对于你理解你在这里做什么至关重要。）

因为文档中的一个节点是文档树的一部分，而一个文本节点最多可以是一个非文本节点的子节点，所以每个文本选择都是“更大节点的一部分”。但是，你是否能找出那个节点是什么，是否容易做到，取决于你的能力和浏览器，因为它取决于浏览器的布局引擎使用的 DOM 实现。

例如，在基于 Gecko 的浏览器（如 Firefox）和基于 WebCore 的浏览器（如 Chrome/Google Chrome）中，您可以执行

var selection = window.getSelection();

在选择。然后，selection您将获得对实现Selection(Gecko) 或DOMSelection(WebCore) 接口的对象的引用，该对象具有诸如anchorNode引用实现Text接口的对象的属性（请参阅MDN上的 Gecko DOM 参考）。

该对象表示选择开始所在的文本节点，它有一个parentNode属性可以让您获取元素节点对象，并通过其tagNameornodeName属性获取元素类型名称：

var textParent = selection.anchorNode.parentNode;
var textParentType = textParent.nodeName;

的值textParent.parentNode也可以用来向上遍历文档树的上一层。

anchorNode当和focusNode属性引用不同的文本节点对象时，必须格外小心，因为选择通常不仅跨越多个文本节点，而且跨越多个元素。也就是说，在表格中，用户可以轻松选择文本“foobar”，如<td>foo</td><td>bar</td>.

通过运行时功能测试和异常处理，您可以确定支持哪个接口，而无需求助于容易出错的浏览器嗅探。

例如，如果我要在下面的文本中选择“跳转”并单击，正确的行为是删除strong它，因为它已经在一个strong节点中。

您可能需要重新考虑这一点。strong也许你只是选择了一个不好的例子，但元素中的元素可以有价值strong；内部元素的 CSS 属性不一定是多余的。另一个例子是强调em用户可能想要使用该strong元素的元素中已经存在的文本。

避免使用 jQuery；你不需要它，仔细检查你甚至不会想要它。

于 2012-04-09T14:12:18.567 回答