About font / size reduction in wysiwyg editor

Question

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

The problem is empty lines, say, in the editor that the user typed:

line 1 line 2 

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

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

and the problem is this: document.queryCommandValue("fontname") gives me different values ​​if I click on an empty line and if the cursor moves to an empty line using the keyboard.

In the case of a mouse click, it gives me the default font name for the browser, while in another case (moving the cursor from the keyboard) it gives me the correct name ("Courier New").

In fact, in these two cases, document.selection has different values ​​of the type: "text" when the mouse is clicked and "no" when the keyboard.

Any help would be greatly appreciated!

Please tell me if my question is not clear.

Answer 1

It is somewhat unclear what you are trying to achieve. However, it looks like you are trying to get the font from an area that is not there. Non-breaking space (   ) is located outside the font tag ( <FONT> . . . </FONT> ) and therefore does not have any of the attributes of this tag (face or size). If you did not parse the space inside the font tag, you could get its face.

Here's a fiddle illustrating this. To see something, I replaced   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 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 tag of the first paragraph does not start anything. Clicking on the text in the second works fine.

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

With HTML, as in the first tag and the next Javascript, we can get the font face inside the tag containing   , although   not in this 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 violin.