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.

[adiddigi]

I like! Thanks for this!

[CapaJC]

With the Berlin release, HTMLArea is (finally!) replaced. It's successor is the TinyMCE WYSIWYG editor, which I'm told provides a much better experience.

Update: It looks like admins will have a choice of which to use:
http://wiki.servicenow.com/index.php?title=Modifying_HTML_Fields#Configuring_the_TinyMCE_HTML_Field_Editor

[pu]

I have seen that TinyMCE is to be included with Berlin and am keen to take a look at it.

TinyMCE is a good editor as it usually offers so much customisation, but it depends how much of this is possible after being integrated with ServiceNow.

Info on the wiki would suggest that you will be able to add / remove toolbar buttons but not customise the individual toolbar items.

As well as adding / removing toolbar items we would need to be able to customise what those items do. For example, the formatting item which allows you to change text to H1,H2,H3,H4,H5,P,DIV etc. We would want to remove a few of these options. This is usually easy to do with TinyMCE or many other WYSIWYG editors be either modifying a config file or sending a few parameters when initialising the editor.

I appreciate that would be a lot of work to build all of the possible options in to system properties, but perhaps allow access to the HTML editor's config file or a sys property to contain a string for the config file as an 'advanced feature'. A few more lines of JavaScript wouldn't hurt us too much.

This probably isn't an issue for everybody. We need to have a bit of control over how our Knowledge articles look as they are being publicly displayed in our CMS using fairly strict existing stylesheets.

If this is already possible, then great.

[DustinSpain]

I like the new HTML editor in Berlin but is uses paragraphs breaks for new lines by default. I found on TinyMCE.com that his is configurable. Can it be configured in service now?

http://www.tinymce.com/wiki.php/Configuration:force_br_newlines

tinyMCE.init({
...
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '' // Needed for 3.x
});