ContentEditable - 获取当前字体颜色/大小

Question

我正在为网络浏览器开发富文本编辑器，我想使用 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 元素而不是 CSS，因此您最好使用 window.getCompulatedStyle() 获取包含所选内容的元素并检查其 CSS 属性/ 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);
    }
}

这是一个改进，但仍然存在浏览器不一致的问题，例如不同的单位或颜色格式。