Rich Text Editor (WYSIWYG) in CRM 2013

后端未结

关注

 2  1163

Sometimes it is useful to have the HTML editor in CRM interface. It is possible to implement the editor directly to CRM 2013. As editor we will use ckeditor which allows to

相关标签:

2条回答

野性不改

2021-01-01 04:31
Yes, you can use CKEditor, but when I implemented the CKEditor on a form, it turns out it is quite limited in the functionality in provides. Also, the HTML it generates leaves much to be desired. So, I tried a similar idea to Pavel's but using a backing field to store the actual HTML using TinyMCE. You can find the code here:
1. Javascript
2. HTML
3. Documentation
I have package my solution as a managed and unmanaged CRM solution that can be imported and utilised on any form. Moreover, it works on both CRM 2013 and CRM 2015
0 讨论(0)
发布评论:

提交评论
- 加载中...

抹茶落季

2021-01-01 04:39

Identify the field where you would like to use the rich text editor.
Create html-webresource which will define ckeditor. Go to Settings-Customizations-Customize the System-Web Resources.

Rich Text Editor Web Resource

In html editor of web resource, select the Source tab and insert the following code:

<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>

Note: As you can see, there are a few important sections

a) The following code loads the ckeditor and jquery from web so that they don't have to be installed on server.

<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) Function getTextFieldName() which gets the name of target field where should be rich text editor placed. This information is obtained from query string. This will allow to use this web resource on multiple forms.

c) Initialization of ckeditor itself - setting the target field and properties of ckeditor. Also binding the editor with predefined textarea on the page.

Open the form designer on the form where you would like to use WYSIWYG editor. Create a text field with sufficient length (e.g. 100 000 chars) which will hold the html source code.
Insert the iframe on the form. As a webresource use the resource created in previous steps. Also define Custom Parameter(data) where you should define the name of the text field defined in step 4. In our situation we created new_bodyhtml text field so the parameter holds this value. This value is returned by the getTextFieldName() of the web resource.

Iframe

Do not forget to save and publish all changes in CRM customization otherwise added webresources and updated form are not available.
That's all, here is example how it looks like:

0 讨论(0)