在contenteditable裡的固定位置插入html

<div id="test" contenteditable="true">Some editable text</div>
<input type="button" unselectable="on" onclick="displayTextInserter();" value="Insert text">
<div id="textInserter">
<input type="text" id="textToInsert">
<input type="button" onclick="insertText()" value="Insert">
</div>

<script type="text/javascript">

function saveSelection() {

if (window.getSelection) {

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

return sel.getRangeAt(0);

}

} else if (document.selection && document.selection.createRange) {

return document.selection.createRange();

}

return null;

}

function restoreSelection(range) {

if (range) {

if (window.getSelection) {

sel = window.getSelection();

sel.removeAllRanges();

sel.addRange(range);

} else if (document.selection && range.select) {

range.select();

}

}

}

function pasteHtmlAtCaret(html) {

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

// non-standard and not supported in all 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);

}

range.insertNode(frag);

// Preserve the selection

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != "Control") {

// IE < 9

document.selection.createRange().pasteHTML(html);

}

}

var selRange;

function displayTextInserter() {

selRange = saveSelection();

document.getElementById("textInserter").style.display = "block";

document.getElementById("textToInsert").focus();

}

function insertText() {

var text = document.getElementById("textToInsert").value;

document.getElementById("textInserter").style.display = "none";

restoreSelection(selRange);

document.getElementById("test").focus();

pasteHtmlAtCaret(text);

}

</script>

注意：一定要使用button，因為button才有unselectable屬性，有此屬性才不會讓游標焦點離開contenteditable div，插入html才會到正確的位置。