PDA

View Full Version : [CLOSED] Setting default font of HtmlEditor



prost
Feb 12, 2015, 9:41 AM
Hi Ext,

Setting the default font of a HtmlEditor does not work for me. The combobox with available fonts is emptied.

Sample:


<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title></head><body> <form id="Form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:Viewport ID="Viewport1" runat="server"> <Items> <ext:HtmlEditor ID="Content" runat="server" FontFamilies="Arial,Calibri,Courier New,Tahoma,Times New Roman,Verdana" DefaultFont="Verdana" Flex="1" /> </Items> </ext:Viewport> </form></body></html>

Please see the attachment for a screenshot.

I use Ext.net version: 2.5.2.33836

Thanks for your help,
Sander

Daniil
Feb 12, 2015, 7:21 PM
Hi Sander,

Yes, a DefaultFont is broken. Please use this as a workaround.

<ext:HtmlEditor
ID="Content"
runat="server"
Flex="1"
FontFamilies="Arial,Calibri,Courier New,Tahoma,Times New Roman,Verdana">
<Listeners>
<Initialize Handler="item.relayCmd('fontname', 'Verdana');" />
</Listeners>
</ext:HtmlEditor>

prost
Feb 16, 2015, 11:41 AM
Hi Daniil,

In Chrome it seems to work, unfortunately in IE11 not. When in IE11 the page renders, the font is correctly set to 'verdana' in the font combo. When I focus the editor to type, the font is selected back to 'Tahoma'.

Thanks a lot!

Daniil
Feb 16, 2015, 7:57 PM
I was initially testing with IE10 where it appears to be working well.

Reproduced with IE 11. So far I am unable to find a solution. Needs more time. I will post a follow-up once I determine something.

Daniil
Feb 17, 2015, 8:50 AM
I tend to think it is a bug in IE11. It is reproducible with a simple HtmlEditor without setting a default font.

<ext:HtmlEditor runat="server" />

Steps:

1. Run in IE11
2. Click inside HtmlEditor. The font is Tahoma.
3. Change the font to anything, say, Arial.
4. Click outside that HtmlEditor loses focus
5. Click inside again. The font changes to Tahoma again.

I was able to overcome the problem only if an HtmlEditor has something inside. A white space, at least. Here is a sample with the workaround applied. Hope this helps.

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
// Fix for defaultFont
Ext.form.field.HtmlEditor.override({
initDefaultFont: function () {
var me = this,
selIdx = 0,
fonts, font, select,
option, i, len, lower;

font = me.textareaEl.getStyle('font-family');
font = Ext.String.capitalize(font.split(',')[0]);
fonts = Ext.Array.clone(me.fontFamilies);
Ext.Array.include(fonts, font);
fonts.sort();

if (!me.defaultFont) {
me.defaultFont = font;
}

select = me.down('#fontSelect').selectEl.dom;
for (i = 0, len = fonts.length; i < len; ++i) {
font = fonts[i];
lower = font.toLowerCase();
option = new Option(font, lower);
if (font == me.defaultFont) {
selIdx = i;
}
option.style.fontFamily = lower;

if (Ext.isIE) {
select.add(option);
} else {
select.options.add(option);
}
}

select.options[selIdx].selected = true;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server">
<Items>
<ext:TextField runat="server" />

<ext:HtmlEditor
ID="Content"
runat="server"
FontFamilies="Arial,Calibri,Courier New,Tahoma,Times New Roman,Verdana"
DefaultFont="Verdana"
Width="800">
<PreInit Handler="if (Ext.isIE11) {
if (!this.value) {
this.value = '&nbsp;';
}
}" />
<Listeners>
<Initialize Handler="if (Ext.isIE11) {
item.execCmd('selectAll', true);
}

item.relayCmd('fontname', item.defaultFont);" />
</Listeners>
</ext:HtmlEditor>
</Items>
</ext:Viewport>
</form>
</body>
</html>

prost
Feb 19, 2015, 12:10 PM
Thanks for your excellent support!