Javascript：检测插入符号父节点答案

【问题标题】：Javascript: Detect Carets Parent NodeJavascript：检测插入符号父节点
【发布时间】：2011-02-06 14:42:49
【问题描述】：

我正在 iframe 中构建一个简单的 WYSIWYG 编辑器，其中 designMode on ，目前我可以将选定的文本设置为粗体、斜体和下划线并链接，它们工作正常。

但我想知道 caret 何时在 b、i、@ 987654325@，a，标签，所以我可以通知用户当前选择是粗体或其他。

例子：

Hello <b>Stackover|flow</b> is cool! = 你在 b 标签内

<i>Be|st place</i>! = 你在 i 标签内

Hello <a href="http://stackoverflow.com/">Go|od stuff!</a> = 你在 a 标签内

请不要图书馆，我想学习这些东西 :)

【问题讨论】：

this question的可能重复
@Tyler Holien ，我不是在谈论插入符号位置作为数字，我也想获得它的父节点名称，并且接受的答案解决方案仅适用于 textareas。
真的，对不起。如果不是文本区域，插入符号在哪里？
不 :)，我只是在第一行编辑了我的问题：我正在 iframe 中构建一个简单的 WYSIWYG 编辑器，并开启了 designMode

标签： javascript wysiwyg parent caret

【解决方案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>

【讨论】：

嗨@Dr.Molle，我知道commonAncestorContainer，但是parentElement +1 :)，我对commonAncestorContainer.nodeName 的问题是，对于每种文本，我都给了#text，所以我应该如何从中获取真正的父节点名称？ :)
如果commonAncestorContainer.nodeType 不是1，则选择commonAncestorContainer.parentNode
嗯，我在 Chrome(9.0.597.84)、Safari(5.0.3) 上得到了 #text，而在 firefox 和 Opera 上什么都没有，IE 未经测试：|
天啊！！！这适用于 Chrome 和 Safari，太棒了！！，我从一周开始就努力做到这一点。但不适用于 Firefox 和 Opera，但也许我错过了一些东西 :)
+1，因为这适用于绝大多数情况。有几种情况不适用：首先，在 IE 中，选择可以包含ControlRange（请参阅msdn.microsoft.com/en-us/library/ms537447%28v=vs.85%29.aspx）而不是TextRange，在这种情况下parentElement() 将导致错误.您可以过滤掉这种情况：else if(document.selection && document.selection.type != "Control")。其次，如果没有选择或插入符号，getRangeAt(0) 可能会引发错误，但只要可编辑元素具有焦点，就不会发生这种情况。