如何判斷脫字號是否在H1標籤內？

Question

我正在構建一個內容可編輯的wysiwyg。我希望粗體按鈕突出顯示插入符號是否在粗體文本等內。我有這個工作，但我不知道如何執行相同的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按鈕，當插入符號是在其中，是有寫這個的更緊湊的方式？

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