News Ticker

Create an advanced Email Editor for Dynamics CRM using TinyMCE

The Email editor in Dynamics CRM is relatively naive and provides only basic editing features. To fill the gap, we can use OpenSource TineMCE WYSWYG editor and integrate with Dynamics CRM 2011.

TinyMCE  also known as Tiny Moxiecode Content Editor, is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. This editor has the ability to convert HTML textarea fields or other HTML elements to editor instances. TinyMCE is designed to easily integrate with content management systems, including DrupalJoomla!,WordPress and SOY CMS. Here, we would integrate TinyMCE with Dynamics CRM 2011.

In this example, we would add a button known as “Open in advanced Email editor” in the Email entity; when user clicks on this button the e-mail content, if any, from the description field would get copied in the poped up TineMCE editor, where this content can be edited with advanced features and then finally can be saved back to the Email Description field.

TinyMCE is compatible with multiple browsers, including Internet Explorer, Mozilla Firefox, Safari, Opera and Google Chrome, across multiple operating systems.

We have to create a new Web Resource using the following HTML code and then add the web resource in the email form. In this example, I am accessing the TinyMCE script from the CacheFly CDN; but If we cannot use a CDN from Internet location, then we have to host the script and supporting resources locally and then refer the location in the script.

Web Resource 1

The following code is originally posted by Mr. Lucas Alexender in his blog post and has been re-used here with minor modifications.  

function openEditWindow() {
//set tinymce options
var tinymcepluginlist = ‘”advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table contextmenu paste”‘;
var tinymcetoolbar = ‘”undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image preview”‘;

//get the content of the e-mail description field
var emailBody = parent.Xrm.Page.getAttribute(“description”).getValue();

//build the content of the editor popup window
var editContent = ‘\n’;
editContent += ‘Advanced E-mail Editor\n’;
//this loads the tinymce script from the cachefly cdn. you can host it somewhere else.
editContent += ‘<scr’+’ipt src=”//”>’;
editContent += ‘<scr’+’ipt>\n’;
//this function is used to update the crm e-mail body field and close the editor popup
editContent += ‘function updateEmailForm() {\n’;
editContent += ‘window.opener.parent.Xrm.Page.getAttribute(“description”).setValue(tinymce.get(“editbox”).getContent());\n’;
editContent += ‘“description”).controls.get(0).setFocus();\n’;
editContent += ‘this.window.close();\n’;
editContent += ‘}’;
editContent += ”;
editContent += ‘\n’;
//here we set the textarea content equal to the html from the e-mail description field
editContent += ”+emailBody+”;
editContent += ‘
Update e-mail form and close’;
editContent += ‘<scr’+’ipt>\n’;
//initialize the tinymce functionality
editContent += ‘tinymce.init({selector:”textarea”,plugins: [‘+tinymcepluginlist+’], toolbar:’+tinymcetoolbar+’ })\n’;
editContent += ”;
editContent += ”;

//open the editor popup window
var editWindow =“”,”editorwindow”,”height=700,width=800,scrollbars=yes,resizable=yes”);

//write the editContent string to the editor popup

//close the document stream
<button onclick=”openEditWindow();”>Open in advanced E-mail editor</button>


Thereafter, add the web resource in the Email entity form. The final outcome would be like below:

TinyMCE Editor

About Dipankar Bhattacharya (59 Articles)
A multi-skilled Dynamics 365 Professional with strong experience in delivering IT projects especially across multiple industries. A Microsoft technology evangelist, a regular speaker at tech events, blogger and avid reader. Certified IT Architect and well versed in Solution Architecture of Business Applications using Microsoft platforms like Dynamics 365, Azure and Office 365.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: