Add font selection to Mozaik Template Editor

amariussi · 8 April 2018 16:39

The way TinyMCE is configured for Mozaik, doesn’t allow to select a font when creating or editing an html template to be used for emails.
At the moment, the only way to modify a font in a template is to edit the actual html source code, which may be inconvenient for many.

After studying the issue a little I have edited one file to add this functionality.

Fortunately it is very simple!

Open file: include/javascript/mozaik/jquery.mozaik.js

the go to (around) line 134

Now edit the line from:

            toolbar2: 'print preview media | forecolor backcolor | image  | emoticons | table | link | fontsizeselect',

to:

            toolbar2: 'print preview media | forecolor backcolor | image | fontselect  | emoticons | table | link | fontsizeselect',

Note:
I just added " | fontselect" after " | image" and before " | emoticons"

This may be place elsewhere in this list, but for me it is fine there.

With this change you now have access to a few fonts when editing a template using Mozaik.

Additionnaly I have gone alittle further and I have also added a list of fonts with some fallbacks in case the fonts are not recognised.

To do so, just afer the line:

            table_toolbar: "",

and just before the line:

            image_advtab: true,

I added the following:

            font_formats: 
                "Andale Mono=andale mono,times;"+
                "Arial=Arial,Helvetica Neue,Helvetica,sans-serif;"+
//                "Arial=Arial,Helvetica,sans-serif;"+
                "Arial Black=arial black,avant garde;"+
                "Avant Garde=Avant Garde,arial black;"+
                "Bitter=Bitter,Georgia,Times,Times New Roman,serif;"+
                "Book Antiqua=book antiqua,palatino;"+
                "Calibri=calibri,sans-serif;"+
                "Comic Sans MS=comic sans ms,sans-serif;"+
                "Courier=Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;"+
//                "Courier New=courier new,courier;"+
                "Droid Serif=Droid Serif,Georgia,Times,Times New Roman,serif;"+
                "Georgia=Georgia,palatino,Times,Times New Roman,serif;"+
//                "Georgia=georgia,palatino;"+
                "Helvetica=Helvetica Neue,Helvetica,Arial,sans-serif;"+
//                "Helvetica=helvetica;"+
                "Impact=impact,chicago;"+
                "Lato=Lato,Tahoma,Verdana,Segoe,sans-serif;"+
                "Lucida Sans=Lucida Sans Unicode,Lucida Grande,Lucida Sans,Geneva,Verdana,sans-serif;"+
                "Lucida Typewriter=Lucida Typewriter,monospace;"+
                "Montserrat=Montserrat,Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;"+
                "Open Sans=Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;"+
//                "Open Sans MS=Open Sans,sans-serif;"+
                "Palatino=Palatino,Times,Times New Roman,serif;"+
                "Roboto=Roboto,Tahoma,Verdana,Segoe,sans-serif;"+
                "Source Sans Pro=Source Sans Pro,Tahoma,Verdana,Segoe,sans-serif;"+
                "Symbol=symbol;"+
                "Tahoma=Tahoma,Verdana,Segoe,arial,helvetica,sans-serif;"+
//                "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                "Terminal=terminal,monaco;"+
                "Times New Roman=TimesNewRoman,Times New Roman,Times,Beskerville,Georgia,serif;"+
//                "Times New Roman=times new roman,times;"+
                "Trebuchet MS=Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,geneva,sans-serif;"+
//                "Trebuchet MS=trebuchet ms,geneva;"+
                "Ubuntu=Ubuntu,Tahoma,Verdana,Segoe,sans-serif;"+
                "Verdana=Verdana,Geneva,sans-serif;"+
//                "Verdana=verdana,geneva;"+
                "Webdings=webdings;"+
                "Wingdings=wingdings,zapf dingbats;"+
                "ヒラギノ角ゴ Pro W3=ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Osaka,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif;"+
                "メイリオ=メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Osaka,sans-serif",

Note that I have left some commented alternative lines with less complicated fallbacks. These lines can be deleted, left there or uncommented, depending on one’s preference.

Once you have saved the changes it is sufficient to clear the browser cache (just press Ctrl+F5 the first time you load Mozaik). You may also run a Quick Repair and Rebuild (but I found that this step wasn’t necessary).

Drawbacks:
. this “hack” is non upgrade-safe. It would be nice if it was added to the core SuiteCRm and even nicer if also a configuration editor could be added to the Admin section.
. some fonts may not be recognised by certain email clients. (this is why I added the fallbacks with very common fonts so that the text renders).

Other issues:
The configuration programme doesn’t tolerate the smallest typing error, so make sure that the syntax is followed precisely
(each font family must be separated by one semy-colon, the last fon-family must not be followed by a semi-colon, the last font-family -after the closing double quotes- must be followed a comma.)
The syntax for each font-family is:
“Font label=font name,fallback1,fall back 2, fallback N;”+
(I am breaking the javascript code into several lines to make it more easily readable)

The last line will be:
“Font label=font name,fallback1,fall back 2, fallback N”,
(note: no semi-colon and no “+” and the closing comma)

If anyone as more fonts to suggest, please post them here.

I hope that this will be found useful!

amariussi · 8 April 2018 17:40

One more tip.

If you want to modify the default font of the already available “Template section lines” (the snippets on the left side)

you can edit the file:

and at (around) line two you can change the default font-family.

For example I have changed it from:

	font-family: Arial, Helvetica, sans-serif;

