[CLOSED] Font family not correctly shown in HtmlEditor with Chrome

  1. #1

    [CLOSED] Font family not correctly shown in HtmlEditor with Chrome

    Dear Support,
    I am using Ext.Net v 2.5.2 in an asp.net application having .NET Framework 4.5.2 as target framework.

    An instance of the HtmlEditor is declared in the markup code, inside a container, providing a custom list of font families to manage:

                                <ext:Container runat="server" ID="MessageHtmlEditorContainer" Layout="HBoxLayout" Width="698">
                                        <ext:Label runat="server" Width="105" Text="<%$ I18n: Label_Message %>" ID="MessageLabel" />
                                            FontFamilies="Agency FB, Albertina, Antiqua, Architect, Arial, BankFuturistic, BankGothic, Blackletter, Blagovest, Calibri, 
                                                          Comic Sans MS, Courier, Cursive, Decorative, Fantasy, Fraktur, Frosty, Garamond, Georgia, Helvetica, Impact, 
                                                          Minion, Modern, Monospace, Open Sans, Palatino, Perpetua, Roman, Sans-serif, Serif, Script, Swiss, Times, Times New Roman, 
                                                          Tw Cen MT, Verdana">
    Navigating with Chrome browser (Version 75.0.3770.142 (Official Build) (64-bit)) the font families having name with blank space inside, like "Times new roman", or "Courier new", when selected, are not shown in the font family selector combo. They are perfectly visible in the dropdown when the font family selector is open.
    See the attached picture.

    Click image for larger version. 

Name:	HTMLEditor1.jpg 
Views:	249 
Size:	64.0 KB 
ID:	25275

    On other browsers: Edge, IE, Firefox all the font families are perfectly shown.

    Thanks in advance for your help.

    Peter Treier
    Last edited by fabricio.murta; Jul 22, 2019 at 3:45 PM.
  2. #2
    Hi Peter. We are investigating and attempting to reproduce locally. We will respond with an update today.
    Geoffrey McGill
  3. #3
    Hello Peter Treier!

    It seems at some point, Chrome implemented a new behavior in the return of Document.queryCommandValue() (sorry, no specific documentation from MDN), that keeps quotes in the response when it has white spaces within. And that's quite a breaking change.

    Well, and Ext.NET relied on that, which resulted in a bug that went fixed along the road to versions 3 and 4.

    Here's something you can do to get rid of this problem in v2, by simply overriding the current implementation to strip extra quotes from the font name while updating the toolbar of the HTMLEditor component:

    function stripQuotes(where) {
        var retVal = where;
        if (retVal.startsWith('"')) {
            retVal = retVal.substr(1);
        if (retVal.endsWith('"')) {
            retVal = retVal.substr(0, retVal.length - 1);
        return retVal;
    Ext.define("fixFontSpaceDisplay", {
        override: "Ext.form.field.HtmlEditor",
        updateToolbar: function() {
            var me = this,
                i, l, btns, doc, name, queriedName, fontSelect,
            if (me.readOnly) {
            if (!me.activated) {
            btns = me.getToolbar().items.map;
            doc = me.getDoc();
            if (me.enableFont && !Ext.isSafari2) {
                queriedName = stripQuotes(doc.queryCommandValue('fontName'));
                name = (queriedName ? queriedName.split(",")[0].replace(/^'/,'').replace(/'$/,'') : me.defaultFont).toLowerCase();
                fontSelect = me.fontSelect.dom;
                if (name !== fontSelect.value || name != queriedName) {
                    fontSelect.value = name;
            function updateButtons() {
                var state;
                for (i = 0, l = arguments.length, name; i < l; i++) {
                    name  = arguments[i];
                    try {
                        state = doc.queryCommandState(name);
                    catch (e) {
                        state = false;
                updateButtons('bold', 'italic', 'underline');
                updateButtons('justifyleft', 'justifycenter', 'justifyright');
            if(!Ext.isSafari2 && me.enableLists){
                updateButtons('insertorderedlist', 'insertunorderedlist');
            toolbarSubmenus = me.toolbar.query('menu');
            for (i = 0; i < toolbarSubmenus.length; i++) {
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello Fabricio,
    It perfectly fixed the behavior.
    Many thanks.
  5. #5
    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] SplitButton overflow menu not shown correctly - follow up
    By NewLink in forum 4.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 06, 2018, 5:58 AM
  2. [CLOSED] SplitButton overflow menu not shown correctly
    By NewLink in forum 4.x Legacy Premium Help
    Replies: 11
    Last Post: Oct 10, 2018, 4:51 PM
  3. [CLOSED] How to change default font family
    By trePjt in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 25, 2014, 5:41 AM
  4. [CLOSED] Font Family Extjs 4...
    By luiz in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 24, 2013, 1:33 PM
  5. htmleditor font
    By [WP]joju in forum 1.x Help
    Replies: 2
    Last Post: Jun 22, 2009, 8:02 AM

Tags for this Thread

Posting Permissions