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

Heather White · ‎01-20-2020

How did you get to this setting?

gmccullough · ‎01-23-2020

It is in UI Properties under System Properties

brandont · ‎08-06-2020

I dislike this solution as it goes against best practices of using Jelly script,

I've created an enhancement request on the idea portal for Service Now to fix this by creating a system property.

I'm adding the link to it here so that if anyone finds this please upvote the idea so we can get a better solution for this in the future.

https://community.servicenow.com/community?id=view_idea&sysparm_idea_id=5e0925581b225490d2ccea89bd4b...

Set default font face and font size in TinyMCE editor?

User Interface Properties