13
我正在处理Web浏览器的富文本编辑器,我想在RTE/ContentEditable元素中使用当前字体颜色和大小的值。是否有一些预先选定的函数来获取这些值,如execCommand,它直接与ContentEditable元素相连接?或者我应该使用一些文本范围jQuery库,它会得到这些属性?ContentEditable - 获取当前字体颜色/大小
我正在处理Web浏览器的富文本编辑器,我想在RTE/ContentEditable元素中使用当前字体颜色和大小的值。是否有一些预先选定的函数来获取这些值,如execCommand,它直接与ContentEditable元素相连接?或者我应该使用一些文本范围jQuery库,它会得到这些属性?ContentEditable - 获取当前字体颜色/大小
您可以使用document.queryCommandValue()
来获得当前选择的颜色和字体大小在所有主要的浏览器:
现场演示:http://jsfiddle.net/timdown/AJBsY/
代码:
var colour = document.queryCommandValue("ForeColor");
var fontSize = document.queryCommandValue("FontSize");
然而,结果是不一致的浏览器和FontSize
命令只适用于HTML <font>
元素中使用的字体大小1-7,而不是CSS,因此您最好是掌握元素co ntaining选择和检查使用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解释的地方,在某处用十六进制符号表示。但这对我来说不是问题,可能我会为它创造一些条件。谢谢! – optimista 2012-01-07 15:44:47
如果所选内容包含多个字体大小(或颜色),是否可以获得“未定义”?现在,当我选择全部时,它会提示“颜色:rgb(0,0,0),字体大小:16px”。这是令我困惑的目的。 – 2014-05-09 07:49:48
@Timo:选择的父元素可能不是你想象的那样。当你选择全部时,它可能是他可以理解的元素,它可能没有任何样式。 – 2014-05-09 08:58:38