title: HTML node at caret position in contenteditable <div>
body: <p>I am working on a basic Rich Text Editor (RTE) for a private site we're working on. The site requires the use of an RTE to add blog posts. </p>
  
  <p>Everything is working fine, but I would like to toggle the active state of buttons in the toolbar when they have the specific style applied to them. This works fine for things like bold, italic etc., since we can use <code>document.queryCommandValue("Bold")</code>, and so on.</p>
  
  <p>The problem we have is that there is no way to detect things such as <code>&lt;blockquote /&gt;</code> and <code>&lt;a /&gt;</code> tags. </p>
  
  <p>We add <code>&lt;blockquote&gt;</code> elements to the RTE as follows:</p>
  
  <pre><code>// Insert a blockquote:
  this._blockquote = function()
  {
      // Get the selected text:
      var theText = this._getSelectedText();
  
      // Are we replacing?
      if(theText != '')
      {
          var quote = $('&lt;blockquote /&gt;').html(theText).html();
          this._cmd('inserthtml', '&lt;blockquote&gt;'+quote+'&lt;/blockquote&gt;');
      }
      else
      {
          this._cmd('inserthtml', '&lt;blockquote&gt;&lt;/blockquote&gt;');
      }
  }
  </code></pre>
  
  <p>My question is, how can we detect the parent node at the caret position within a <code>contenteditable</code> <code>&lt;div&gt;</code>? For example, placing my cursor inside the <code>&lt;blockquote&gt;</code> node should return 'blockquote' (or something similar). </p>
  
  <p>jQuery is an option. </p>
  
  <p>So, given the following example:</p>
  
  <pre><code>&lt;blockquote&gt;Some| &lt;b&gt;text&lt;/b&gt;&lt;/blockquote&gt;
                  ^ cursor/caret position
  </code></pre>
  
  <p>I am looking to return <code>blockquote</code> (because <code>Some text</code> is within a blockquote).</p>