about font name/size drop downs in a wysiwyg editor

Question

I'm working on a Rich Text Editor for IE, and I would like to ask a question about getting "fontname" value at the current insertion point.

The issue is with empty lines, let's say in the editor the user has typed in:

line 1

line 2

The empty line is between "line 1" and "line 2", the html source of the empty line in this example is (generated by IE when the user press "enter"):

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

and the problem is this: document.queryCommandValue("fontname") gives me different values in case of mouse click the empty line, and in case of moving cursor to the empty line using keyboard.

In case of mouse click, it gives me the default font name of the browser, while in the other case (move cursor using keyboard) it gives me the correct fontname ("Courier New").

Actually in these two cases, document.selection has different "type" values: "text" when mouse click and "none" when keyboard.

Any help will be much appreciated!

Please kindly let me know if my question is not clear.

Answer 1

It's somewhat unclear what you're trying to achieve. However it looks like you are trying to get the font face from an area that has none. The non breaking space ( ) is outside the font tag (<FONT> . . . </FONT>) and therefore has none of the attributes of that tag (face or size). If the non breaking space were inside the font tag, you could get its face.

Here's a fiddle illustrating that. For the sake of seeing something, I replaced &nbsp with 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);
}

Clicking on the text in the first paragraph tag triggers nothing. Clicking on the text in the second works fine.

We can get around this though with a little extra javascript.

With HTML like in the first tag and the following Javascript, we can get the face of the font within the tag containing &nbsp, even though &nbsp is not within that font tag.

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

This is included at the end of the fiddle.