Best Practice

Customize the ServiceNow Editor for Style Control

There is nothing worse than spending hours developing a beautiful theme with finely tuned CSS files only to have someone come along, overriding the font, size or color from within the HTML editor. Yes, it is WYSIWYG, but sometimes “what you get” is a wonky looking site as a result.

Luckily there is a way to lock things down within ServiceNow so those adding content can’t just have full reign over your site’s look/feel.

Here’s what you do (also found here): 

  • Go to System Properties > UI Properties
  • Depending on your version, find the following properties:
    • For TinyMCE version 3:
      Configures the editing toolbar (first line) for HTML fields (glide.ui.html.editor.toolbar.line1)
      Configures the editing toolbar (second line) for HTML fields (glide.ui.html.editor.toolbar.line2)
    • Or for TinyMCE Version 4:
      (TinyMCE v.4.0.26) Configures the editing toolbar (first line) for HTML fields (glide.ui.html.editor.v4.toolbar.line1)
      (TinyMCE v.4.0.26) Configures the editing toolbar (second line) for HTML fields (glide.ui.html.editor.v4.toolbar.line2)
  • Then you need to fill in the buttons you want to appear. Again, you can see some examples here.

I’ve found this as a good baseline:

formatselect,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|
,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,code|,removeformat,hr,visualaid,|
,sub,sup,|,charmap,image,media,|,spellchecker,preview,fullscreen

 

ui_properties

This basically restricts the editor to only have the standard H1, H2, etc. tags that are consistent within most CSS structures and sets it so they don’t have an option to put in custom colors or font sizes or anything like that. All you have to do after that is apply your theme and your CSS will now keep control over all that text.

Enjoy!

Leave a Reply