ContentEditable - 获取当前字体颜色/大小 [英] ContentEditable - Get current font color/size

问题描述

我正在使用Rich Text Editor进行网页浏览，我希望在RTE / ContentEditable元素中使用当前字体颜色和大小的值。是否有一些预先选择的函数来获取这些值，例如execCommand，它直接与ContentEditable元素连接？或者我应该使用一些文本范围的jQuery库来获取这些属性吗？

I'm working on Rich Text Editor for web browser and I want to work with values of current font color and size in the RTE/ContentEditable element. Is there some preselected function to get these values, like execCommand, which is connected directly with ContentEditable element? Or should I use some text range jQuery library which will get these properties?

推荐答案

你可以使用文件.queryCommandValue（）获取所有主流浏览器中当前选择的颜色和字体大小：

You can use document.queryCommandValue() to get the colour and font size of the current selection in all major browsers:

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

代码：

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

但是，浏览器和 FontSize 命令仅适用于HTML < font> 元素中使用的字体大小1-7而不是CSS，因此您最好不要使用该元素包含选择并使用 window.getComputedStyle（） / currentStyle ：

However, the results are inconsistent across browsers and the FontSize command only works with font sizes 1-7 used in the HTML <font> element rather than CSS, so you'd be better off getting hold of the element containing the selection and examining its CSS properties using 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);
    }
}

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

This is an improvement, but there are still browser inconsistencies such as differing units or colour formats.

这篇关于ContentEditable - 获取当前字体颜色/大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！