如何将元素（在可编辑的div内）从光标位置分成两部分，然后在它之间插入一个自定义元素？

Question

我需要将光标位置的元素（在可编辑的div内）分成两部分，然后在其之间插入一个自定义元素。

在进行更改之前： （竖线“|”表示光标的位置。我用“|”表示光标所在的位置给你。但实际上，这个字符在文本中是不存在的。）

<div contenteditable="true">
  <span style="font-size='14px'">this is | a test</span>

  <p>other paragraphs .....</p>
</div>

修改后：

<div contenteditable="true">
  <span style="font-size:'14px'">this is </span><span style="font-size:'16px'">new text|</span><span style="font-size:'14px'">a test</span>

<p>other paragraphs .....</p>
</div>

需要注意的是，修改后，光标必须插入到新的自定义元素最后一个字母之后。

我试了一下，但是：

  let sel = window.getSelection();
  let range = sel.getRangeAt(0);
  if (range.startContainer.parentNode.nodeName === 'SPAN') {
    let sel, range, cloneNode1, cloneNode2, cloneText, allContents, contentsBeforeCursor, contentsAfterCursor, newNode
    sel = window.getSelection();
    range = document.createRange();
    range.selectNode(sel.anchorNode);
    cloneNode1 = range.commonAncestorContainer.cloneNode();
    cloneNode2 = cloneNode1.cloneNode();
    cloneText = range.cloneContents();

    allContents = cloneText.textContent;
    contentsBeforeCursor = allContents.substring(0, sel.anchorOffset);
    contentsAfterCursor = allContents.substring(sel.anchorOffset, allContents.length);
    cloneNode1.textContent = contentsBeforeCursor
    cloneNode2.textContent = contentsAfterCursor
    newNode = document.createElement('SPAN');
    for (let i = 0; i < cloneNode1.attributes.length; i++) {
      let attr = cloneNode1.attributes.item(i);
      newNode.setAttribute(attr.nodeName, attr.nodeValue);
    }
    newNode.style.fontSize = '13px';

    range.selectNode(sel.anchorNode.parentNode);
    range.deleteContents();
    range.insertNode(cloneNode1)
    range.insertNode(newNode)
    range.insertNode(cloneNode2)
    newNode.focuse();

https://jsfiddle.net/nekooee/0h8zcfv4/43/

这是为了改变 SPAN 中间的字体。 CKEditor 也是如此。

Answer 1

我找到了答案。代码应该这样写：

let sel = window.getSelection();
let range = sel.getRangeAt(0);
if (range.startContainer.parentNode.nodeName === 'SPAN') {
    let newNode = document.createElement('SPAN');
   
    let cloneNode1, cloneNode2, cloneText, allContents, contentsBeforeCursor, contentsAfterCursor;
    const anchorOffset = sel.anchorOffset
    range.selectNode(sel.anchorNode);
    cloneNode1 = range.commonAncestorContainer.cloneNode();
    cloneNode2 = cloneNode1.cloneNode();
    cloneText = range.cloneContents();

    allContents = cloneText.textContent;
    contentsBeforeCursor = allContents.substring(0, anchorOffset);
    contentsAfterCursor = allContents.substring(anchorOffset, allContents.length);

    cloneNode1.textContent = contentsBeforeCursor;
    cloneNode2.textContent = contentsAfterCursor;

    for (let i = 0; i < cloneNode1.attributes.length; i++) {
        let attr = cloneNode1.attributes.item(i);
        newNode.setAttribute(attr.nodeName, attr.nodeValue);
    }
    newNode.style.fontSize = '13px';

    range.selectNode(sel.anchorNode);
    range.deleteContents();
    range.insertNode(cloneNode1);
    range.setStartAfter(cloneNode1);
    range.insertNode(cloneNode2)

    range.setStartAfter(cloneNode1);
    range.insertNode(newNode);
    const textNode = document.createTextNode('\u00A0');
    range.setStart(newNode, 0);
    range.insertNode(textNode);
    sel.removeAllRanges();
    range.selectNodeContents(newNode);
    sel.addRange(range);
}

Answer 2

就像我在评论 isn't this what you want 中所说的那样？

它甚至有和你一样的 HTML 标记。

您的 HTML 标记也完全错误：

<span style="font-size='14px'">

应该是：

 <span style="font-size:14px">

示例中的每个样式属性也是如此。

function pasteHtmlAtCaret(html, selectPastedContent) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);

            // Preserve the selection
          /*
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }*/
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}

function test()
    {
        var input = '<span style="font-size:25px;color:red"> new text </span>';
        //document.getElementById("myDiv").focus();
        pasteHtmlAtCaret(input, false);
    }

<div contenteditable="true">
  <span style="font-size:14px">this is a test</span>

  <p>other paragraphs .....</p>
  
<button type="button" onclick="test()" unselectable="on">Test</button>
</div>