Share

Adding WYSIWYG Editor to Textarea CRM Part 1

Recently I had a client for which we built a portal for using CRM 4.0 SDK. One of the requirements was to have announcements display on the home page of the portal. We decided to create a custom entity in CRM called "portal announcements" to hold the content of the announcements they wanted to post on the portal.

The portal announcements entity had a start date, end date, title, and description attributes. The description attribute was a ntext field. At first we thought just put some text in the description attribute and then take that string and display it on the portal. Here is what a new record form looked like:

clip_image002

After talking with the client, they decided that they wanted to have more control over the text of the announcement. They wanted to bold, underline, and align text. So we needed to actually store HTML code inside the description attribute instead of plain text. Many users don’t know HTML, so the best solution here was to use a WYSIWYG editor that would translate text to HTML.

So, I looked into a few open source options. I stumbled across a jquery plugins called HTMLBox. Jquery is an open source JavaScript library that helps make writing JavaScript code easier and has the ability to use plugins that contributors write. HTMLBox was clearly the best solution for our needs. http://plugins.jquery.com/project/HtmlBox.

I downloaded HtmlBox_4.0.3 and uploaded this folder to our server under the ISV folder. The path was /ISV/Demo/HtmlBox_4.0.3. I also had to download the core jquery files jquery-1.6.1.min.js and jquery.blockUI.js and placed them under the /ISV/Demo folder. You can download these from the jquery website http://jquery.com/.

From there I needed to specify some onload JavaScript to include all the HtmlBox and jquery files. I would also need to use a function that would call the HtmlBox code to transform the ntext description attribute into a WYSIWYG editor. Here is what my code looks like. Notice there is some custom LoadJSFile functions that I have used before to include js file within JavaScript code.

DEMO = {};

DEMO.GetXmlHttpRequest = function () {
    var oXmlHttpRequest = null;
    if (window.XMLHttpRequest) {
        oXmlHttpRequest = new XMLHttpRequest();
        }
    else {
        try {
            oXmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
        catch (e) {}
        }
    if (!oXmlHttpRequest) {
        throw new Error("Unable to create XmlHttpRequest instance.");
        }
    return oXmlHttpRequest;
    };

DEMO.LoadJSFile = function (sUrl) {
    var oXmlHttpRequest = DEMO.GetXmlHttpRequest();
   
    oXmlHttpRequest.open("GET", sUrl, false);

    oXmlHttpRequest.send(null);
    var sResponse;
    try {
        sResponse = oXmlHttpRequest.responseText;
        }
    catch (e) {
        throw new Error("Error loading "" + sUrl + "": " + e.message);
        }
    try {
        eval(sResponse);
        }
    catch (e) {
        throw new Error("Error evaluating "" + sUrl + "": " + e.message);
        }
    };

DEMO.LoadJSFile("/ISV/Demo/jquery-1.6.1.min.js");
DEMO.LoadJSFile("/ISV/Demo/jquery.blockUI.js");
DEMO.LoadJSFile("/ISV/Demo/HtmlBox_4.0.3/htmlbox.colors.js");
DEMO.LoadJSFile("/ISV/Demo/HtmlBox_4.0.3/htmlbox.full.js");

var hb_silk_icon_set_blue = $("#jm1_description").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:"/ISV/CEI/JScript/HtmlBox_4.0.3/images/",
    about:false
});

Once I saved an published my form this is what the form will look like now:

clip_image002[4]

Now you can see that the Description attribute will have an HTML editor that will store HTML in CRM. Give this code a try and let me know how it works out for your projects. I plan to later do a part 2 follow-up using this plugin with CRM 2011.