//
you're reading...
Dynamics CRM, Dynamics CRM Master

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.  

<html><head>
<script>
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=”//tinymce.cachefly.net/4.0/tinymce.min.js”>’;
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 += ”;
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 = 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();
}
</script>
<meta><meta><meta><meta></head>
0px;margin-left:0px;”>
<button onclick=”openEditWindow();”>Open in advanced E-mail editor</button>

</body></html>

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

TinyMCE Editor

About Dipankar Bhattacharya

Dipankar is a CITA-F, ITIL certified professional specializing Customer Relationship Management (CRM) and Cloud Computing. He is a certified Microsoft Dynamics CRM specialist and Architect and have been working in the field of CRM for enterprise customers across the globe.

Discussion

No comments yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Blog Stats

  • 61,049 hits

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 565 other followers

My Book

Follow me on Twitter

%d bloggers like this: