Dynamics CRM Pragmatism: December 2011

Using tinyMCE in Dynamics CRM 2011

Based on htmlbox - dynamics crm 2011 integretion described in here:

https://community.dynamics.com/product/crm/crmnontechnical/b/crmsoftwareblog/archive/2011/06/27/adding-wysiwyg-editor-to-textarea-in-microsoft-dynamics-crm-part-2-crm-2011.aspx

There are other tinyMCE - Dynamics crm 2011 integrations on the web for exmaple:
http://procentrix.com/Community/BrendenS/post.aspx?ID=13

IMPORTANT: This solution is unsupported.

Dynamics crm TinyMCE

Walkthrough:

Get the minified Jquery from
http://jquery.com/
Get the tinyMCE
http://www.tinymce.com/download/download.php
Use the web resource util as described here
http://blog.customereffective.com/blog/2011/06/using-crm-2011-web-resource-utility.html
Add the jquery and tinymce to the entity form

Create new web resource with the following code and add it to the form


var textAreaName = "new_description";

function onLoad(textarea)
{
 textAreaName = textarea;
 Xrm.Page.getAttribute(textAreaName).setSubmitMode("always");
 //Xrm.Page.getControl("new_description").setVisible(false);
 //$('#new_description').css("width", "90%").css("height", "10%");
 $('#' + textAreaName + '_d').append('<textarea id="wysiwyg" name="wysiwyg" style="width:90%;height:90%;">' + $("#" + textAreaName).val() + '</textarea>');
 $('#' + textAreaName).hide();

 tinyMCE.init({
  mode : "exact",
  elements : "wysiwyg",
  theme : "advanced",
  plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
  theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
  theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
  theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions", 
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,
  onchange_callback : "myCustomOnChangeHandler"
 });
}

function myCustomOnChangeHandler(inst) {
  if(inst.isDirty()) {
   inst.save();
  }
  Xrm.Page.getAttribute(textAreaName).setValue($('#wysiwyg').val());
  return true;
}

function onSave()
{
 for (var i=0; i<tinymce.editors.length; i++) {
  tinyMCE.execCommand('mceRemoveControl',false, tinymce.editors[i].id); 
 };
 $('#wysiwyg').remove();
}

Add new onload event: function name: onLoad Parameter: "the attribute schema name"
Add new onsave event: function name: onSave
Save and publish...