Adding New Font Family to email compose Tinymce Editor in sugar 10.x

The answer referenced in that thread addresses all the BWC implementations of TinyMCE - so that will cover you for PDF Manager, Email Templates etc.

However, in sidecar, there is a newer version of TinyMCE (v4) in use (as well). I've not had to configure it yet, but I believe if you have a read of clients/base/fields/htmleditable_tinymce/htmleditable_tinymce.js, you'll see that its possible to provide your own config to it when it gets instantiated, and hence, get your own fonts in there. Sorry that I don't have a code snippet to help further!

Hi Adam,

Thanks for your reply.

I have gone through the htmleditable_tinymce.js file in clients/base/fields/htmleditable_tinymce/ and there is a function called getTinyMCEConfig. I tried to override the few parameters in toolbar. The changes are applying in the UI but here the font family has not been assigned. Where as it is showing like 'fontselect' in the toolbar.

As there is a script file for the config parameter, I have tried overriding the font families in that respective file (include/javascript/tinymce4/tinymce.min.js and include/javascript/tinymce4/tinymce.js). But the changes I have made in script file are not showing in the UI.

Kindly please suggest.

Hi Dhanalaskhmi Vusirika, I found a better resource for you to review - somehow missed this before!

https://support.sugarcrm.com/Documentation/Sugar_Developer/Sugar_Developer_Guide_10.0/Architecture/TinyMCE/ 

Hi Adam,

I had gone through the shared support link earlier. 

As suggested in the article, I had override the default config settings by adding the file in custom/include/tinyMCEDefaultConfig.php. As said earlier after adding this file, the new font family is coming only in PDF tiny mce field.

Please let me know if I need to do anything else apart from this. (to get new font family in Email tiny mce field.)

PFA

Hi Dhanalaskhmi Vusirika,

In the article, you've followed the instructions under the heading "Configuring the TinyMCE Editors used in BWC Modules", and that is implemented fine.

However, in addition, you also need to follow the instructions in the section above called "Configuring the TinyMCE Editor", as this covers the TinyMCE4 implementation for sidecar modules like the email interfaces too.

Regards,

Adam

Hi Adam,

As specified in the article I have extend the vardef file (description_html.php in path custom/Extension/modules/Emails/Ext/Vardefs) and added the 'tinyconfig' attribute (and 'stuido' attribute for testing purpose). Below is the screenshot of the code.

Even after extending the vardef file with tinyconfig parameter, the new font family is not showing under email compose html editor. (As we included studio attribute description_html field is showing in studio editor).

Please suggest if I am missing out anything.

Hi, 

Can any one please suggest me if there is any other alternative way to achieve this.

Hi Dhanalaskhmi Vusirika,

For TinyMCE 4, the flag you're looking for is font_formats.

Override the tinyMCE config in custom/clients/base/fields/htmleditable_tinymce/htmleditable_tinymce.js and override the getTinyMCEConfig function, and add the following lines:

font_formats: 'Calibri=Calibri,Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
setup : function(ed)
{
    ed.on('init', function()
    {
        this.getDoc().body.style.fontSize = '13px';
        this.getDoc().body.style.fontFamily = 'Calibri';
    });
},

You can also use a content_css to define the default font family if needed (https://www.tiny.cloud/docs-4x/configure/content-appearance/#content_css).

Hi Neeraja,

Thanks for your response.

I have extended the htmleditable_tinymce.js file from clients/base/fields/htmleditable_tinymce and overrides the getTinyMCEConfig function. Please find the below updated code in 

custom/clients/base/fields/htmleditable_tinymce/htmleditable_tinymce.js

({

plugins: ['Tinymce'],

initialize: function (options) {

this._super("initialize",[options]);
},

getTinyMCEConfig: function(){
return {
// Location of TinyMCE script
script_url: 'include/javascript/tinymce4/tinymce.min.js',

// General options
theme: 'modern',
skin: 'sugar',
plugins: 'code,textcolor',
browser_spellcheck: true,

// User Interface options
width: '100%',
height: '100%',
menubar: false,
statusbar: false,
resize: false,

//Adding new font family

font_formats: 'Calibri=Calibri,Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
setup : function(ed)
{
ed.on('init', function()
{
this.getDoc().body.style.fontSize = '13px';
this.getDoc().body.style.fontFamily = 'Calibri';
});
},


toolbar: 'code | bold italic underline strikethrough | bullist numlist | alignleft aligncenter ' +
'alignright alignjustify | forecolor backcolor | fontsizeselect | formatselect | fontselect',

// Sets the text of the Target element of the link plugin. To disable
// this completely, set target_list: false
target_list: [
{
text: app.lang.getAppString('LBL_TINYMCE_TARGET_SAME'),
value: ''
},
{
text: app.lang.getAppString('LBL_TINYMCE_TARGET_NEW'),
value: '_blank'
}
],

// Output options
entity_encoding: 'raw',

// URL options
relative_urls: false,
convert_urls: false
};
},
})

after code changes I ran repair and rebuild, even after that also new font family is not showing in email compose html editor.

Please correct me if I have done anything wrong or need to do any changes.

I checked the code that you pasted, and looks like you are not extending the component in the right way. Whenever we "Extend" a default Sugar component, we have to add "extendsFrom". Eg:

{
    extendsFrom: "Htmleditable_tinymceField",

Here is the code that I used:

/**
 * @extends View.Fields.Base.Htmleditable_tinymceField
 */
({
    extendsFrom: "Htmleditable_tinymceField",

    /**
     * Returns a default TinyMCE init configuration for the htmleditable widget.
     * This function can be overridden to provide a custom TinyMCE configuration.
     *
     * See [TinyMCE Configuration Documentation](http://www.tinymce.com/wiki.php/Configuration)for details.
     *
     * @return {Object} TinyMCE configuration to use with this widget
     */
    getTinyMCEConfig: function () {
        return {
            // Location of TinyMCE script
            script_url: 'include/javascript/tinymce4/tinymce.min.js',

            // General options
            theme: 'modern',
            skin: 'sugar',
            plugins: 'code,textcolor',
            browser_spellcheck: true,

            // User Interface options
            width: '100%',
            height: '100%',
            menubar: false,
            statusbar: false,
            resize: false,
            toolbar: 'code | bold italic underline strikethrough | bullist numlist | alignleft aligncenter ' +
                'alignright alignjustify | forecolor backcolor | fontsizeselect | formatselect | fontselect',
            font_formats: 'Calibri=Calibri,Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
            setup : function(ed)
            {
                ed.on('init', function()
                {
                    this.getDoc().body.style.fontSize = '13px';
                    this.getDoc().body.style.fontFamily = 'Calibri';
                });
            },
            // Sets the text of the Target element of the link plugin. To disable
            // this completely, set target_list: false
            target_list: [
                {
                    text: app.lang.getAppString('LBL_TINYMCE_TARGET_SAME'),
                    value: ''
                },
                {
                    text: app.lang.getAppString('LBL_TINYMCE_TARGET_NEW'),
                    value: '_blank'
                }
            ],

            // Output options
            entity_encoding: 'raw',

            // URL options
            relative_urls: false,
            convert_urls: false
        };
    },

})

By default, the font becomes Calibri when you start typing, this is due to the editor setting that we used.

Just adding a screenshot from my local instance on how it looks like:

Thank you Neeraja. Now the newly added font family is coming in email compose editor. 

Once again thanks for your support.

Neeraja / Dhanalaskhmi,

Adding this reply here (quite late) in case it helps anyone else searching for this change to the way TinyMCE config updates are done since the upgrade to v11 made Email Templates a sidecar module.

Whilst the provided solution works fine, it is a little non-upgrade-safe as it completely overrides the settings provided in the core file. What might be better (and how I have done my change) is to extend the settings with your custom items and retain the original settings. That way any changes to the core file in terms of base settings are retained in future upgrade alterations.

My extension code - in the file: custom/clients/base/fields/htmleditable_tinymce/htmleditable_tinymce.js - looks like:

/**
 * @extends View.Fields.Base.Htmleditable_tinymceField
 */
({
    extendsFrom: "Htmleditable_tinymceField",

    /**
     * Returns a default TinyMCE init configuration for the htmleditable widget.
     * This function can be overridden to provide a custom TinyMCE configuration.
     *
     * See [TinyMCE Configuration Documentation](http://www.tinymce.com/wiki.php/Configuration)for details.
     *
     * @return {Object} TinyMCE configuration to use with this widget
     */
    getTinyMCEConfig: function () {
        var settings = this._super("getTinyMCEConfig");
        settings.font_formats = 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Gill Sans MT=gill sans,gill sans mt,myriad pro,dejaVu sans condensed,helvetica,arial,sans-serif;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
        return settings;
    },

})

which simply takes the base settings and adds / overrides the setting I want to change. In this case the font_formats setting where I add the "Gill Sans" non-standard font.

Thanks,

JH.

Hi John Hawkins (JohnHawkins9337)  or  , I'm just wondering if you have updated the above code recently to accommodate Sugar 13? As there seems to be some changes with TinyMCS since this version.  Appreciate your help. 

Hi John Hawkins (JohnHawkins9337)  or  , I'm just wondering if you have updated the above code recently to accommodate Sugar 13? As there seems to be some changes with TinyMCS since this version.  Appreciate your help.