A Better Dynamics CRM E-mail Editor With TinyMCE

June 25, 2013 in Microsoft Dynamics CRM, CRM 2011, programming, JavaScript

I think most people would agree the e-mail editing functionality in the Dynamics CRM web UI leaves a lot to be desired. One of the most embarrassing moments I experienced on a recent project was when I had to explain to the client the convoluted process that would need to be used to add a corporate logo to outbound e-mails.

With that in mind, I decided to make a better e-mail editing interface. My original plan was to try to remove the existing e-mail toolbar from the e-mail form and replace it with something like the TinyMCE toolbar using only JavaScript. After experimenting with some different approaches, I realized I probably could make this work, but ultimately I felt the solution would be too convoluted. In addition to the technical obstacles to replacing the existing e-mail toolbar, if it were removed, there wouldn't be any way for users to access the "insert article" or "insert template" functions.

Once I decided against replacing the stock toolbar, I realized opening a popup window with a more sophisticated e-mail editing control would be a satisfactory alternative. Basically my approach has two parts:

  1. Use JavaScript to open a popup window with the e-mail text displayed in a TinyMCE-enabled textarea.
  2. Use JavaScript to write the e-mail body back to the CRM e-mail description field and close the popup window.

To keep things simple, I use a single web resource embedded in the CRM e-mail form that opens and writes a popup window entirely with JavaScript so there is only a single web resource to add to the CRM solution. Also, I am accessing the TinyMCE script from the CacheFly CDN. If you didn't want to use a CDN, obviously you'd need to host the script and supporting resources yourself.

Here's the script that makes the magic happen:

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 = '<html>\n<head>';  
editContent += '<title>Lucas Alexander\'s Better CRM E-mail Editor</title>\n';  
//this loads the tinymce script from the cachefly cdn. you can host it somewhere else.  
editContent += '<scr'+'ipt src="//tinymce.cachefly.net/4.0/tinymce.min.js"></scr'+'ipt>';  
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 += 'window.opener.parent.Xrm.Page.data.entity.attributes.get("description").controls.get(0).setFocus();\n';  
editContent += 'this.window.close();\n';  
editContent += '}';  
editContent += '</scr'+'ipt>';  
editContent += '</head>\n<body style="margin:0px 0px 0px 0px;">';  
//here we set the textarea content equal to the html from the e-mail description field  
editContent += '<textarea id="editbox" style="width: 800px; height: 500px;">'+emailBody+'</textarea>';  
editContent += '<br /><button onclick="updateEmailForm();">Update e-mail form and close</button>';  
editContent += '<scr'+'ipt>\n';  
//initialize the tinymce functionality  
editContent += 'tinymce.init({selector:"textarea",plugins: ['+tinymcepluginlist+'], toolbar:'+tinymcetoolbar+' })\n';  
editContent += '</scr'+'ipt>';  
editContent += '</body></html>';  
  
//open the editor popup window  
var editWindow = window.open("","editorwindow","height=700,width=800,scrollbars=yes,resizable=yes");  
  
//write the editContent string to the editor popup  
editWindow.document.write(editContent);  
  
//close the document stream  
editWindow.document.close();  
}

Here's a picture of the e-mail editor this script creates:

E-mail editor

Here is a complete HTML page you can upload to your CRM solution: crmemaileditor.htm (2.59 kb). All you need to do after that is add it to your e-mail entity form, and then you'll be set. This is what my e-mail form with the editor-launching button looks like:

CRM e-mail form

Happy e-mailing!

Updated - Aug. 15, 2013

There is apparently an issue with the way the script int the popup editor loads in IE8 and IE9 that causes the TinyMCE initialization to fail on the initial load. I've posted an updated web resource here: A Better Dynamics CRM E-mail Editor With TinyMCE (updated for IE8 and 9).

comments powered by Disqus