I want to add a specific font to TinyMCE so that when editing a PDF template for generating invoices, I can make use of my corporates’ default font.
I followed the instructions I got from here:
I understand that the version of TinyMCE used in SuiteCRM is v3.
However, even after adding a font to the theme_advanced_fonts array in both editor_template_src.js and editor_template.js within the advanced theme directory, the combobox in the editor does not show the respective font.
Using the developer bar in my browser I can determine that the font is indeed part of the array.
However, while I added a font directory to the themes’ folder and put the ttf File there as stated in the instructions above, the developer bars’ source-tab does not show up the folder, nor the ttf file.
I don’t really know the answer, but one thing that comes to mind - there is more than one copy of TineMCE inside SuiteCRM (don’t ask )
You might be putting the files in the wrong place…
If you specify exactly which module/screen you’re using to edit the template, where you edited the configuration and and where you placed the files, I might try to help, or better, somebody else who has already dealt with this before.
You’re right. There seems to be a generic TinyMCE copy beneath include/javascript and another one beneath include/javascript/mozaik/vendor.
I edited the former folders’ files (not the mozaik ones).
I am using the module PDF-Templates. I created an invoice template. There are multiple editors. One for body, one for the header and one for the footer of the template.
The menubar of the bodies’ editor has more options than the ones of the header and the footer.
However, in all three editors’ “Font Family” comboboxes, I am not able to add another font to.
Here is, what I did:
Within the folder …\SuiteCRM\include\javascript\tiny_mce\themes\advanced I added a subfolder called fonts.
Within that fonts folder, I added a file called Titillium.ttf.
Right under the advanced folder, I edited both the file editor_template.js and editor_template_src.js.
Within their respective settings collection, I edited the theme_advanced_fonts collection, so that they now contain the following string (highlighted): …;Times New Roman=times new roman,times,serif;**Titillium=Titillium;**Trebuchet MS=trebuchet ms,geneva,sans-serif;…
When looking at the source of the rendered page with the developer tools of my browser, I can verify that for the PDF header e.g. a span exists attributed with the class mceEditor defaultSkin. It also contains a table for the font selection containing a lot or rows - but none of them showing Titillium as an option.
Using the same developer tools, I can look at the sources which include the editor_template.js file that in return indeed contains my modified theme_advanced_fonts collection that does contain Titillium.
And do you see anything in one of your two logs when the page loads?
You might be facing problems of refresh. When playing with Javascript it is often necessary to run some JS repairs from Admin /Repairs (I never know which ones) to get the changes to take effect.
Nothing of any interest. Both logs - even at full informational level (debug) don’t offer anything of help. Also, I am not sure that I have a refresh problem (I also ran a couple of “repairs” btw). Since I can clearly see my modifications in the javascript when rendering the website, I believe TinyMCE itself might have a problem with incorporating the new font. However, I didn’t find out yet, what mechanism is responsible for loading the font and adding it to the menu…
)