Question

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

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

line 1

line 2

空行在“第1行”和“第2行”之间，本例中空行的html源是（当用户按“enter”时由IE生成）：

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

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

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

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

非常感谢任何帮助！

如果我的问题不明确，请告诉我。

Answer 1

有些不清楚你想要实现的目标。但是看起来你正试图从没有的区域获取字体。非中断空格（ ）位于字体标记（<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来解决这个问题。

使用第一个标记和以下Javascript中的HTML，即使&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);

这包含在小提琴的末尾。

关于wysiwyg编辑器中的字体名称/大小下拉菜单

1 个答案: