Basic HTML Rich Text Editor for Microsoft Dynamics CRM 2015

Paul Nieuwelaar, 25 August 2015

By default, CRM doesn’t allow us to create our own custom fields using rich text or HTML, similar to the email Description out of the box. However, if we’re building forms that push data to a website dynamically, we may need the ability to build some HTML in CRM. In the past there’s been a few solutions available to do this in CRM. Some are more unsupported than others (e.g. hacking into a field on the form and converting it into a rich text editor).

One of the nicer solutions involves embedding a web resource onto the form, and then taking the HTML generated by the web resource, and updating a field on the parent form. A good example of this, and the baseline of my solution is shown here, by Thomas Unzeitig: http://soho.at/wp/create-rich-text-textarea-microsoft-crm-2013-forms.

This solution is using CKEditor, which is a tidy HTML/JavaScript based html editor, which means we can upload all of the web resources into a CRM solution and keep everything packaged nicely.

To download my solution, check out the project on CodePlex: https://crmhtmleditor.codeplex.com/

I have made the solution dynamic enough so that it can be dropped into any form by simply embedding the html editor web resource into the form, and passing in the field name to store the HTML data.

You can also set the Formatting to display the number of rows required, and to disable the iframe scrolling and border for a nicer look and feel. The HTML Editor will automatically expand to fill the space available inside the iframe, however big you choose to make it.

You can also pass a default value into the HTML editor, which will be applied when there is no existing value (e.g. for new records). This can be useful when you want to ‘guide’ users into entering the HTML in a specific format, rather than just letting them loose.

The default value needs to be encoded, and then included in the custom parameters of the web resource. You can get the encoded URL string from the following webpage by pasting in some HTML and then clicking ‘Encode’: http://meyerweb.com/eric/tools/dencoder. Copy the encoded string and add it to the web resource parameters after the field value, e.g. field=new_html&defaultValue=%3Cb%3EHello%3C%2Fb%3E

The defaultValue parameter is optional, and if not specified, the HTML editor will simply display nothing initially.

Next we can preview our form and see that the html editor works right away. We can see the default value being applied, including the ‘bold’ styling, and our basic editing tools are available.

The data from the HTML editor will be saved to the ‘HTML’ field every time you click out of the iframe. This means you don’t need to manually ‘save’ the HTML, it will just automatically keep up to date by itself. After we’ve saved the form, we can reload the page and the HTML editor will load up the HTML from our field automatically.

We can now hide that HTML field (as long as it remains on the form), and the HTML editor will continue to work and look pretty.

The buttons/editing tools available in this solution are based on the ‘Basic’ package provided by CKEditor. This is because the basic package seemed to meet our particular needs as we didn’t require a full blown HTML editor, just some basic rich text editing tools. This also means the entire solution is only 17 web resources.

If however you do require any additional editing tools, you can check out the CKEditor download page and create yourself a custom download package. Be sure to upload any missing web resources using the same publisher prefix, and same file names, then update the config.js file to load those plugins as well.

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.

To download this package, check out the solution on CodePlex: https://crmhtmleditor.codeplex.com/