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

Question

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

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

line 1

line 2

空行位于“第 1 行”和“第 2 行”之间，本例中空行的 html 源代码是（当用户按“enter”）：

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

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

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

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

任何帮助将不胜感激！

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

Answer 1

目前尚不清楚您想要实现什么目标。然而，您似乎正在尝试从没有字体的区域获取字体。不间断空格 ( ) 位于字体标记 (. . .) 之外，因此没有任何属性该标签（面孔或尺寸）。如果不间断空格位于字体标签内，您就可以获得它的外观。

这是一个 fiddle 来说明这一点。为了看到一些东西，我用 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，我们可以获取包含   的标签内的字体外观，即使   不在其中那个字体标签。

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

这包含在小提琴的末尾。