Why?

Microsoft Dynamics CRM, although has support for various different kinds of fields to be placed on its forms, it does not provide a rich text editor natively. There are several use cases where a rich text editor would be very useful. One such case is when content from CRM needs to be displayed on web pages.

TinyMCE is an awesome HTML editor freely available and extensively used in web applications. So, why not use that and embed in a CRM form? That is exactly what this solution does. You can download a managed or unmanaged solution and import that into your CRM installation.

Once this solution is imported into your CRM installation, you will have the ability to include the editor on any form for any entity and will look something like this:

welcomescreedn.png

How to use

This editor can be dropped into any form by simply embedding the html editor (index.html) web resource into the form, and passing in the backing field name (field=) to store the HTML data. This is how:

Step 1 : Download & Import the xrmtinymce solution

Click on the big "downloads" button on this page. You can either download the managed or unmanaged solution, whatever suits your needs. Then, use the instructions below to import the solution into CRM.

Instructions to import a solution : Import Solutions

Step 2 : Create a backing field that will store the underlying HTML

Create a backing field, preferable a text field that allows multiple lines for the entity you need an HTML editor. Like so:

backingfield.jpg

Step 3 : Include the backing field in your form and hide it by default

This field will serve as the backing store for the HTML data in the editor. This field must be included in the form for this solution to work. However, you can setup the field not to show by default when the form is launched. This is how you do it:

Open up the form editor for the entity and include the field you created in the previous step onto the form. Double-click on the field (or select the field and click Change properties on the ribbon). In the Display tab, uncheck "Visible by default" in the "Visibility" section. Now, the field is part of the form, but hidden.


Step 4 : Insert the webresource into the form and link to backing field created in Step 1

Next, insert the webresource (index.html) into the form. In order to do that, click on "Web Resource" on the ribbon:

ribbon.png


And then, choose the webresource (iq_/iqhtmleditor/index.html) and setup the webresource properties like below. Please note that the field name provided in the properties should be exactly the same as the one created in Step 1. In the example below, I created a field called iq_providerwelcome and in my webresource properties, i specified : field=iq_providerwelcome

webresource.jpg

Step 5 : Setup the webresource formatting with recommended settings

The Recommended formatting settings for the webresource are:

Number of rows : 15
Scrolling : Never
Display Border : No


settings.jpg

Under the hood

The solution contains one HTML file (index.html) and one JS file (app.js) that has all the code needed for this solution to work. In addition, there are a few CSS files, couple of fonts and few other Javascript libraries (jquery.min.js and tinymce.min.js) to support the functionality we need.

When the user clicks out of the editor, a Javascript event fires and saves the HTML from the editor into the backing field. So, no need to save the form; just clicking out of editor does the trick.

When the form loads for the first time, the editor reads the backing field and populates itself on load.

Note that this solution works in CRM 2013 as well as CRM 2015, and works on any entities. You can also add the HTML editor to the same form multiple times, each referencing different fields.

Download solution or create your own

As mentioned above, I have provided a managed and unmanaged solution for your convenience. You can also modify your code in an unmanaged solution. On the other hand, if you want to create your own solution from the code provided, you can go ahead and do that by cloning the repository.

In order to create a custom solution, go ahead a create a new solution in Dynamics CRM. Thereafter add all the files provided in the repository. Please mimic the folder structure.

Credits

The ideas and some of the code in this solution has been borrowed from Paul Nieuwelaar who created crmhtmleditor and Aileen Gusni from her blog post on using Tiny MCE

Created by Badi Sudhakaran
Sponsored by IQ Business



Last edited Jun 23, 2016 at 8:49 AM by bks, version 20