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.

[pu]

DustinSpain

We're the other way round and prefer to use paragraphs instead of br's for new lines. The point is the same though and should allow full configuration of TinyMCE as an option, especially in the CMS where if your company is anything like ours, has a strict set of guidelines for displaying HTML.

I have submitted an enhancement request to ServiceNow to provide more customisation of TinyMCE. For example, I would like to remove some of the formatting options, such as H5 & H6.

Paul

[bennyb]

Hi Guys,

any luck with enhancement request to be able to customise TinyMCE's line break functionality?

Cheers,

[Slava Savitsky]

According to the latest information from the TinyMCE website, "force_p_newlines" and "force_br_newlines" have been deprecated and "forced_root_block" is now the single setting that defines whether <p> should be used at the root block element or not.

Unless you have activated UI14, you can override TinyMCE setting using an onLoad client script like this:

forced_root_block = 'div'; // wrap non-block elements into a <div> instead of a <p>

forced_root_block = false; // disable wrapping of non-block elements into a block element

Please note, however, that it is highly recommended to keep <p> as the default root block element. Refer to product documentation for more information:

TinyMCE - forced_root_block

[edmoon]

The Berlin release allows you to configure which toolbar buttons are shown in the TinyMCE editor.
However, I have been unable to find out how to modify the list of font families offered by the Font Family selector.
Does anyone know how this list can be modfied?
Thanks in advance,
Ed Moon

[ayushsaxena]

Hi,

I want to add a new font family in the HTML editor. Any help on this is welcomed.
Thanks in advance.

Regards,
Ayush Saxena