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

Question

我正在为我们正在处理的私人站点开发基本的Rich Text Editor（RTE）。 该网站要求使用RTE添加博客文章。

一切工作正常，但是当它们应用了特定样式时，我想切换工具栏中按钮的活动状态。 因为我们可以使用document.queryCommandValue("Bold")等等，所以这对于诸如粗体，斜体等工作正常。

我们遇到的问题是无法检测到<blockquote />和<a />标记之类的东西。

我们将<blockquote>元素添加到RTE中，如下所示：

// 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>');
    }
}

我的问题是，如何才能在contenteditable <div>的插入符号位置检测父节点？ 例如，将光标放在<blockquote>节点内应返回“ blockquote”（或类似内容）。

jQuery是一个选项。

因此，给出以下示例：

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

我希望返回blockquote （因为在blockquote中Some text ）。

Answer 1

因此，这是您可以检查是否查看当前所处元素类​​型的方法。该函数适用于chrome。 使用递归函数，我们可以返回整个数组。

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;
}

可以在这里找到jsfiddle链接： http : //jsfiddle.net/s6xXH/3