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

【问题标题】：ContentEditable - Get current font color/sizeContentEditable - 获取当前字体颜色/大小
【发布时间】：2012-02-04 21:37:29
【问题描述】：

我正在为 Web 浏览器开发富文本编辑器，我想在 RTE/ContentEditable 元素中使用当前字体颜色和大小的值。是否有一些预先选择的函数来获取这些值，比如 execCommand，它直接与 ContentEditable 元素连接？还是我应该使用一些文本范围的 jQuery 库来获取这些属性？

【问题讨论】：

标签： javascript text editor contenteditable font-size

【解决方案1】：

您可以使用document.queryCommandValue()获取所有主流浏览器中当前选择的颜色和字体大小：

现场演示：http://jsfiddle.net/timdown/AJBsY/

代码：

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

但是，不同浏览器的结果不一致，FontSize 命令仅适用于 HTML <font> 元素中使用的字体大小 1-7，而不是 CSS，因此您最好掌握包含使用 window.getComputedStyle() / currentStyle 选择和检查其 CSS 属性：

现场演示：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);
    }
}

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

【讨论】：

在所有浏览器和 IE7,8 的新版本中，我没有注意到 font-size 属性中的单位存在一些问题。然而，颜色在某处用 rgb 解释，在某处用十六进制表示法解释。但这对我来说还不是问题，可能我会为它创造一些条件。谢谢！
如果选择包含多个字体大小（或颜色），是否有可能获得“未定义”？现在，当我全选时，它会提示“颜色：rgb(0, 0, 0)，字体大小：16px”。这对我的目的来说是令人困惑的。
@Timo：选择的父元素可能不是您认为的那样。全选时，很可能是 contenteditable 元素，可能没有任何样式。
我正在尝试遍历 contenteditable div 的所有（子和孙）节点并测试if(sel.containsNode(node, true))，如果是，则获取节点的计算样式并添加字体大小和颜色柜台。遍历后，计数器告诉选择中是否有多种字体大小或颜色。似乎工作。