to:

	font-family: Calibri, Arial, Helvetica, sans-serif;

… et voilà! Now, when you insert a section line to your e-mail template, it is natively in your default font!

(this is very useful because otherwise, when you change the font family mozaik doesn’t replace the old font with a new one, but it adds a span with the new one, leaving the original font-family unchanged! This burdens the email and, if one chnsges his mind a few times, the resulting html template will be very messy and may not be correctly interpreted by some e-mail clients)

amariussi · 8 April 2018 18:22

Oops!
for some reason the file name to be edited to change the default font was not there.

Here it is:
include/javascript/mozaik/tpls/default/styles/default.css

Note: this is not upgrade-safe

theachiever · 16 May 2018 09:27

Dear amariussi,

Kindly observe the JPEG here:

I could not do it. Please point me where I am going incorrect.

With thanks,

RK

amariussi · 16 May 2018 10:25

@theachiever

Please post the code you used so that I can try to understand if there is something wrong.

theachiever · 16 May 2018 10:41

Dear amariussi,

I am attaching the jquery.mozaik.js (as the content has been saved in txt format).

Please see to it!

With thanks,

RK

amariussi · 16 May 2018 10:51

@theachiever

Try adding a space after “fontselect” (between fontselect and “|”).

This is how it looks in my installation:

I am attaching my file:

amariussi · 16 May 2018 10:56

I think that we are editing different files for different editors.

The one I have edited is for the mozaik plugin of TinyMCE, while you want to change the normal version of TinyMCE.

You just have to introduce the modification to the correct file, which I assume is:
modules/Emails/include/ComposeView/EmailsComposeView.js

or:
include/javascript/tiny_mce/jquery.tinymce.js

theachiever · 16 May 2018 13:59

Dear amariussi,

You were right. We both are working on different UI of tinyMCE. I don’t have the Editor as you have shown in your JPEG. I have seen a post in forum, which says the EDITORS are unchangeable, (Currently).

Well, I am frustrated about the limitation of TinyMCE while creating ‘EMAIL TEMPLATES’. In older version of TinyMCE, at least we could customize.

With thanks,

RK

amariussi · 16 May 2018 15:22

@theachiever

To use Mozaik (Which can be customised by editing the file I pointed out) you have to go to User Profile (the menu link is at the top right of the screen) and in the first tab (called “User Profile”) scroll to the bottom of the page and, the “Editor” dropdown, you select Mozaik.

Having said this, I spent many hours today trying to figure out where to edit the way the normal TinyMCE is presented but I had no success so far. In older versions of SuiteCRM there was a file where I had managed to do so but not it has changed.

I will keep on searching but the portions of code regarding javascript and TinyMCE are very difficult to understand so this is a very time consuming task when you don’t know WHERE to look.

theachiever · 16 May 2018 16:32

Dear amariussi,

There is no success in changing the Editor too: BUG. Editor unchangeble

You are also right when you mention of older version of TinyMCE, we could make upgrade-safe customisations in custom folder.

With thanks,

RK

amariussi · 16 May 2018 17:59

I found a hack to get also fontselect in the normal TinyMCE for creating templates.

It’s probably prone to .js rebuilds but it works. I haven’t figured out where would be the appropriate place to do, so, for the time being you can try this.

Open file:
include/javascript/mozaik/vendor/tinymce/tinymce/themes/modern/theme.min.js

Search for:
s=“undo redo | styleselect bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image”

This is a minified .js file.
In the same folder there is a non minified file but, also trying all js rebuilds it didn’t work so I am still figuring out where would be the best place to edit. In any case this hack works and can be used to add also other items.

If you want to edit more things you could edit the non minified file in the same folder and then make a copy called with the name of the minified file: theme.min.js

(before doing so make a backup of both original files)
In any case I have tried this method and it also works.

theachiever · 16 May 2018 18:28

Dear amariussi,

You seem to get closer!

You have found a starting tweak, which worked for ‘fontselect’ well. But when I tried to added image or other things such as

},s="undo redo | fontselect | fontsizeselect  textcolor imagetools | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image

It didn’t work. What other things you were able to add?

With thanks,

RK

amariussi · 17 May 2018 08:01

OK

Please post what didn’t work more precisely.

Try adding one item at a time and then check your logs. Look also at the browser console log since these are most likely javascript errors.

amariussi · 17 May 2018 08:21

fontsizeselect works fine. I have to find out how to modify the available size options

textcolor and imagetools are plugins and they may require extra settings. I am investigating further.

amariussi · 17 May 2018 14:02

I managed to add textcolor and colorpicker

It’s different:

edit file:
include/SuiteEditor/SuiteEditorConnector.php

search for:

                plugins: ['code', 'table', 'link'],

and modify i t to:

                plugins: ['code', 'table', 'link', 'textcolor', 'colorpicker'],

Now edit:
include/javascript/mozaik/vendor/tinymce/tinymce/themes/modern/theme.min.js

and where the toolbar elements are defined add (same place as where you added fontselect):

forecolor backcolor

This is the result:

JulianHarmer · 12 May 2020 16:11

Hi,

I’m running 7.10.25, and have used the guides above to allow the choice of fonts, it works fine on the email editor, but I can;t get it going on the templates editor. I’ve edits the following

I edited the /var/www/html/include/javascript/mozaik/jquery.mozaik.js and inserted the font_formats from above.

I rebooted the server and closed the browser

any suggestions?