Geek Answers Handbook

Rich Text Editor (WYSIWYG) in CRM 2013

It is sometimes useful to have an HTML editor in the CRM interface. The editor can be implemented directly in CRM 2013. As an editor, we will use ckeditor, which allows you to use it without installing it on the server.

+4
source share
2 answers

  • Define the field in which you would like to use a text editor.

  • Create an html-webresource that will define ckeditor. Go to the Settings-Settings section . Configure System-Web Resources .

Rich Text Editor Web Resource

  1. html - :
<html>
<head>
    <title></title>
    <script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

        function getTextFieldName()
        {
            var vals = new Array();
            if (location.search != "") 
            {
                vals = location.search.substr(1).split("&");
                for (var i in vals) 
                {
                    vals[i] = vals[i].replace(/\+/g, " ").split("=");
                }

                //look for the parameter named 'data'
                for (var i in vals) 
                {
                    if (vals[i][0].toLowerCase() == "data") 
                    {
                        var datavalue = vals[i][2];
                        var vals2 = new Array();
                        var textFieldName = "";
                        vals2 = decodeURIComponent(datavalue).split("&");
                        for (var i in vals2) 
                        {                
                            var queryParam = vals2[i].replace(/\+/g, " ").split("=");
                            if (queryParam[0] != null && queryParam[0].toLowerCase() == "datafieldname")
                            {
                                textFieldName = queryParam[1];
                            }
                        }

                        if (textFieldName == "")
                        {
                            alert('No "dataFieldName" parameter has been passed to Rich Text Box Editor.');
                            return null;
                        }
                        else
                        {
                            return textFieldName;     
                        }
                    }
                    else
                    {
                        alert('No data parameter has been passed to Rich Text Box Editor.');
                    }
                }

            }
            else 
            {
                alert('No data parameter has been passed to Rich Text Box Editor.');
            }
            return null;
        }

        CKEDITOR.timestamp = null;


      ​// Maximize the editor window, i.e. it will be stretched to target field
        CKEDITOR.on('instanceReady',
         function( evt )
         {
             var editor = evt.editor;
             editor.execCommand('maximize');
         });

        var Xrm;

        $(document).ready(function () 
        {

​           // Get the target field name from query string
            var fieldName = getTextFieldName();
            var Xrm = parent.Xrm;

            var data = Xrm.Page.getAttribute(fieldName).getValue();
            document.getElementById('editor1').value = data;

            /*
            // Uncomment only if you would like to update original field on lost focus instead of property change in editor

                     //Update textbox on lost focus
                     CKEDITOR.instances.editor1.on('blur', function () 
            {
             var value = CKEDITOR.instances.editor1.getData();            
             Xrm.Page.getAttribute(fieldName).setValue(value);
                     });
            */
            // Update textbox on change in editor
            CKEDITOR.instances.editor1.on('change', function () 
            {
                var value = CKEDITOR.instances.editor1.getData();            
                Xrm.Page.getAttribute(fieldName).setValue(value);
            });

            // Following settings define that the editor allows whole HTML content without removing tags like head, style etc.
            CKEDITOR.config.allowedContent = true;
            CKEDITOR.config.fullPage = true;
        });


    </script>
    <meta>
</head>
<body style="word-wrap: break-word;">
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>

</body>
</html>

: ,

a) ckeditor jquery , .

<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

b) getTextFieldName(), , . . - .

c) ckeditor - ckeditor. .

  1. , WYSIWYG. (, 100 000 ), html.

  2. iframe . webresource , . Custom Parameter (data), , 4. new_bodyhtml, . getTextFieldName() -.

Iframe

  1. CRM, webresources .

  2. , , : Example

+5

, CKEditor, CKEditor , , , . , HTML, , . , , HTML TinyMCE. :

CRM-, . , CRM 2013, CRM 2015

0

More articles:


All Articles