Question

我想删除标记并将其添加到选定的文本中，只需点击它即可。

我已经可以通过以下方式将选定的文字括在代码中：

if (window.getSelection) 
{
    selection = getSelection();

    var newNode = document.createElement("b");
    range.surroundContents(newNode);        
}

既然那时我想要一种方法来删除我之前添加的标记，但使用range.commonAncestorContainer的常用方法会给我<div>的最低父级类型。

作为调试的一部分，我只是修改了我用来添加标记的代码（以确保我有一个标记，我也首先添加了它）来删除父节点。

if (window.getSelection) {
    selection = getSelection();

    var newNode = document.createElement("b");
    range.surroundContents(newNode);
    node = range.commonAncestorContainer;
    node.remove();
}

这将删除新添加的<div>代码的父，而不是代码本身。

供参考，这是HTML：

<div contenteditable="true" id="input" class="inputblock" onclick="getClick()" onkeypress="changeNodeType(event)" data-text="Please paste your text here."></div>

标记将在粘贴到显示的<div>中的文字中创建。

可以忽略它也删除内容的事实。我找到了解决这个问题的方法。

Answer 1

我遗憾的是，我没有时间花在编写完整的代码解决方案上，但这就是我过去解决这个问题的方法：

规范您的范围。这是最难的部分。 IE，边缘和不同浏览器的行为不同，因此您需要处理许多特殊边缘情况。例如，如果范围恰好在空文本节点之前，那么IE将会做很多事情
对于您的start和endcontainer，如果它们是文本节点，则不执行任何操作
否则，您需要使用NodeIterator进行有序遍历并转到启动容器的下一个节点，以及最终容器的上一个节点。这解决了当您选择hello之类的内容时，选择可以是|hello|或|hello|。通过规范化并沿着树走下去，在两种情况下，最终都会得到|hello|的选择。很难在没有图片的情况下解释这一点，所以我鼓励你绘制DOM树并走到开始容器的下一个最里面的子节点和最终容器的前一个最里面的子节点。
1. 一旦你坐下来，你可以开始向上走树，找到一个粗体标签。这只是node.contains('b');
2. 对开始和结束节点执行此操作，然后查看您是否指向相同的粗体标记，并且文本内容与您的选择相同。
3. 如果是这样，你就找到了你的大胆标签。

这是一个非常重要的代码量，并且需要进行大量测试，因为在浏览器中设置选择和范围时，边缘情况非常糟糕。我已经争取了很长一段时间:-)我祝你好运

删除选择的直接父节点（<b>）

1 个答案: