Question

我正在使用内容可编辑构建一个所见即所得。我希望Bold按钮突出显示插入符号是否在粗体文本中等等。我有这个工作，但我无法弄清楚如何为H1＆amp; H2。 CommandState似乎不适用于那些项目。

我的JS代码：

setInterval(function () {
    var isBold = document.queryCommandState("Bold");
    var isItalic = document.queryCommandState("Italic");
    var isUnderlined = document.queryCommandState("Underline");

    if (isBold) {
        $('button[rel=Bold]').addClass('active');
    } else {
    $('button[rel=Bold]').removeClass('active');
    }    
    if (isItalic) {
        $('button[rel=Italic]').addClass('active');
    } else {
        $('button[rel=Italic]').removeClass('active');
    }
    if (isUnderlined) {
        $('button[rel=Underline]').addClass('active');
    } else {
        $('button[rel=Underline]').removeClass('active');
    }

}, 100);

简化测试用例：http://jsfiddle.net/kthornbloom/gL4xS/

如何突出显示H1＆amp;当插入符号位于其中时是H2按钮，是否有更紧凑的写入方式？

Answer 1

为了做到这一点，你需要获得范围。您可以使用document.selection或window.getSelection执行此操作，具体取决于您使用的浏览器。我不会连续间隔运行，而是在可编辑的keyup

上收听mouseup和div

以下是一些示例代码，可以完成您想要的任务。 http://jsfiddle.net/bplumb/gL4xS/2/

$('#editor').on('keyup', function(){
    rangeMouseup();
});

$('#editor').on('mouseup', function(event){
    $('button').removeClass('active');
    $('button[rel='+event.target.nodeName+']').addClass('active');    
});

function rangeMouseup(){
    if (document.selection){
        $(document.selection.createRange().parentElement()).trigger('mouseup');
    }
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        $(range.commonAncestorContainer.parentNode).trigger('mouseup');
        $(range.commonAncestorContainer).trigger('mouseup');
    }
}

修改

如果您需要它来为插入符号的所有父节点工作，那么在DOM中循环并根据需要调整样式。 http://jsfiddle.net/bplumb/gL4xS/5/

$('#editor').on('mouseup', function(event){ $('button').removeClass('active'); var node = event.target; while(node.nodeName != 'DIV'){ $('button[rel='+node.nodeName+']').addClass('active'); node = node.parentNode; } });

Answer 2

您可以获取当前的dom元素并检查它是否为h1

setInterval(function () {
    var isBold = document.queryCommandState("Bold");
    var isItalic = document.queryCommandState("Italic");
    var isUnderlined = document.queryCommandState("Underline");
    var el = getSelectionContainerElement();
    if($(el).is('h1')){
         $('button[rel="Primary Heading"]').addClass('active');
    }else{
        $('button[rel="Primary Heading"]').removeClass('active');
    }
    if (isBold) {
        $('button[rel=Bold]').addClass('active');
    } else {
    $('button[rel=Bold]').removeClass('active');
    }    
    if (isItalic) {
        $('button[rel=Italic]').addClass('active');
    } else {
        $('button[rel=Italic]').removeClass('active');
    }
    if (isUnderlined) {
        $('button[rel=Underline]').addClass('active');
    } else {
        $('button[rel=Underline]').removeClass('active');
    }

}, 100)

从How do I find out the DOM node at cursor in a browser's editable content window using Javascript?

复制以下函数

function getSelectionContainerElement() {
    var range, sel, container;
    if (document.selection && document.selection.createRange) {
        // IE case
        range = document.selection.createRange();
        return range.parentElement();
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit selection object has no getRangeAt, so
            // create a range from other selection properties
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
        }

        if (range) {
           container = range.commonAncestorContainer;

           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}

如何判断插入符号是否在H1标记内？

2 个答案: