ContentEditable - Get current font color/size

Question

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 func

Answer 1

That way you can get all the style that applies on the element you clicked. try the snippet

Element.prototype.isChildOf = function (parent) {
    var node = this.parentNode;
    while (node !== null) {
        if (node === parent) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}
function getStyle(el) {
    if (!el || !el.style) return {};
    let styles = {};
    let style = el.getAttribute('style');
    if (style) {
        let collectStyles = style.split(';');
        if (Array.isArray(collectStyles)) {
            collectStyles.forEach(style => {

                const keyValue = style.split(':');
                if (keyValue[1] && keyValue[0])
                    styles[keyValue[0].trim()] = keyValue[1].trim();
            })
        }

    }
    return styles;
}
function getInheirtCss(fromElement, toElement) {
    var intailStyle = {};
    var currectElement = fromElement;
    while (currectElement && currectElement.isChildOf(toElement.parentElement)) {
        let map = getStyle(currectElement);
        for (const style in map) {
            if (map.hasOwnProperty(style)) {
                const value = map[style];
                if (!intailStyle[style])
                    intailStyle[style] = value;
            }
        }
        currectElement = currectElement.parentElement;
    }
    return intailStyle;
}
const inspect = (e) =>{
const target = e.target;
const results = getInheirtCss(target,editor);
console.log(results)
}
const editor = document.getElementById("editor");
if(editor){
editor.addEventListener("click",inspect)
}

<div  id="editor">
<p >
<span style="text-decoration:underline;">
please <span style="color:red;font-size:14px;">click</span>
<span style="font-size:24px;">on the text</span>
</span>
</p>
<p >
<span style="font-style:italic;font-size:14px;">
to get <span style="color:blue;">the result</span>
</span>
</p>
</div>

Answer 2

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

Live demo: http://jsfiddle.net/timdown/AJBsY/

Code:

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

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:

Live demo: http://jsfiddle.net/timdown/K4n2j/

Code:

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.