关于所见即所得编辑器中的字体名称/大小下拉菜单答案

【问题标题】：about font name/size drop downs in a wysiwyg editor关于所见即所得编辑器中的字体名称/大小下拉菜单
【发布时间】：2012-01-18 23:06:03
【问题描述】：

我正在为 IE 开发富文本编辑器，我想问一个关于在当前插入点获取“fontname”值的问题。

问题在于空行，假设用户在编辑器中输入：

line 1

line 2

空行位于“line 1”和“line 2”之间，本例中空行的html源代码为（用户按“enter”时IE生成）：

<P><FONT size=5 face="Courier New"></FONT>&nbsp;</P>

问题是这样的：document.queryCommandValue("fontname") 在鼠标单击空行和使用键盘将光标移动到空行的情况下给我不同的值。

在鼠标点击的情况下，它会给我浏览器的默认字体名称，而在其他情况下（使用键盘移动光标）它会给我正确的字体名称（“Courier New”）。

实际上在这两种情况下，document.selection 具有不同的“类型”值：鼠标单击时为“文本”，键盘时为“无”。

任何帮助将不胜感激！

如果我的问题不清楚，请告诉我。

【问题讨论】：

标签： javascript contenteditable rte

【解决方案1】：

有点不清楚您要达到的目标。但是，您似乎正在尝试从没有字体的区域获取字体。不间断空格 (&nbsp;) 在字体标签 (<FONT> . . . </FONT>) 之外，因此没有该标签的任何属性（面或大小）。如果不间断空格在字体标签内，你可以得到它的脸。

这是一个fiddle 说明了这一点。为了看点什么，我把&nbsp换成了Hello。

HTML：

<!-- Hello is outside the font tag. -->
<P><FONT size=5 face="Courier New"></FONT>Hello</P>

<!-- Hello is inside the font tag. -->
<p><font size=5 face="Times New Roman">Hello</font><p>

Javascript：

// Alert the face
function handleFonts(e) {
    alert(this.face);
}

// Get all the font elements
var el = document.querySelectorAll("font");

// Bind event handlers to the elements
// The last element of "el" is it's length so we only
// iterate to el.length - 1 or i < el.length
for (var i = 0; i < el.length; i++) {
    el[i].addEventListener("click", handleFonts, true);
    el[i].addEventListener("keypress", handleFonts, true);
}

单击第一个段落标记中的文本不会触发任何内容。单击第二个中的文本可以正常工作。

我们可以通过一些额外的 javascript 来解决这个问题。

使用第一个标签中的 HTML 和下面的 Javascript，我们可以在包含 &nbsp 的标签内获取字体的外观，即使 &nbsp 不在该字体标签内。

HTML：

<p id="last-p-tag"><font size=5 face="Tahoma"></font>Hello</p>

Javascript：

// Get the paragraph tag we want
var lastPTag = document.getElementById("last-p-tag");

// Bind an event to clicking on it
lastPTag.addEventListener("click", function(e) {
    // Alert the face attribute of the first font element
    // within that p tag
    alert(this.querySelector("font").face);
}, true);

这包含在小提琴的末尾。

【讨论】：