Using tinyMCE in Dynamics CRM 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:

1. Get the minified Jquery from
   http://jquery.com/
2. Get the tinyMCE
   http://www.tinymce.com/download/download.php
3. Use the web resource util as described here
   http://blog.customereffective.com/blog/2011/06/using-crm-2011-web-resource-utility.html
4. Add the jquery and tinymce to the entity form
   
5. 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();
   }
   

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

You can download an example here (Replaces the entity task!):

unmanaged solution:

https://docs.google.com/open?id=0B8k6R6QcCN7INjAwZmQxNjAtMWJmZS00ZDRjLTliOWYtZGIxNzkyYzFlMTVj

managed solution:

https://docs.google.com/open?id=0B8k6R6QcCN7IMWIyNzVlZWMtNzMzYS00NGUxLWJkNjQtNWE5NmUwMDM3NDky