Hello,
I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with
the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering
the following two problems when using execCommand to apply formatting, including font style and size, as well as bold, italic, and underline:
When all text in
the div is selected, execCommand simply does not work. execCommand works fine when only part of
the text is selected, but does nothing when all of
the text is selected.
Applying formatting with no text selected yields unexpected results. For example, when calling execCommand('bold') with no text selected and then typing results in bold text being typed until a spacebar is inserted, at which point
the bold formatting is lost (until another space is inserted, interestingly enough; then
the text becomes bold again).
To see what I mean, please try running
the following HTML code in Firefox 3:
<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>
Please try
the following:
Select
the word "Some" only. Click
the Bold button. This will make
the text bold, as expected.
Select
the entire phrase "Some editable text" (either manually or using CTRL-A). Click
the Bold button. Nothing happens. This demonstrates
the first bug shown above.
Hit
the backspace key to clear
the div. Click
the Bold button and begin typing. Type a few words with spaces. This will demonstrate
the second bug.
Any ideas on what could be causing these problems and how to work around them would be greatly appreciated!
