Question

我有一个设置，其中有大量格式为HTML（包含标题和段落）的文本 - 所有文本都在contenteditable div内。我已经设置了一个功能，可以在单击按钮时将自定义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);
}

Here is what I have sofar

提前感谢您的帮助......

Answer 1

您的代码的主要问题是您尝试通过创建文本节点来创建/修改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并定位新的跨越新笔记。

在其中插入HTML时拆分SPAN

1 个答案: