如何在插入節點後插入空格

Question

我想在插入a節點後插入空格，問題是我插入的空間是在a節點內，而不是在a節點之後。

我有其他的解決方案，它插入一個span並把一個空間放入span節點，但我認爲它應該有一個更好的解決方案。

var $preload = $('<a href="url">test.txt</a>'); 
editor.insertNodeAtCaret($preload.get(0)); 
insertTextAtCursor('\u00A0', true); 

function insertNodeAtCaret(node) { 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
      range = range.cloneRange(); 
      range.selectNodeContents(node); 
      range.collapse(false); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
     var html = (node.nodeType == 1) ? node.outerHTML : node.data; 
     var id = "marker_" + ("" + Math.random()).slice(2); 
     html += '<span id="' + id + '"></span>'; 
     var textRange = document.selection.createRange(); 
     textRange.collapse(false); 
     textRange.pasteHTML(html); 
     var markerSpan = document.getElementById(id); 
     textRange.moveToElementText(markerSpan); 
     textRange.select(); 
     markerSpan.parentNode.removeChild(markerSpan); 
    } 
}; 



function insertTextAtCursor(text, moveTheCursor) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      var textNode = document.createTextNode(text); 
      range.insertNode(textNode); 
       if(moveTheCursor){ 
        range.setStartAfter(textNode); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } 
     } 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().text = text; 
    } 
    }; 

Answer 1

我建議適應insertNodeAtCaret插入多個節點：

function insertNodesAtCaret() { 
 
    var i, len, node, sel, range, html, id; 
 
    var escapeHtml = function(text) { 
 
     var div = document.createElement("div"); 
 
     div.appendChild(document.createTextNode(text)); 
 
     return div.innerHTML; 
 
    }; 
 
    
 
    if (typeof window.getSelection != "undefined") { 
 
     sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
      range = sel.getRangeAt(0); 
 
      range.collapse(false); 
 
      for (i = 0, len = arguments.length, node; i < len; ++i) { 
 
       node = arguments[i]; 
 
       if (typeof node == "string") { 
 
        node = document.createTextNode(node); 
 
       } 
 
       range.insertNode(node); 
 
       range.setStartAfter(node); 
 
       range.collapse(true); 
 
      } 
 
      range = range.cloneRange(); 
 
      range.selectNodeContents(node); 
 
      range.collapse(false); 
 
      sel.removeAllRanges(); 
 
      sel.addRange(range); 
 
     } 
 
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
 
     html = ""; 
 
     for (i = 0, len = arguments.length, node; i < len; ++i) { 
 
      node = arguments[i]; 
 
      if (typeof node == "string") { 
 
       html += escapeHtml(node); 
 
      } else if (node.nodeType == 1) { 
 
       html += node.outerHTML; 
 
      } else if (node.nodeType == 3) { 
 
       html += escapeHtml(node.data); 
 
      } 
 
     } 
 
     id = "marker_" + ("" + Math.random()).slice(2); 
 
     html += '<span id="' + id + '"></span>'; 
 
     var textRange = document.selection.createRange(); 
 
     textRange.collapse(false); 
 
     textRange.pasteHTML(html); 
 
     var markerSpan = document.getElementById(id); 
 
     textRange.moveToElementText(markerSpan); 
 
     textRange.select(); 
 
     markerSpan.parentNode.removeChild(markerSpan); 
 
    } 
 
} 
 

 
function insertElementAndSpace() { 
 
    var aEl = document.createElement("a"); 
 
    aEl.href = "http://stackoverflow.com?"; 
 
    aEl.appendChild(document.createTextNode("LINK TEXT")); 
 
    
 
    insertNodesAtCaret(aEl, "\u00a0"); 
 
}

<input type="button" onmousedown="insertElementAndSpace(); return false;" value="Insert"> 
 
<div contenteditable="true"> 
 
    This is some editable text. Put the caret somewhere in here and press the button. 
 
</div>