5

designMode on を使用して iframe 内にシンプルな WYSIWYG エディターを構築しています。現在、選択したテキストを太字、斜体、下線を付けてリンクすることができ、正常に動作します。

しかし、 が、、、 、 タグcaret内にあるときに知りたいので、現在の選択が太字か何かであることをユーザーに通知できます。biua

例:

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タグの中にいます

ライブラリはありません私はこのことを学びたいです:)

4

1 に答える 1

9

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>
于 2011-02-06T14:58:59.797 に答える