在contentEditable元素中插入HTML元素

Question

我有一個contentEditable div，我想插入HTML標簽（一個簡單的span元素）。

是否有跨瀏覽器解決方案，允許我在div選擇或光標位置插入這些標簽。 如果在頁面上選擇了其他內容（不在div中），我想將標記附加到div的末尾。

謝謝

Answer 1

這是一個kickstart

// get the selection range (or cursor     position)
var range = window.getSelection().getRangeAt(0); 
// create a span
var newElement = document.createElement('span');
newElement.id = 'myId';
newElement.innerHTML = 'Hello World!';

// if the range is in #myDiv ;)
if(range.startContainer.parentNode.id==='myDiv') {
   // delete whatever is on the range
   range.deleteContents();
   // place your span
   range.insertNode(newElement);
}

我沒有IE但在firefox，chrome和safari上工作正常。 也許你想玩range.startContainer只有在contentEditable div上進行選擇才能繼續。

編輯：根據quirksmode范圍介紹，您必須將window.getSelection（）部分更改為IE兼容。

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
    userSelection = document.selection.createRange();
}

Answer 2

以下將在所有主流瀏覽器（包括IE 6）中執行此操作。 它還將處理情況下選擇的到底是你外面<div>里面的以及其中選擇包含在子內（或更深層嵌套）病例元素<div>

2019年附錄 ： insertNodeOverSelection的第二個分支僅適用於IE <= 8，現在可以刪除。

 function isOrContainsNode(ancestor, descendant) { var node = descendant; while (node) { if (node === ancestor) return true; node = node.parentNode; } return false; } function insertNodeOverSelection(node, containerNode) { var sel, range, html; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); if (isOrContainsNode(containerNode, range.commonAncestorContainer)) { range.deleteContents(); range.insertNode(node); } else { containerNode.appendChild(node); } } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); if (isOrContainsNode(containerNode, range.parentElement())) { html = (node.nodeType == 3) ? node.data : node.outerHTML; range.pasteHTML(html); } else { containerNode.appendChild(node); } } } 

 <input type="button" onmousedown="insertNodeOverSelection(document.createTextNode('[NODE]'), document.getElementById('test'));" value="insert"> <div contenteditable="true"> <div id="test" style="background-color: lightgoldenrodyellow"> This is the editable element where the insertion will happen. Select something or place the cursor in here, then hit the button above </div> <div> No insertion will happen here </div> </div>