Create a Rich-Text textarea in Microsoft CRM 2013 forms

Sometimes there is a need for creating HTML content within an entity. There are many websites with a how-to description, but be careful: most of them are unsupported! You can easily recognize those solutions. Whenever you find a javascript code which uses something like “document.getElementById()” or uses jquery to get or change attributes on a crm form … hands off. This is unsupported and might be a problem the next time you install an update rollup or upgrade to a new major release.

But it is very simple to build a rich text element. Here is an easy walktrough:

1) Identify the field you want to store the HTML code into. Best practice is to use a memo field, large enough to hold the whole content. You can use for example the description field in the contact entity, or something similar.

2) Download a free WYSIWYG editor. Personally I find the best choice is ckeditor, but you can use almost any other. You can download ckeditor from this site.

3) Create a html-webresource with more or less this content:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../ckeditor_/ckeditor/ckeditor.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
        CKEDITOR.timestamp = null;
        var Xrm;

        $(document).ready(function () {

            var Xrm = parent.Xrm;
            var voeb_eckdaten = Xrm.Page.getAttribute("description").getValue();
            document.getElementById('editor1').value = voeb_eckdaten;

            CKEDITOR.instances.editor1.on('blur', function () {
                var value = CKEDITOR.instances.editor1.getData();
                Xrm.Page.getAttribute("description").setValue(value);
            });

        });

    </script>
</head>
<body>
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
</body>
</html>

In this example I used the description field for editing. This means of course you must have the field somewhere on the form.
What this code does is:
* wait until the document is in ready state
* get the content of the description field
* initialize ckeditor

It took me some time to recognize that ckeditor uses a parameter to avoid being cached, but if you leave the timestamp property on, crm will throw an error (500 server error). I disabled the timestamp setting the property to null.
ckeditor sample

So if you would like to use this in your crm deployment I added a solution with the complete ckeditor. I suggest to use a managed solution in your production environment, so if you want to get rid of ckeditor all you have to do is to uninstall the solution.

download unmanaged
download managed

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation