javascript - 可编辑<div>中插入标记位置的HTML节点

我正在为我们正在处理的私人站点开发基本的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（因为Some text在blockquote之内）。

最佳答案

因此，这里是您可以检查是否查看当前所处元素类型的方法。该函数适用于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

关于javascript - 可编辑<div>中插入标记位置的HTML节点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21849505/

BlockQuote

javascript - 可编辑<div>中插入标记位置的HTML节点