ContentEditable - 獲取當前字體顏色/大小

Question

我正在處理Web瀏覽器的富文本編輯器，我想在RTE/ContentEditable元素中使用當前字體顏色和大小的值。是否有一些預先選定的函數來獲取這些值，如execCommand，它直接與ContentEditable元素相連接？或者我應該使用一些文本範圍jQuery庫，它會得到這些屬性？

Answer 1

您可以使用document.queryCommandValue()來獲得當前選擇的顏色和字體大小在所有主要的瀏覽器：

現場演示：http://jsfiddle.net/timdown/AJBsY/

代碼：

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

然而，結果是不一致的瀏覽器和FontSize命令只適用於HTML <font>元素中使用的字體大小1-7，而不是CSS，因此您最好是掌握元素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); 
    } 
} 

這是一個進步，但仍然有瀏覽器的不一致性，例如不同的單位或顏色格式。