在SPAN内部插入HTML时拆分SPAN

Split SPAN when Inserting HTML Inside of it

本文关键字：SPAN 拆分 HTML 插入 内部      更新时间：2023-09-26

我有一个设置，其中我有大量格式化为HTML的文本（包含标题和段落），所有这些都在contenteditablediv中。我设置了一个函数，可以在单击按钮时将自定义HTML实体<newnote>插入到可编辑div中。这很好，只是当在跨度内插入音符时，我需要将跨度一分为二，并将<newnote>放在它们之间。

我已经研究了网络上许多将文本插入DIV的函数，由于插入HTML是一项要求，所以document.createTextNode()似乎是我唯一的选择。

这是我迄今为止设置的内容，它检查父级是否是SPAN，然后根据if语句放置不同的内容。

function insertNodeAtRange() {
  var newRange = rangy.getSelection().getRangeAt(0);
  var parentElement = newRange.commonAncestorContainer;
  if (parentElement.nodeType == 3) {
      parentElement = parentElement.parentNode;
  }
  var el = document.createElement('newnote');
  el.className = "bold";
  if (parentElement.tagName == 'SPAN') {
      el.appendChild(document.createTextNode(" </span>Test<span> "));
  } else {
      el.appendChild(document.createTextNode(" Test "));
  }
  newRange.insertNode(el);
}

这是我的沙发

提前感谢您的帮助。。。

代码的主要问题是试图通过创建文本节点来生成/修改html。文本节点不会被解析为dom。

这应该对你有用：

JSFiddle

function insertNodeAtRange() {
    var newRange = rangy.getSelection().getRangeAt(0);
    var parentElement = newRange.commonAncestorContainer;
    if (parentElement.nodeType == 3) {
        parentElement = parentElement.parentNode;
    }
    var el = document.createElement('newnote');
    el.className = "bold";
    el.appendChild(document.createTextNode(" Test "));
    newRange.insertNode(el);
    if (parentElement.tagName == 'SPAN') {
        var $newnote = $(el);
        var $span1 = $("<span>");
        var $span2 = $("<span>");
        var left = true;
        $parentElement = $(parentElement);
        $parentElement.contents().each(function (i, node) {
            if (node.isSameNode(el)) {
                left = false;
            } else if (left) {
                $span1.append(node);
            } else {
                $span2.append(node);
            }
        });
        $parentElement.replaceWith($newnote);
        $span1.insertBefore($newnote);
        $span2.insertAfter($newnote);
    }
}

我只是直接插入newnote元素，然后得到之前的东西并将其放入span1，得到之后的东西并放入span2，用newnote替换现有的span，并将新的span定位在newnote周围。

相关文章：