ContentEditable - Geçerli font rengini/boyutunu göster

Question

Web tarayıcısı için Rich Text Editor üzerinde çalışıyorum ve RTE/ContentEditable öğesinde geçerli yazı tipi rengi ve büyüklüğü ile çalışmak istiyorum. ContentEditable öğeyle doğrudan bağlantılı olan execCommand gibi bu değerleri almak için önceden seçilmiş bir işlev var mı? Veya bu özellikleri alacak bir metin aralığı jQuery kitaplığı kullanmalı mıyım?

Answer 1

Sen tüm büyük tarayıcılarda geçerli seçimin rengi ve yazı tipi boyutunu almak için document.queryCommandValue() kullanabilirsiniz:

Canlı tanıtım: http://jsfiddle.net/timdown/AJBsY/

Kodu:

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

Ancak sonuçlarıdır tarayıcılar arasında tutarsız ve FontSize komutu, yalnızca CSS yerine HTML <font> öğesinde kullanılan 1-7 yazı tipi boyutları ile çalışır; seçim ntaining ve kullanarak CSS özelliklerini window.getComputedStyle()/currentStyle incelenmesi:

Canlı tanıtım: http://jsfiddle.net/timdown/K4n2j/

Kodu:

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

Bu bir gelişmedir, ancak bu tür birimleri farklı olarak tarayıcı tutarsızlıklar hala var ya renk formatları.