Question

我正在为我们正在处理的私人网站制作基本的富文本编辑器（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在一个区块引用中。）

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

在contenteditable <div> </div>中的插入位置的HTML节点

1 个答案: