ContentEditable - Получить текущий цвет шрифта/размер

Question

Я работаю над Rich Text Editor для веб-браузера, и я хочу работать со значениями текущего цвета и размера шрифта в элементе 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 работает только с размерами шрифта 1-7, используемыми в элементе HTML <font>, а не в CSS, так что вам лучше овладеть элементом co ntaining выделение и изучение его CSS свойства, используя window.getComputedStyle()/currentStyle:

Живая демонстрация: 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); 
    } 
} 

Это улучшение, но все еще есть браузер несогласованности, такие как различающиеся единицы или цветные форматы.