By this level, I feel it’s moderately evident that Microsoft has little inclination to enhance the expertise of making an attempt to create an electronic mail in CRM, repeatedly I’ve witnessed customers struggling to create a primary electronic mail with some easy formatting as a result of the built-in instruments simply don’t fairly reduce it.
To enhance this example, let’s add TinyMCE assist to our electronic mail type in CRM which is able to permit our customers so as to add some correct formatting and a few additional goodies similar to tables and supply code with out challenge.
We’ll go from this –
To this –
The Resolution
Getting an API Key for TinyMCE
Earlier than persevering with, you will have an API Key which is offered without cost by TinyMCE which lets you use their ‘Tiny Cloud’ implementation of TinyMCE which must be greater than sufficient for most individuals. Go to the hyperlink beneath and choose ‘Join a free API key’ and join as required.
https://www.tiny.cloud/get-tiny/
When requested for the area, you’ll want to enter the first area your CRM occasion makes use of. For cloud implementations of CRM this might be alongside the strains of *firm*.crm11.dynamics.com
Make a duplicate of the API key you’re supplied with.
Including TinyMCE to Dynamics
- Initially, we have to create a Net Useful resource which we’ll place on a type in CRM.
- Take a duplicate of the code discovered within the part beneath this checklist in Notepad or your favorite textual content editor.
- Now change the *APIKEY* placeholder on line 5 with your personal API Key from the earlier step.
- Save the file to someplace memorable as a .html file.
- Now entry your CRM occasion and both go to the shape you wish to add the editor to (Activites > New E-mail) or go to it through the Customizations window in settings.
- In case you’ve gone to the ‘New E-mail’ type then click on FORM within the command bar on the high.
- As soon as on the shape customization window, choose the ‘INSERT’ tab on the high left then click on ‘Net Useful resource’ on the right-hand aspect.
- It is best to now be seeing a dialogue window with a number of required fields. Firstly click on the lookup icon to the appropriate of the ‘net useful resource’ subject.
- Scroll down within the checklist and click on ‘Lookup Extra Information’.
- Click on ‘New’ on the backside left.
- A brand new window will seem, fill within the particulars much like the picture beneath.
- Click on ‘Select File’ after which choose the .html file you saved earlier.
- As soon as achieved click on Save after which Publish.
- Shut the window so that you simply’re now seeing the ‘Net Useful resource Properties’ window and fill within the Identify and label much like the picture beneath.
- Click on OK.
- A brand new Net Useful resource subject ought to now seem on the shape, drag it to wherever you need (I recommend simply above the e-mail description subject).
- I’d recommend double-clicking the useful resource, going to the formatting tab and altering ‘Variety of Rows’ to be 1 moderately than the default of 6.
- Click on Save after which Publish.
In case you now refresh the e-mail type you need to see one thing much like the picture beneath.
Clicking this opens a Tiny MCE editor the place you may create and format an electronic mail which is able to write again to the e-mail description by clicking the Replace button within the window.
The Code
<html><head>
<script>
perform openEditWindow() {
//set tinymce choices
var tinymcesource=""https://cloud.tinymce.com/secure/tinymce.min.js?apiKey=****************""
var tinymcepluginlist=""advlist autolink lists hyperlink picture charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media desk contextmenu paste"";
var tinymcetoolbar=""undo redo | styleselect | daring italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | hyperlink picture preview"";
//get the content material of the e-mail description subject
var emailBody = mother or father.Xrm.Web page.getAttribute("description").getValue();
//construct the content material of the editor popup window
var editContent="<html>n<head>";
editContent += '<title>TinyMCE E-mail Editor</title>n';
//this masses jquery from the google cdn. you may host it some other place.
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 perform is used to replace the crm e-mail physique subject and shut the editor popup
editContent += 'perform updateEmailForm() {n';
editContent += 'window.opener.mother or father.Xrm.Web page.getAttribute("description").setValue(tinymce.get("editbox").getContent());n';
editContent += 'window.opener.mother or father.Xrm.Web page.information.entity.attributes.get("description").controls.get(0).setFocus();n';
editContent += 'this.window.shut();n';
editContent += '}';
editContent += '</scr'+'ipt>';
editContent += '</head>n<physique type="margin:0px 0px 0px 0px;" onload="initEditor();">';
editContent += '<scr'+'ipt>n';
//perform to initialize the tinymce performance
editContent += 'perform initEditor() {';
editContent += 'if (typeof tinymce == "undefined") {';
editContent += '$("#editdiv").cover();';
editContent += '$.getScript('+tinymcesource+', perform () {';
editContent += 'window.tinymce.dom.Occasion.domLoaded = true;';
editContent += 'tinymce.init({selector:"textarea",plugins: ['+tinymcepluginlist+'], toolbar:'+tinymcetoolbar+' })n';
editContent += '$("#loadingdiv").cover();';
editContent += '$("#editdiv").present();';
editContent += '$("#editbuttondiv").present();';
editContent += '});';
editContent += '}';
editContent += '};';
editContent += '</scr'+'ipt>';
//right here we a visibile "loading" div arrange a hidden div with a textarea containing the html from the e-mail description subject
editContent += '<div id="loadingdiv">Initializing editor . . . </div>';
editContent += '<div id="editdiv"><textarea id="editbox" type="width: 800px; peak: 500px; ">'+emailBody+'</textarea>';
editContent += '<button type="peak:42px;float:proper;" onclick="updateEmailForm();">Replace e-mail type and shut</button></div>';
editContent += '</physique></html>';
//open the editor popup window
var editWindow = window.open("","editorwindow","peak=588,width=800,scrollbars=sure");
//write the editContent string to the editor popup
editWindow.doc.write(editContent);
//shut the doc stream
editWindow.doc.shut();
}
</script>
<meta></head>
<physique type="margin: 3px 0px 0px 5px; overflow-wrap: break-word;" onfocusout="mother or father.setEmailRange();">
<button onclick="openEditWindow();">Open TinyMCE Editor</button>
</physique></html>
This answer is predicated on Lucas Alexanders superior work a number of years in the past, I’ve merely up to date the place required and modified just a few bits to make it work a bit nicer with present CRM implementations.
