Adding a additional font to TinyMCE

Classic Servoy
1

Hello,
I have a customer that would like Calibri added to the list of available fonts in a editable HTML area in webclient, is this possible?, I am using Servoy 7.4.

2

Hi,

This is possible to add new fonts to editable HTML area(TinyMCE) in web client.

  • onLoad() of the form containing the HTML AREA, add the following code.
  • Get the new font from Google fonts
//Get the new FONTS (You can download and add as many as you can..make sure the last one in the  list do not ends with ';')
         	var newFonts = 'http://fonts.googleapis.com/css?family=Calibri';
  • Now add this content to the tinyMCE CSS and add the font format
elements.youtElementName.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{content_css:"'+newFonts+'"}');
	var newFontsFormats = 'Calibri=Calibri, sans-serif';
  • Here it will override all the default font types we already have, so to add those default back again to the list just add the formats
// Default Font Formats
	var defaultFontFormats = '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;'
  • To this add your newly added font formats
 // Add the new font format to defaults
	defaultFontFormats += newFontsFormats;
  • Now add those font formats to the element
elements.youtElementName.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{font_formats: "'+defaultFontFormats+'"}');

Hope this will help you adding new font into your editable HTML AREA.

Please let me know if you face any problem
Thanks,
Sovan

3

HI Sovan,
That worked a treat!!, thanks again…

4

Hi Phillip,

I am glad this has helped you… :)

Regards,
Sovan