Set default font face and font size in TinyMCE editor?

Chris Bui · ‎08-01-2016

Hi!

Anyone know of a way to set the default font face and font size in the TinyMCE editor?

There doesn't appear to be a global setting since I think it would be listed here... Properties installed with the TinyMCE HTML field editor

The TinyMCE site has documentation, but I'm not sure how to do it in ServiceNow. TinyMCE | Content Appearance

Thanks in advance!

LaurentChicoine · ‎08-01-2016

Hi Chris,

Here is how I have set it up:

1. Create or change your HTML field type to String (in the dictionary record) with a max length of 65 000. (In our case, for knowledge, users write in a draft field which is custom so we did not have to change the type of an OOTB field)

2. To that field dictionary, in the Attributes field, add the attribute custom-tinyMCE=true

3. Create a UI Macro "initialize_custom_tinyMCE" and replace sys_id_of_your_style_sheet with the sys_id of your style sheet (in the content_css table).

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

   <g:include_script src="scripts/tinymce4/tinymce.full.jsx" />


   <j:set var="jvar_style_sheet" value="sys_id_of_your_style_sheet" />


   <g:evaluate var="jvar_content_css_stamp" jelly="true">

   var gr = new GlideRecord('content_css');

   if(gr.get(jelly.jvar_style_sheet)){

   gr.getValue('sys_updated_on');

   }

   </g:evaluate>


   <j2:set var="jvar_table" value="$[current.getTableName()]" />

   <g2:evaluate object="true" jelly="true">

   gs.include("j2js");

   var table = new TableUtils(jelly.jvar_table);

   var tables = j2js(table.getTables()).toString();

   var fields = new GlideRecord('sys_dictionary');

   fields.addQuery('name', 'IN', tables);

   fields.addQuery('attributes', 'CONTAINS', 'custom-tinyMCE=true');

   fields.query();

   fields;

   </g2:evaluate>


   <j2:while test="$[fields.next()]">

   <script>

   (function(){

   var config ={

   "toolbar1":"${gs.getProperty('glide.ui.html.editor.v4.toolbar.line1')}",

   "toolbar2":"${gs.getProperty('glide.ui.html.editor.v4.toolbar.line2')}",

   "font_formats":"${gs.getProperty('glide.ui.html.editor.v4.font.collection')}",

   "content_css": "/${jvar_style_sheet}.cssdbx?v=${jvar_content_css_stamp}",

   "remove_script_host":true,

   "language":"en"}


   var id = '$[jvar_table].$[fields.element]';


   CachedEvent.after('glideform.initialized', function(gf) {

   var handler = new TinyMCETextAreaElement(id);

   gf.registerHandler(id, handler);

   });


   setupTinymceField(id, config);

   })();


   </script>

   </j2:while>

</j:jelly>

4. Create a Formatter for that macro "Initialize custom TinyMCE".

In the Formatter field add the name of the macro "initialize_custom_tinyMCE"

In the Table field, select the table for which you want to use the custom tinyMCE (I did set it to Global to allow to add the Formatter anywhere)

5. Add the Formatter to your form layout where you want to initialize TinyMCE for the String fields tagged with the attribute "custom-tinyMCE=true"

Do you also want the setup for the style sheet in the knowledge base (if your requirement is related to the knowledge base, you didn't specify)?

Edit: I did add a few script improvement including the bug related to extended tables

View solution in original post

LaurentChicoine · ‎08-02-2016

Hi Chris,

Thanks a lot for the feedback, I did apply your changes to my script. My script was not much tested so yes it was not working for extended tables.

I updated the code from my previous post to do the following:

Use current.getTableName() instead of current.sys_class_name which I feel is a better practice as some tables could have no sys_class_name field
Set a single variable for the style sheet sys_id to then reference it later in script to avoid having to replace it at multiple palces upon change of the style sheet
I added your improvement for extended table, but in Helsinki the toString() function on the getTables() return did not work. I had to convert that Java object to a Javascript object using j2js which is an OOTB feature of SNOW

sajan2 · ‎12-04-2016

Hi Laurent,

I have followed above steps but I am unable to convert my newly created field in to tinyeditor?

Can you please advice what needs to be included in style sheet?

Regards,
Sajan

LaurentChicoine · ‎12-04-2016

Hi Sajan,

For what should be included in the stylesheet, it is anything you want just standard CSS, but if you intend to use the stylesheet on another page (not rendered in TinyMCE), you should have your tags scoped.

For a single stylesheet you should duplicate your style for scoping TinyMCE and other. Otherwise, you can have an unscoped stylesheet that you use in TinyMCE and another one that is scoped for use outside of tinymce. You can use a LESS to CSS tool to easily generate the scoping (search on google you will find one easily).

Ex of scoping (where article is the id of the <div> in which the content is rendered):

div#article h1{

color: white;

}

Scoping for TinyMCE:

body#tinymce h1{

color: white;

}

As for your problem into converting the field in TinyMCE editor, look for potential javascript error when loading the form (developer console F12). If you have any error please post them so I can try to look into the issue.

Bridget6 · ‎10-08-2019

Thanks so much. Just used this in New York and it still works!

gmccullough · ‎03-01-2019

Maybe this is because I'm in London, but I just added this Calibri=calibri; to the open field shown below and it appears that the font does in fact match the Calibri font. No code required