Javascript：检测插入符父节点

Question

我正在使用 designMode on 的 iframe 中构建一个简单的所见即所得编辑器，目前我可以将所选文本设置为粗体、斜体和下划线并进行链接，并且它们工作正常。

但我想知道插入符何时位于b、i< /code>、u、a 标签，这样我就可以通知用户当前选择是粗体还是其他。

示例：

Hello Stackover|flow;太酷了！ = 您位于 b 标签内

Be|st place! = 您位于 i 标签内

Hello Go|od stuff! = 您位于 a 标签内

请不要使用库，我想学习这些东西:)

Answer 1

MSIE lte 8：TextRange.parentElement()

其他：DOMRange.commonAncestorContainer

<script type="text/javascript">
<!--
function fx()
{

  var target=null;
  if(window.getSelection)
  {
    target=window.getSelection().getRangeAt(0).commonAncestorContainer;
    return((target.nodeType===1)?target:target.parentNode);
  }
  else if(document.selection)
  {
    var target=document.selection.createRange().parentElement();
  }
  return target;
}
//-->
</script>
<input type="button" onclick="alert(fx().tagName)" value="click">
<div id="editor" contenteditable="true">
Hello <b>Stackoverflow</b> is cool! <i>Best place</i>
Hello <a href="http://stackoverflow.com/">Good stuff!</a>
</div>