1

我正在构建一个内容可编辑的所见即所得。当插入符号在粗体文本中时，我希望粗体按钮突出显示，等等。我有这个工作，但我不知道如何为 H1 和 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 和 H2 按钮，是否有更紧凑的书写方式？

4

2 回答 2

3

您将需要获得范围才能做到这一点。您可以使用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;
    }
});
于 2013-07-31T14:39:11.087 回答
1

可以获取当前的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)

以下函数复制自：如何使用 Javascript 在浏览器的可编辑内容窗口中找出光标处的 DOM 节点？

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;
        }   
    }
}
于 2013-07-31T14:49:09.920 回答