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

Posted 2023-03-06

【中文标题】ContentEditable - 获取当前字体颜色/大小

【英文标题】：ContentEditable - Get current font color/size

【发布时间】：2012-02-04 21:37:29

【问题描述】：

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

【参考方案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))，如果是，则获取节点的计算样式并添加字体大小和颜色柜台。遍历后，计数器告诉选择中是否有多种字体大小或颜色。似乎工作。