Share

Adding WYSIWYG Editor to TextArea in Microsoft Dynamics CRM Part 2 (CRM 2011)

Back in May I wrote a blog showing you how to turn a textarea in a CRM form into a WYSIWYG editor.

In this blog I will show you how you can put this same editor into CRM 2011.

In CRM 2011 you will have to put all of the Jquery and HtmlBox files in the system as Web Resources. I strongly suggest using the Web Resource Utility provided in the 2011 SDK. Here is more info on how to use this wonderful tool. http://blog.customereffective.com/blog/2011/06/using-crm-2011-web-resource-utility.html

Download the HtmlBox latest version here http://remiya.com/htmlbox/index.php/6/download/latest-version.html and upload it using the Web Resource Utility. Then download the latest version of Jquery here http://jquery.com/. Upload jquery.blockUI.js and jquery-1.4.1.min.js files. You only need these two. CRM 2011 does not like the – in jquery-1.4.1.min.js so, rename the file jquery_1.4.1.min.js so it will upload to CRM 2011 correctly.

Here is what your Web Resources should look like in CRM:

clip_image002

Next, you will need to create a new Entity called Portal Announcement. Add fields for Description, StartDate, EndDate, and Title.

clip_image004

Then, slap together a form with the new fields you just created. Make sure that description is set to automatically expand to use the available space.

clip_image006

Next go to the form properties and add jquery_1.4.1.min.js, jquery.blockUI.js, htmlbox.colors.js, and htmlbox.full.js in this order.

clip_image008

Here we will also create another resource called portalannouncementOnLoad. Click on the add button and then choose new. Put the name as portalannouncementOnLoad and choose the type of Jscript. Once you have saved the resource you can then add as content our custom JavaScript that will leverage Jquery and HtmlBox.

Here is what the code should look like:

window.onload = function() {
jQuery(document).ready(function () {
Xrm.Page.getAttribute(“jm1_description”).setSubmitMode(“always”);
$(‘#jm1_description_d’).append(
‘<textarea id=”wysiwyg” style=”ime-mode: auto; height: 100%;” name=”wysiwyg”  maxlength=”2000″ >’ + $(“#jm1_description”).val() + ‘</textarea>’
); 

$(‘#jm1_description’).hide();

         var hb_silk_icon_set_blue = $(“#wysiwyg”).css(“width”,”100%”).htmlbox({
toolbars:[ [“cut”,”copy”,”paste”,”separator_dots”,”bold”,”italic”,”underline”,”strike”,”sub”,”sup”,”separator_dots”,”fontsize”,”fontfamily”,”fontcolor”],
[“left”,”center”,”right”,”justify”,”separator_dots”,”ol”,”ul”,”indent”,”outdent”,”separator_dots”,”link”,”unlink”,”image”]],
icons:”silk”,
skin:”blue”,
idir:”/JM1/WebResources/jm1_/HtmlBox/images/”,
about:false
});
});
};

function testOnSave() {
Xrm.Page.getAttribute(“jm1_description”).setValue($(“#wysiwyg”).val());
return true;
}

As you will notice there are several things going on here. First you will notice that I use window.load function. This is to ensure that the entire form and its ribbon have completely been loaded before we do anything else.

Next, you will see where I use Xrm.Page.getAttribute(“jm1_description”).setSubmitMode(“always”). This tells CRM to always submit the form even if the description field has not changed. We need this because the HtmlBox will update the textarea for description but CRM doesn’t recognize it as dirty, so the save button never fires when clicked.

In the next section, you will see I use Jquery to create a dynamic textarea called WYSIWYG. We get the value of jm1_description and put that into this new textarea that gets created at run time. This is for use if the text gets changed we can set it later in our code.

I then use Jquery to hide the jm1_description field and call the htmlbox function passing in toolbars, icons to use, and image directory. Note the directory of images is the path that was created when you uploaded HtmlBox through the Web Resource Utility (/JM1/WebResources/jm1_/HtmlBox/images/).

Finally, I create an onSave function that will use the Xrm.Page setValue function to take the value from WYSIWYG textarea and set it to jm1_description. This will let CRM know that the value has changed and to post the new value to the save. This function will need to be added to the form properties under the onsave event calling function testOnSave.

clip_image010

Now save and publish everything and pull up a record in your new entity. This is what you end result should look like. Enjoy!

clip_image012

Free Guide
On-Premises vs. Cloud CRM

A guide to help you determine the best solutions for you.