Dynamics 365 – How to add a TinyMCE editor instead of OOB email editor
Microsoft Dynamics CRM, although has support for various kinds of fields to be placed on its forms, it does not provide a rich text editor natively. There are several use cases where a rich text editor would be very useful. One such case is when content from CRM needs to be displayed on web pages. TinyMCE is an awesome HTML editor freely available and extensively used in web applications. So, why not use that and embed in a CRM form? you will have the ability to include the editor on any form for any entity and it will allow our users to add some proper formatting and some extra goodies such as tables and source code without issue.
OOB Email Editor:
TinyMCE Email Editor:
Solution
Getting an API Key for TinyMCE
First step is, we need an API Key which is provided for free by TinyMCE Go to the link below and ‘Sign up for a free API key’ and sign up as required.
It will ask you 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*.crm.dynamics.com
Copy and API Key and save it in notepad.
Adding TinyMCE to Dynamics 365 Form
First, we need to create a Web Resource(.html) file as image below.
2. Now copy the code into the above resource and replace the *APIKEY* placeholder on line 15 with your own API Key which we have obtained from the previous step.
<html><head>
//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
<meta charset="utf-8">
<title>Email Editor</title>
<script>
$.ajaxSetup({
cache: true
});
function updateEmailForm() {
window.parent.Xrm.Page.getAttribute("description").setValue(tinymce.get("editbox").getContent());
}
$(document).ready(function() {
var emailBody = parent.Xrm.Page.getAttribute("description").getValue();
var tinymcesource = 'https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=*APIKEY*'
if (typeof tinymce == "undefined") {
$.getScript(tinymcesource, function() {
window.tinymce.dom.Event.domLoaded = true;
tinymce.init({
selector: 'textarea#editbox',
init_instance_callback: function (editor) {
editor.on('NodeChange', function (e) {
updateEmailForm();
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste'
],
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image preview'
});
});
$('#editbox').html(emailBody);
}
});
</script>
<meta></head>
<body style="margin:0px 0px 0px 0px;">
<div id="editdiv">
<textarea id="editbox" style="width: 800px; height: 240px;; "></textarea>
</div>
</body></html> 3. Now go to the email form customization window, select the ‘INSERT’ tab at the top left then click ‘Web Resource’ on the right-hand side.
4. You should now be seeing a dialogue window with several required fields. Type the web resource name and Select the .html file you saved earlier in the above step.
5. Now you will be seeing the ‘Web Resource Properties’ window and fill in the Name and label like the image below.
6. Click Ok. And then now the new Web Resource will appear on the form.
7. Now double-clock the newly created web resource and navigate to the formatting tab and change the ‘Number of Rows’ to be from 6 to 15.
8. Click Save and then Publish the CRM Form.
Now refresh the email form you will see be something similar to the image below.
