Adding Rich Text Editor

Many people want a rich text editor in their CRM views to edit descriptions or notes. Solving this problem in general is hard across all devices such as desktop web and mobile, but here's a start.

First, look at this blog. It provides the general idea.

I had problems with this working for me, so I had to change the code to:

// Function that when called, loads the CKEditor from a CDN and converts some specially named fields...modify to meet
// the needs of your script block.

function convertToRichText() {

    // import the ckeditor script, but do it without web resources..  so we create a script tag in the DOM
    var headblock = parent.parent.document.getElementById("contentIFrame0").contentWindow.document.getElementsByTagName('head')[0];
    var newscriptblock = parent.parent.document.getElementById("contentIFrame0").contentWindow.document.createElement('script');
    newscriptblock.type = 'text/javascript';
    // we have to wait until the script is loaded before we can use it, so registering a callback event
    newscriptblock.onload = function() {

        // some configuration for the CKEDITOR rich text control
        var CKE = parent.parent.document.getElementById("contentIFrame0").contentWindow.CKEDITOR;
        CKE.config.allowedContent = true
        CKE.config.toolbarCanCollapse = true;
        CKE.config.toolbarStartupExpanded = false;
        CKE.config.width = '95%';

        var fieldsToReplace = ["new_richdescription"];
        for (var i = 0; i < fieldsToReplace.length; i ++) {
            var fieldname = fieldsToReplace[i];
            // We find the 'edit' control for the engagement overview and replace it with a rich text control
           var richtexteditor = CKE.replace(fieldname + '_i');

        richtexteditor.on('change', function() { 
          Xrm.Page.data.entity.attributes.get(fieldname).setValue(richtexteditor.getData());
        });
        richtexteditor.on('loaded', function ( field ) {
                // when the rich text control is done loading, we need to change the display so it shows the rich text - this covers the page load scenario
                $('#contentIFrame0', window.top.document).contents().find('div#' + field + ' div.ms-crm-Inline-Value').css('display', 'none');
                $('#contentIFrame0', window.top.document).contents().find('div#' + field + ' div.ms-crm-Inline-Edit').css('display', 'inline-block');
                $('#contentIFrame0', window.top.document).contents().find('div#' + field + ' div.ms-crm-Inline-Edit').css('width', '95%');

            }(fieldname));
        }
    };
    newscriptblock.src = '//cdn.ckeditor.com/4.5.5/standard/ckeditor.js';
    headblock.appendChild(newscriptblock);
}

And then it worked. However, I found it klunky so you need to ensure that you build a robust solution that works on all devices. You'll want to make this more robust in several ways but that's the gist of it.

Note that the Xrm toolkit recently released a rich text editor based on CKEditor. That's described here.