Tuesday, December 13, 2011

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:
managed solution:


18 comments:

  1. hi .
    can u explain me wht this line,..
    var textAreaName = "new_description";
    itz showing error msg...

    ReplyDelete
  2. It's weird you should not have any errors for this line, it's a simple variable declaration. It does almost nothing.
    Please install the solution and see if it still happens.

    ReplyDelete
  3. hello i install ur solution in my crm there is some problem that when the form load first time it doesnot displaying all the images in the attribute it showing only format name ,format family and format that it
    when it loads second time it showing all the images in it
    so am not understanding where exact the problem is .....

    ReplyDelete
    Replies
    1. Hi,
      I saw it also from time to time but haven't find a solution for it yet.
      If you find one please post it here :)

      Delete
  4. I tried to get this to Work in CRM 2011 on-premise latest roll-up - but failed (even though many sites Refer to this post). I did however suceed in installing and using the ADX Productivity Pack (http://community.adxstudio.com/products/adxstudio-productivity-pack/). BR Nicolai

    ReplyDelete
    Replies
    1. This feature wasn't tested with the new rollup and It's not supported.

      Thank you for sharing, I'll post the fix when I'll have it...

      Delete
  5. Nicolai - I've been using the ADX Productivity pack for about a year on a custom entity with no issues until the microsoft update got rolled out. Now it won't work. Have you had any issues since the update?

    ReplyDelete
  6. Did you update the solution with new fixes?

    ReplyDelete
  7. Replies
    1. Question: What happens when you print the text field in an SSRS report? Does just the final text appear, or what does it look like with the changes and formatting?

      Delete
    2. Unless you'll use HTML in the ssrs, You can try this link
      http://technet.microsoft.com/en-us/library/dd207057.aspx

      Delete
  8. Hi,
    Have you got any updated solution for UR 13.
    if you have can you post it.

    Thanks.
    Gary

    ReplyDelete
  9. Hey,
    Is this support for roll-up 12 & above ?

    ReplyDelete
  10. It appears that the init() function of the TinyMCE editor is failing internally due to changes that have occurred inside CRM 2011 from Update Rollup 12 up until Update Rollup 15. Also, in the example above, the jQuery hide() function used to conceal the CRM field/textarea inside RichTextBox.js no longer works and you need to change that line of code to hide the non-RTF CRM field

    ReplyDelete
    Replies
    1. There is a fix for that here:

      http://www.it-gems.com/2014/09/fix-tinymce-working-dynamics-crm-2011-rollup-17.html

      Delete
  11. Hi, I try to do as explained and get such an error during onSave event: Unable to get property "body" of undefined or null reference.

    ReplyDelete