HTML节点位于contenteditable中的插入符位置<div>

Question

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.

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 document.queryCommandValue("Bold") , and so on.

The problem we have is that there is no way to detect things such as <blockquote /> and <a /> tags.

We add <blockquote> elements to the RTE as follows:

// Insert a blockquote:
this._blockquote = function()
{
    // Get the selected text:
    var theText = this._getSelectedText();

    // Are we replacing?
    if(theText != '')
    {
        var quote = $('<blockquote />').html(theText).html();
        this._cmd('inserthtml', '<blockquote>'+quote+'</blockquote>');
    }
    else
    {
        this._cmd('inserthtml', '<blockquote></blockquote>');
    }
}

My question is, how can we detect the parent node at the caret position within a contenteditable <div> ? For example, placing my cursor inside the <blockquote> node should return 'blockquote' (or something similar).

jQuery is an option.

So, given the following example:

<blockquote>Some| <b>text</b></blockquote>
                ^ cursor/caret position

I am looking to return blockquote (because Some text is within a blockquote).

Answer 1

So here is way you can check if to see what sort of an element you are currently in. The function works with chrome. With the recursive function we are able to return the entire array.

function returnNodeType()
{
   var node=null;      
   node=window.getSelection().getRangeAt(0).commonAncestorContainer;
   node = ((node.nodeType===1)?node:node.parentNode);      
   var nodeArray = [];
   returnarray = returnParentTag(node, nodeArray);
   return returnarray;
}

function returnParentTag(elem, nodeArray) {
    nodeArray.push(elem.tagName);
    if(elem.id != "editor") {
        var next = returnParentTag(elem.parentNode, nodeArray);
    if(next) return next;
    }
    else
        return nodeArray;
}

A jsfiddle link can be found here : http://jsfiddle.net/s6xXH/3