Adding An Additional Font To Servoy Editable HTML_AREA (TinyMCE)

Hello World, 

As we all know in servoy 7.4.1 onward servoy is using tinyMCE as the default HTML_EDITOR. Servoy stopped using the old and legacy YUIeditor (Now of course this has been upgraded). This will be shown in the client when we place a HTML_AREA and mark it as 'editable' . This is come up with a beautiful editor tool. I know you will just love it.

Thanks to servoy, to make it more better they have also exposed a way to add our external plugins. We can now configure as the way you want. But How ??

To do this :




In onLoad method of the form that contains the HTML_AREA, use the following code to add your own configuration. 

elements.yourHtmlArea.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{toolbar: "false"}');

Done!! When you load the form, you will get rid of the toolbar.

Now as the topic said, If we want to add an addition font-family we can do that as follows:

• Add the following code on your onLoad() method of the form that contains the HTML_AREA.
• Get the new font from Google API.
• Now add this content to the TinyMCE CSS and add the font format.
• 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.
• To this add your newly added font formats.
• Now add those font formats to the element.

Code Snippet

function onLoad(event) { 

//Get the new fonts
var newFonts = 'http://fonts.googleapis.com/css?family=Calibri'; 

elements.test.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{content_css:"'+newFonts+'"}');
var newFontsFormats = 'Calibri=Calibri, sans-serif'; 

// 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;' 

// Add the new font format to defaults
defaultFontFormats += newFontsFormats; 

elements.test.putClientProperty(APP_UI_PROPERTY.HTML_EDITOR_CONFIGURATION, '{font_formats: "'+defaultFontFormats+'"}');
}

Hope this will help you.

Enjoy coding.. :)

Sovan