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.

[mahudg2]

This method does not seem to work in UI14, does anyone have any idea on what would need to be changed?

[geoffcox]

Just FYI, You can and we do use Service Now as a repository of various files including .js and .css. We created a custom table called "u_snc_public_file". Each record has a field called "file name" (u_file_name), and the file is attached to the record.

We then wrote a public processor called "get_snc_public_file" which is used to retrieve and return the file attached to the record (uses the GlideSysAttachment object).

This processor can then be used to include images, javascript and css files, etc. wherever you want them. For example, in a ui page, you can include the statement such as the following:

<link title="theme" rel="stylesheet" type="text/css" href="/get_snc_public_file.do?filename=jquery.mobile.theme-vrsn-1.3.2.css" />

[Kalaiarasan Pus]

But isn't copy pasting in a ui script and including it be enough?

[geoffcox]

Enough for a one-off, perhaps, but we use css on many pages, and I wouldn't want to have to make .css changes directly on each page when I can edit it once in the include file and have the changes work everywhere. That the main reason you use include files in the first place.

Plus, keep in mind we use this for images also. Files in the scs directory do not survive cloning. We also use it for iframed html which gets embedded into other form views. The bottom line is that we can treat ServiceNow as a repository this way because the attachments do get saved in the database and can survive cloning.

[Eric K3]

Nice, Geoff.

Is your "u_snc_public_file" table extended from a base/core table?