When entering text of various sizes into the WebHTMLEditor, the font size attribute is not always added to the surrounding span tags in the HTML.
If I increase my text size to say 7, then it appears in the HTML as expected; i.e. <span font-size="7">Extra large text</span>. However, If I reset the text size back to normal, size 2, then there is no font size attribute in the HTML code, even if I explicitly select it from the drop-down list; i.e. <span>Normal text</span>. I guess that it omits the font size attribute if it is the default or standard of the browser or control.
The problem is that if I save the HTML and use it elsewhere then the font size that I set will not get applied.
Is there any way that I can always force the WebHTMLEditor to add the font size attribute if I explicitly select one from the drop-down list?
Hi Nick,
Most functionality of WebHtmlEditor relies on document.execCommand. In case of FontSize the execCommand('fontsize', true, value) is used. For example, in case of values equal to 5 and 2, following statements are called:
document.execCommand('fontsize', true, 5);
document.execCommand('fontsize', true, 2);
The rest is up to a browser to appropriately interpret those requests.In most cases that command is applied to selected text.If there is no selected text and caret is located in the middle of text, then browser may apply that command to a block (text between BR, DIV, etc tags) where caret is located.If caret is located at the end of text, then browser may apply new font to newly entered text. If user after that command will not enter any text, then font-request will just die without any changes to html.
Besides that, unfortunately, each particular browser may generate completely different html for any action passed into execCommand. In case of "fontsize", a browser may use <font size="value"> or <span style="font-size:value"> or some others. The WebHtmlEditor has no control other that feature of a browser and it is not able to change or modify that functionality.
As far as I remember, the IE always generated <font>, older versions of Firefox and other browsers mostly generated <span>.
I just tested latest version of Firefox and found that now it generates same object as IE: <font>.
My tests of latest Chrome gave very obscure results. Generated htmls were completely different for different scenarios. For example, if user entered "abc", selected/highlighted "b" and pressed FontSize=5, then following was generated
<span style="font-size: 10pt; ">a</span><font size="5">b</font><font size="2">c</font>
If user entered "abc" + newLine + "123" + newLine + "abc", selected "123" and pressed FontSize=5, then that result was
abc<div><font size="5">123</font></div><div>abc</div>
Other combinations of new lines with selection/no-selection generated even more obscure htmls.
In case of IE and latest Firefox, there is always correct/expected object <font size="5"> for any situation.
Note: In most cases the fontsize=2 is default setting of a browser and browser ignores command FontSize=2, because it is already current/default value. The FontSize=2 has effect only in situation when caret/selection is located in a block of text which has different (not default) value of fontsize.
Many thanks for this information. It is very useful.