Embed a nice wysiwyg html editor in CRM 2011: ckeditor

TinyMCE is not alone in this world, and I find ckeditor to be really nice.
By the way, I find it to be much nicer than htmlbox, which is however referred in a nice blog post that was an inspiration for this post.

A few notes:
– This example requires jQuery
– Don’t forget to publish all at the end!
– With the standard edition, 3 languages, approximately 65 web resources were created.
So how to install it in CRM 2011 (works with rollup 12):

Step 1/ Download ckeditor:

Choose the package that suits you best: basic, standard or full, or custom. I prefer custom to limit the number of languages downloaded.

Step 2/ Remove languages from the plugins.

Even if you go custom and select only English, some plugins will still have a lang folder, with 50 js files, one per language. Remove the unecesseary ones.

Step 3/ Update ckeditor.js to make it work in the CRM context.

To retrieve some files, by design, ckedtor adds a “?t=DAED” or something at the end of the file urls, as some kind of timestamp. CRM will return a fault exception when adding url parameters to webresources url. Thus remove this code from the file :

&&(b+=(0<=b.indexOf(“?”)?”&”:”?”)+”t=”+this.timestamp)

to get it to work in CRM.

Step 4/ Use the webresourceutility from the sdk:

Open the solution in Visual Studio, compile it, then  run the exe file in the bin folder. From there, create a new package, select the ckeditor folder, select all files to create new web resources, and create them!

Step 5/ Put this code in an onLoad method of the form.

Say your field is called new_html.

function onLoad() {
Xrm.Page.getAttribute(‘new_html’).setSubmitMode(‘always’);
$(‘#new_html_d’).append(
‘<textarea id=”wysiwyg” style=”height: 100%;” name=”wysiwyg”>’ + $(‘#new_html’).val() + ‘</textarea>’
);
$(‘#new_html_d > table’).hide();
CKEDITOR.replace(‘wysiwyg’);
}

What this function does:
– Submit mode: because CRM will not always be aware that the fied’s content has changed.
– Append text area: this will be the element to which we apply the wysiwyg editor.
– Hide the original field
– Apply the editor

Step 6/ Now the function onSave

function onSave() {

var data =CKEDITOR.instances.wysiwyg.getData();
Xrm.Page.getAttribute(‘new_html’).setValue(data);
return true;
}

This function obviously gets the text from the editor, and sets it in the original field, as it will be the one saved in the DB.
This is why we need to set submit mode to always. Indeed CRM ignores the modifications in ckeditor, and the content of new_html is never changed before we click save. So when save happens, we need to make sure that it is submitted.

Step 7/ Add the events in the form

Form Properties, onLoad and onSave events, nothing fancy here.

Step 8/ Add js file in the form

Don’t forget to add ckeditor.js web resource in the js files of the form!
Publish all and you’re done!

1 comment on “Embed a nice wysiwyg html editor in CRM 2011: ckeditor”

  1. Alex Y Reply

    Hi there, thanks for this suggested solution.
    I feel like I’m very close to successfully implementing this though am getting an exception on load of the form.
    I have followed the exact steps above, added jquery as a web resource and ensured that the web resources are in the correct order onload of the form.
    I get “Unable to get property ‘getEditor’ of undefined or null reference.
    Do you have any ideas of how to resolve?
    Any help appreciated.
    Thanks, Alex

Leave a Reply

Your email address will not be published. Required fields are marked *