Using a different WYSIWYG editor / HTMLArea

[pu]

We have found the built in HTML editor in Service Now (Aspen) to be rather poor. You may have spotted, it produces messy HTML and generally lacks the ability to customise. As we are to be publishing knowledge articles on our CMS, the articles need to follow fairly specific rules in order to display nicely with our site CSS. The current built in editor is not suitable for this.

Articles will also be written by people who have no knowledge of HTML. They will use the WYSIWYG editor and not care about the code it generates. As well as fixing the messy HTML, we needed to remove formatting items from the toolbar otherwise, who knows what font sizes / colours would end up on our pages.

If they just start typing in the WYSIWYG and pressing return for new lines, the editor seems to miss out the first opening 'div' then proceeds to open and close divs and use br's all over the place. We would rather it used paragraphs instead of divs for paragraphs of text for a start.

I have some experience of plumbing in WYSIWYG editors to HTML forms so thought it was worth a go in Service Now.

Here's one way to do it. Try at your own risk!

Download the Open Source 'CKEditor' (http://ckeditor.com/). I tried a few out and found this to be easy to configure and produced good, simple HTML. It also has a 'paste from Word' function. I haven't tried it as I've forced ours to paste plain text only.

You will need to upload it to a server that will act as a script repository. As far as I know, you can't upload a library of files to ServiceNow and it would be tricky to update all the ckeditor scripts to work with ServiceNow's single directory format and upload all images and scripts individually. This isn't ideal, but it works.

To swap out the HTML editor on Knowledge:

• Navigate to 'Knowledge > Create New'.
• Right click the label 'Text', 'Personalize Dictionary'.
• Change the 'Type' to 'String'.
• Keep the 'Max length' at 65,000.
• Update / Save and return to the 'Create new' form.
• Right click the form header 'Personalize > Client Scripts > New'
• Create a new 'onLoad' script with the following:
• 
  
  

  
  
  document.write('<script><\/script>');
  function onLoad() {
         CKEDITOR.replace('kb_knowledge.text');
           }
  

  
  
  
• Save and return to the 'Create New' or Edit page for a Knowledge article. You should see your shiny new editor!
• Follow instructions here for customisations: http://docs.cksource.com/

I have edited our config.js file to the following give us a very cut down toolbar.

CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'Custom';
config.format_tags = 'p;h2;h3;h4';
config.forcePasteAsPlainText = true;

config.toolbar_Custom =
[
{ name: 'styles', items : ['Format'] },
        { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll'] },
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Blockquote'] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule'] },
{ name: 'tools', items : ['ShowBlocks'] },
{ name: 'document', items : [ 'Source'] }
];

};

You could use the same principle to load other WYSIWYG editors. I tried TinyMCE but it does not currently work 'cross domain', so I couldn't host it on our web farm and use it from Service Now.

I believe 'TinyMCE' is going to be included in the Berlin release which is great. Provided it has been integrated well and allows for a lot of customisation we will be using it.

Until then, we will be using this workaround.

[Slava Savitsky]

As of Eureka Patch 1, administrators can customize the list of fonts available in TinyMCE by changing the value of "glide.ui.html.editor.v4.font.collection" system property.

Modifying HTML Fields - ServiceNow Wiki

[lberthold]

Was anyone able to figure out how to add additional font families to the TinyMCE Editor that can be used in HTML fields?

Thanks!

Lori

[sbay]

Also need to add additional fonts and headlines to the TinyMCE - any news on this?

[Slava Savitsky]

Unless you are using UI14, you can customize the list of font sizes using an onLoad client script like this:

tinymce.settings.theme_advanced_font_sizes = "10px,12px,14px,16px,24px";

or like this if you want to give the options custom names:

tinymce.settings.theme_advanced_font_sizes = "Very small=10px,Small=12px,Medium=14px,Large=16px,Very large=24px";

[Slava Savitsky]

What exactly do you mean by "headlines"?