ContentEditable - Pobierz aktualny kolor czcionki/rozmiar

Question

Pracuję nad edytorem tekstu w formacie RTF dla przeglądarki internetowej i chcę pracować z wartościami bieżącego koloru czcionki i rozmiaru w elemencie RTE/ContentEditable. Czy jest jakaś wstępnie wybrana funkcja uzyskiwania tych wartości, na przykład execCommand, która jest połączona bezpośrednio z elementem ContentEditable? Czy powinienem użyć biblioteki jQuery z tekstem, która dostanie te właściwości?

Answer 1

Można użyć document.queryCommandValue() uzyskać kolor i rozmiar czcionki bieżącej selekcji we wszystkich głównych przeglądarkach:

żywo demo: http://jsfiddle.net/timdown/AJBsY/

Kod:

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

Jednak wyniki są niespójne w różnych przeglądarkach, a polecenie FontSize działa tylko w przypadku rozmiarów czcionek 1-7 używanych w elemencie HTML <font>, a nie w CSS, więc lepiej byłoby uzyskać element ntaining wybór i badanie ich właściwości CSS za pomocą window.getComputedStyle()/currentStyle:

żywo demo: http://jsfiddle.net/timdown/K4n2j/

Kod:

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

To jest poprawa, ale nadal istnieją rozbieżności przeglądarek takich jak różniące się jednostki lub formaty kolorów.