修改一个编辑器需要用的到range和selection对象
除了浏览器兼容麻烦点，其余的都是大赞啊，附下一些代码可以起手：
<html>
<head>
<script type="text/javascript">
function MoveButton ()
{
var wanderer = document.getElementById ("wanderer");
if (window.getSelection)
{ // all browsers, except IE before version 9
var selection = window.getSelection ();
if (selection.rangeCount > 0)
{
var range = selection.getRangeAt (0);
range.collapse (false);
range.insertNode (wanderer);
}
}
else
{
// Internet Explorer before version 9
var textRange = document.selection.createRange ();
textRange.collapse (false);
textRange.pasteHTML (wanderer.outerHTML);
wanderer.parentNode.removeChild (wanderer);
}
}
function insertHtmlAtSelectionEnd(html, isBefore)
{
var sel, range, node;
if (window.getSelection)
{
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount)
{
range = window.getSelection().getRangeAt(0);
range.collapse(isBefore);
// Range.createContextualFragment() would be useful here but was
// until recently 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);
}
}
else if (document.selection && document.selection.createRange)
{
range = document.selection.createRange();
range.collapse(isBefore);
range.pasteHTML(html);
}
}
</script>
</head>
<body>
<div onmouseup="MoveButton ()" style="width:400px; background-color:#e0f0d0;">
Select some text with your mouse within this field.
When the left button is released the wanderer button is placed
at the ending of the selection.
Left mouse clicks also move the wanderer button in Internet Explorer, Firefox, Google Chrome and Safari.
</div>
<button id="wanderer">wanderer</button>
<br/><br/><br/><br/>
<input type="button" onclick="insertHtmlAtSelectionEnd('[BEFORE]', true)" value="Insert before">
<input type="button" onclick="insertHtmlAtSelectionEnd('[AFTER]', false)" value="Insert after">
<div contenteditable="true">Some editable text. Select some and press on of the buttons above.</div>
</body>
</html>
详细资料可以查看网站： 里面讲的非常详细。
http://help.dottoro.com/ljehhofi.php Mozilla和IE都有
https://developer.mozilla.org/en-US/docs/DOM/Selection Mozilla的资料
http://msdn.microsoft.com/en-us/library/ie/hh772124(v=vs.85).aspx IE的资料