Dynamics 365 – How to Add a TinyMCE Editor for CRM Emails

shaun.wilkinson

By this point, I think it’s rather evident that Microsoft has little inclination to improve the experience of trying to create an email in CRM, time and again I’ve witnessed users struggling to create a basic email with some simple formatting because the built-in tools just don’t quite cut it.

To improve this situation, let’s add TinyMCE support to our email form in CRM which will allow our users to add some proper formatting and some extra goodies such as tables and source code without issue.

We’ll go from this –

TinyMCE

To this –

TinyMCE1

The Solution

Getting an API Key for TinyMCE

Before continuing, you will need an API Key which is provided for free by TinyMCE which allows you to use their ‘Tiny Cloud’ implementation of TinyMCE which should be more than enough for most people. Go to the link below and select ‘Sign up for a free API key’ and sign up as required.

https://www.tiny.cloud/get-tiny/

When asked for the domain, be sure to enter the primary domain your CRM instance uses. For cloud implementations of CRM this will be along the lines of *company*.crm11.dynamics.com

Make a copy of the API key you’re provided with.

Adding TinyMCE to Dynamics

  1. First of all, we need to create a Web Resource which we’ll place on a form in CRM.
  2. Take a copy of the code found in the section below this list in Notepad or your favourite text editor.
  3. Now replace the *APIKEY* placeholder on line 5 with your own API Key from the previous step.
  4. Save the file to somewhere memorable as a .html file.
  5. Now access your CRM instance and either go to the form you want to add the editor to (Activites > New Email) or go to it via the Customizations window in settings.
  6. If you’ve gone to the ‘New Email’ form then click FORM in the command bar at the top.
  7. Once on the form customization window, select the ‘INSERT’ tab at the top left then click ‘Web Resource’ on the right-hand side.
  8. You should now be seeing a dialogue window with several required fields. Firstly click the lookup icon to the right of the ‘web resource’ field.TinyMCE2.PNG
  9. Scroll down in the list and click ‘Look up More Records’.
  10. Click ‘New’ at the bottom left.
  11. A new window will appear, fill in the details similar to the image below.TinyMCE3
  12. Click ‘Choose File’ and then select the .html file you saved earlier.
  13. Once done click Save and then Publish.
  14. Close the window so that you’re now seeing the ‘Web Resource Properties’ window and fill in the Name and label similar to the image below.TinyMCE4.PNG
  15. Click OK.
  16. A new Web Resource field should now appear on the form, drag it to wherever you want (I suggest just above the email description field).
  17. I’d suggest double-clicking the resource, going to the formatting tab and changing ‘Number of Rows’ to be 1 rather than the default of 6.
  18. Click Save and then Publish.

If you now refresh the email form you should see something similar to the image below.

TinyMCE5

Clicking this opens a Tiny MCE editor where you can create and format an email which will write back to the email description by clicking the Update button in the window.

The Code

<html><head>
<script>
function openEditWindow() {
    //set tinymce options
    var tinymcesource = '"https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=****************"'
    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>TinyMCE E-mail Editor</title>\n';
    
    //this loads jquery from the google cdn. you can host it somewhere else.
    editContent += '<scr'+'ipt src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr'+'ipt>';
    
    editContent += '<scr'+'ipt>';
    
    editContent += '$.ajaxSetup({cache: true});';
        
    //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;" onload="initEditor();">';
    editContent += '<scr'+'ipt>\n';

    //function to initialize the tinymce functionality
    editContent += 'function initEditor() {';
    editContent += 'if (typeof tinymce == "undefined") {';
    editContent += '$("#editdiv").hide();';
    editContent += '$.getScript('+tinymcesource+', function () {';
    editContent += 'window.tinymce.dom.Event.domLoaded = true;';
    editContent += 'tinymce.init({selector:"textarea",plugins: ['+tinymcepluginlist+'], toolbar:'+tinymcetoolbar+' })\n';
    editContent += '$("#loadingdiv").hide();';
    editContent += '$("#editdiv").show();';
    editContent += '$("#editbuttondiv").show();';
    editContent += '});';
    editContent += '}';
    editContent += '};';
    
    editContent += '</scr'+'ipt>';
    
    //here we a visibile "loading" div set up a hidden div with a textarea containing the html from the e-mail description field
    editContent += '<div id="loadingdiv">Initializing editor . . . </div>';
    editContent += '<div id="editdiv"><textarea id="editbox" style="width: 800px; height: 500px; ">'+emailBody+'</textarea>';
    editContent += '<button style="height:42px;float:right;" onclick="updateEmailForm();">Update e-mail form and close</button></div>';
    editContent += '</body></html>';
    
    //open the editor popup window
    var editWindow = window.open("","editorwindow","height=588,width=800,scrollbars=yes");
    
    //write the editContent string to the editor popup
    editWindow.document.write(editContent);
    
    //close the document stream
    editWindow.document.close();
}
</script>
<meta></head>
<body style="margin: 3px 0px 0px 5px; overflow-wrap: break-word;" onfocusout="parent.setEmailRange();">
<button onclick="openEditWindow();">Open TinyMCE Editor</button>

</body></html>

This solution is based on Lucas Alexanders awesome work several years ago, I’ve simply updated where required and modified a few bits to make it work a bit nicer with current CRM implementations.

12 thoughts on “Dynamics 365 – How to Add a TinyMCE Editor for CRM Emails”

  1. Hi Shaun,
    Have you managed to integrate this tool with Email Template entity as well, I see it’s impossible to do it through Solutions approach, maybe you know another way?

    Like

    Reply

  2. Since there is no pastecode.xyz anymore, could you please place the code somewhere else, cause it’s unable to get it now.

    Like

    Reply

  3. Hi Shaun, I figured out why it wasn’t closing the pop-up window. I had to remove the “a” inside the bracket “setFocus(a)” on line 26 and it now works. Thanks once again for your helpful post.

    Like

    Reply

    1. Yes, I get this error:
      A parser-blocking, cross site (i.e. different eTLD+1) script, https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
      openEditWindow @ VM3259 TinyMCE_Editor:57
      plugin.min.js:9 Context menu plugin is now built in to the core editor, please remove it from your editor configuration
      (anonymous) @ plugin.min.js:9

      Like

      Reply

  5. Hi Shaun, thanks for this great post. I have been able to get it loaded in Dynamics 365 Email form on Chrome browser, however when I finish editing and click the Update and close form button, it only updates the email body, it does not close the pop up window. Please any idea why it’s doing that.

    Like

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.