Introduction
Since Kingston release we have system property that can greatly improve default behaviour of TinyMCE, default HTML editor used throughout the instance. I wanted to share with you my findings about it. It is called glide.ui.html.editor.extended_valid_elements.
It may be hard to find it at first as it is not listed in the latest Properties installed with the TinyMCE HTML field editor documentation page. But a quick check on New York release and there it is, sitting quietly, just waiting to be used:
What can we do with it?
TinyMCE, is a 3rd party software used in ServiceNow. UI16 includes TinyMCE v4. Here's the documentation link. You may find two configuration options especially interesting: valid_elements and extended_valid_elements. One thing to note though - any update to this system property will be visible on every HTML field (after save/update) on whole instance.
The first one may give us some explanation on my personal most hated feature - empty <p> tags are padded with #nbsp;
Tag padding
Have you ever noticed that when you want to have an empty line on top of your notification (I've used it in email client template - empty line is for agent to fill, next line is for personal info and last one is for signature) there is this annoying little added? Now I know that this is actually TinyMCE valid_elements configuration option, specifically #p.
Do you want to get rid of it? No problem! Just add p to extended_valid_styles (which in ServiceNow is represented by glide.ui.html.editor.extended_valid_elements). There is one caveat though - you will loose all configuration for this tag that is written in valid_elements config. This also includes allowed attributes - with single p, you will no longer be able to save an HTML field with <p style="font: 10pt Georgia" id="first-p"></p>. It will be converted to <p></p>.
Because a picture is worth 1000 words, with this property value set to p[style|id] we can't add any other attrobute to p tag:
CSS classes automatically applied (or forced)
We can also easily set default or required css class to be used on instance for particular HTML tags. This can facilitate knowledge base styling or email notifications.
To do this, we have to slightly change our property value:
- For default class, use = sign: p[style|id|class=corporate-standard]
It will make sure every p tag with no class attribute will have our chosen class added. Existing values of class attribute will not be changed. - For required class, use : sign: p[style|id|class:corporate-standard]
It will make sure every p tag will have its class attribute value replaced by our corporate-standard class.
Default (or forced) style
To force particular styling of an HTML tag, we have to set required value for style attribute: p[style:background-color:red]. In this case, every p tag will have style="background-color:red" added on save/update of the record containing HTML field:
Automatic unique id value
TinyMCE can help us with ensuring the uniqueness of id attribute. All we need is special variable - ${uid} used as a required value on this attribute for chosen tag
For example: div[id:${uid}]. Simple as that. As a result, every id will be prepended with mce_ followed by continuous numbering starting from 0 . In our case, 4th div tag will have id=mce_3.
Force links to open in new tab/window
We can also force links to use target=_blank, like that: a[target:_blank]. It is worth mentioning here that with this configuration, TinyMCE also adds rel="noopener", as suggested by MDN docs on a.target.
Ensuring best practices
One of the examples here might be to alwyas provide a source of citation when using the blockquote tag. It can be done with this entry: blockquote[!cite]. Every blockquote without cite attribute will be converted to default p tag.
Summary
We can do surprisingly lot of things with this one, simple system property in ServiceNow. I hope you liked it and will use it at some point in your career!
