ContentEditable - 現在のフォントの色/サイズを取得

Question

Webブラウザのリッチテキストエディタで作業しています.RTE/ContentEditable要素の現在のフォントの色とサイズの値を使用したいと考えています。 ContentEditable要素に直接接続されているexecCommandのような、これらの値を取得するための事前選択された関数はありますか？または、これらのプロパティを取得するテキスト範囲のjQueryライブラリを使用する必要がありますか？しかし、結果は

var colour = document.queryCommandValue("ForeColor"); 
var fontSize = document.queryCommandValue("FontSize"); 

：

ライブデモ：http://jsfiddle.net/timdown/AJBsY/

コード

Answer 1

あなたはすべての主要なブラウザでは、現在の選択範囲の色やフォントサイズを取得するためにdocument.queryCommandValue()を使用することができますブラウザ間で一貫性がなく、FontSizeコマンドは、CSSではなくHTML <font>要素で使用されるフォントサイズ1〜7でのみ動作します。したがって、要素co選択をntainingとwindow.getComputedStyle()/currentStyleを使用して、そのCSSプロパティを調べる：

ライブデモ：http://jsfiddle.net/timdown/K4n2j/

コード：

function getComputedStyleProperty(el, propName) { 
    if (window.getComputedStyle) { 
     return window.getComputedStyle(el, null)[propName]; 
    } else if (el.currentStyle) { 
     return el.currentStyle[propName]; 
    } 
} 

function reportColourAndFontSize() { 
    var containerEl, sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      containerEl = sel.getRangeAt(0).commonAncestorContainer; 
      // Make sure we have an element rather than a text node 
      if (containerEl.nodeType == 3) { 
       containerEl = containerEl.parentNode; 
      } 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     containerEl = sel.createRange().parentElement(); 
    } 

    if (containerEl) { 
     var fontSize = getComputedStyleProperty(containerEl, "fontSize"); 
     var colour = getComputedStyleProperty(containerEl, "color"); 
     alert("Colour: " + colour + ", font size: " + fontSize); 
    } 
} 

これが改善されているが、そのような単位が異なるかのように、ブラウザの不整合が残っていますカラーフォーマット。