Set default font face and font size in TinyMCE editor?

[Chris Bui]

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]

If you are referring to setting up a content_css, I don't know of any way to do it without going with a custom initialization of TinyMCE. It's something that we have done for our Knowledge Base. So we added the style sheet to the content_css and to the UI Macro responsible to render the text in knowledge articles.

If you are willing to use a custom way, let me know and I'll put up a little step by step to implement that.

[Chris Bui]

That would be great!   Thank you!

[LaurentChicoine · Accepted solution]

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

[Chris Bui]

Laurent, this is a pretty cool trick!   Thank you!

It didn't work at first.   After some investigation, I found it was because I was on an extended table.   Added 1 line of code and adjusted another and it works!

       <j2:set var="jvar_table" value="$[current.sys_class_name]" />   
       <g2:evaluate object="true" jelly="true">
               var table = new TableUtils(jelly.jvar_table);   // NEW LINE ADDED
               var fields = new GlideRecord('sys_dictionary');   
               fields.addQuery('name', 'IN', table.getTables().toString());   //EDITED LINE   
               fields.addQuery('attributes', 'CONTAINS', 'custom-tinyMCE=true');   
               fields.query();   
               fields;   
       </g2:evaluate>