ContentEditable - получает текущий цвет / размер шрифта - PullRequest
Новая
       35

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

14 голосов
/ 07 января 2012

Я работаю в Rich Text Editor для веб-браузера и хочу работать со значениями текущего цвета и размера шрифта в элементе RTE / ContentEditable.Есть ли какая-то предварительно выбранная функция для получения этих значений, например execCommand, которая напрямую связана с элементом ContentEditable?Или мне следует использовать библиотеку jQuery для текстового диапазона, которая получит эти свойства?

1 Ответ

30 голосов
/ 07 января 2012

Вы можете использовать document.queryCommandValue(), чтобы получить цвет и размер шрифта текущего выделения во всех основных браузерах:

Демонстрация в реальном времени: http://jsfiddle.net/timdown/AJBsY/

Код: 

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

Однако результаты несовместимы во всех браузерах, и команда FontSize работает только с размерами шрифта 1-7, используемыми в элементе HTML <font>, а не в CSS, так что вам лучше будет получить доступ к элементу, содержащему выделение и проверка его свойств 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);
    }
}

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

...