javascript - una - mapa erogeno de la mujer

ContentEditable: obtenga el color/tamaño de la fuente actual

Question

Estoy trabajando en el Editor de texto enriquecido para el navegador web y quiero trabajar con los valores del color y tamaño de la fuente actual en el elemento RTE / ContentEditable. ¿Hay alguna función preseleccionada para obtener estos valores, como execCommand, que está conectado directamente con ContentEditable element? ¿O debería usar algún rango de texto de la biblioteca jQuery que obtendrá estas propiedades?

Answer 1

Puede usar document.queryCommandValue() para obtener el color y el tamaño de fuente de la selección actual en todos los principales navegadores:

Demostración en vivo: http://jsfiddle.net/timdown/AJBsY/

Código:

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

Sin embargo, los resultados son inconsistentes en todos los navegadores y el comando FontSize solo funciona con los tamaños de fuente 1-7 utilizados en el elemento <font> HTML en lugar de CSS, por lo que sería mejor obtener el elemento que contiene la selección y examinar su Propiedades de CSS usando window.getComputedStyle() / currentStyle :

Demostración en vivo: http://jsfiddle.net/timdown/K4n2j/

Código:

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);
}
}

Esto es una mejora, pero todavía hay inconsistencias en el navegador, como unidades diferentes o formatos de color.