Skip to main content

How to add a TinyMCE editor for description fields in Dynamics 365

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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
REPORT THIS A
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.


Labels:

Comments

Post a Comment

Popular posts from this blog

Microsoft Dynamics 365 CRM Troubleshooting Solution Import Errors

Remember when CRM life was so much simpler that solutions did not yet exist? If you had separate development and production environments and you wanted to move your customizations, you simply clicked  Export Customizations  and voila! It was done. Those were the days. Nostalgia Warning – in case you’ve forgotten, here’s a screenshot to jog your memory: With CRM 2011, the concept of solutions was introduced, giving us a new set of powers – by picking individual entities, workflows, etc., we now had the ability to group together and move only those customizations we wanted to include in our solution. The next great solutions advancement came with CRM 2016: we can now select specific components within each individual entity – so instead of moving the entire contact entity, for example, we have the option of moving only a certain view or field within the entity. And we can do this without having to hack the xml in the zip file. (By the way, if you want to learn more abou...
Post a Comment
Read more

How to Filter SubGrid Lookup view in Dynamics 365 CRM

How to Filter SubGrid Lookup view in Dynamics 365 CRM.  Please check the comments in the below code and do follow the steps accordingly and call the  filterSubGrid() funtion on onload. var LastQuery = ""; function filterSubGrid() { debugger; setSubgridLookupFiltering(); } function AddLookupFilter(entity_type, customFilter) { var subgridLookup = Xrm.Page.getControl("lookup_Contacts_Participants"); subgridLookup.addCustomFilter(customFilter, entity_type); } function setSubgridLookupFiltering() { var subgridAddButtonId = "Contacts_Participants_addImageButton"; //Try to get the element from both the current and the parent document. var subgridAddButton = document.getElementById(subgridAddButtonId) || window.parent.document.getElementById(subgridAddButtonId); //This script may run before the subgrid has been fully loaded on the form. If this is the case, //delay and retry until the subgrid has been loaded. if (subg...
Post a Comment
Read more

How to prevent record from saving in Dynamics CRM using Javascript

  From time to time you might need to add some validation to the save event of an entity, this actually used to be an approach I would use on a regular basis but since the introduction of business rules have found myself doing this less and less. But still, knowing the ability is available is handy. When you define the onsave event function, you must tick the “Pass execution contact as first parameter” option. (See below) Having done that you can create an onSave function with code similar to the example I have shown below. Note forgetting the “(context)”, which will take the context parameter allowing you to prevent the save when needed. function onSave(context) { var saveEvent = context.getEventArgs(); if (Xrm.Page.getAttribute("telephone1").getValue() == null) { // *** Note: I am using an alert for testing a notification maybe better! alert("Put in a phone number!"); saveEvent.preventDefault(); } } Note: This simple example might be better achi...
Post a Comment
Read more