Menu

SuiteCRM Master Classes 2018

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Add font selection to Mozaik Template Editor

Add font selection to Mozaik Template Editor 1 month 1 week ago #63372

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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 Pゴシック,MS PGothic,sans-serif;"+
                "メイリオ=メイリオ,Meiryo,MS Pゴシック,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! ;)
Last Edit: 1 month 1 week ago by amariussi.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 1 month 1 week ago #63373

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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)
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 1 month 1 week ago #63377

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 16 hours ago #65989

  • theachiever
  • theachiever's Avatar
  • Offline
  • Premium Member
  • Posts: 143
  • Thank you received: 13
  • Karma: 2
amariussi wrote:
Note:
I just added " | fontselect" after " | image" and before " | emoticons"

Dear amariussi,

Kindly observe the JPEG here:



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

With thanks,

RK
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 15 hours ago #65990

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
@theachiever

Please post the code you used so that I can try to understand if there is something wrong.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 15 hours ago #65992

  • theachiever
  • theachiever's Avatar
  • Offline
  • Premium Member
  • Posts: 143
  • Thank you received: 13
  • Karma: 2
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
Attachments:
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 15 hours ago #65993

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
@theachiever

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

This is how it looks in my installation:




File Attachment:

File Name: jquery.mozaik.js.txt
File Size:29 KB


I am attaching my file:
Last Edit: 5 days 15 hours ago by amariussi.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 15 hours ago #65994

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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
Last Edit: 5 days 15 hours ago by amariussi.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 12 hours ago #66013

  • theachiever
  • theachiever's Avatar
  • Offline
  • Premium Member
  • Posts: 143
  • Thank you received: 13
  • Karma: 2
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.
What is the point of being Open Source, if they are to place LIMITATIONS over 'what' will be proffered 'Where'. Have they imagined that the large number of users of SuiteCRM would want this way? How did they get the 'Voice of Customer'?

With thanks,

RK
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 10 hours ago #66018

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
@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.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 9 hours ago #66026

  • theachiever
  • theachiever's Avatar
  • Offline
  • Premium Member
  • Posts: 143
  • Thank you received: 13
  • Karma: 2
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
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 8 hours ago #66034

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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"

Replace with:
s="undo redo | styleselect | fontselect | 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.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 5 days 7 hours ago #66041

  • theachiever
  • theachiever's Avatar
  • Offline
  • Premium Member
  • Posts: 143
  • Thank you received: 13
  • Karma: 2
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
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 4 days 18 hours ago #66064

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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.
The administrator has disabled public write access.

Add font selection to Mozaik Template Editor 4 days 17 hours ago #66065

  • amariussi
  • amariussi's Avatar
  • Offline
  • SuiteCRM Is My Life
  • Posts: 946
  • Thank you received: 206
  • Karma: 49
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.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.077 seconds
Powered by Kunena Forum