您的位置：首页 > 其它

修改一个编辑器需要用的到range和selection对象

2013-04-11 00:17 363 查看

除了浏览器兼容麻烦点，其余的都是大赞啊，附下一些代码可以起手：

<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的资料

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航