嗨,我已经使用contentEditable有一段时间了,我认为我对它有很好的掌握。唯一让我困扰的是如何获取所有部分或全部包含在用户选择范围内的节点的引用数组。有人有什么想法吗?
以下是一个可以开始工作的示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function getSelectedNodes(){
var sel = window.getSelection();
try{var frag=sel.getRangeAt(0).cloneContents()}catch(e){return(false);}
var tempspan = document.createElement("span");
tempspan.appendChild(frag);
var selnodes = Array() //<<- how do I fill this array??
var output = ''
for(i in selnodes){
output += "A "+selnodes[i].tagName+" was found\n"
//do something cool with each element here...
}
return(output)
}
</script>
</head>
<body contentEditable="true" onkeypress="return(keypress(event))">
<div>This <strong>div</strong> is <em>content</em> <span class='red'>editable</span> and has a couple of <em><strong>child nodes</strong></em> within it</div>
<br />
<br />
<a href="#" onmouseover="alert(getSelectedNodes())">hover here</a>
</body>
</html>
<b> text 1 <br> text 2 </b>
这样的结构中,并且突出显示了text1
,则startContainer
是文本,而endContainer
是b
,而next
永远不会返回b
,因此它最终会返回所有元素。我认为你必须考虑endOffset
和startOffset
。Rangy可以正确处理这个问题(考虑到偏移量),所以如果你不介意,我已经添加了一个答案,其中包含从Rangy中提取的自包含代码。 - 1110101001