Question

有时在CRM界面中使用HTML编辑器很有用。可以直接将编辑器实现到CRM 2013.作为编辑器，我们将使用ckeditor，它允许在服务器上无需安装的情况下使用它。

Answer 1

确定您要使用富文本编辑器的字段。
创建 html-webresource ，它将定义ckeditor。转到设置 - 自定义 - 自定义系统 - Web资源。

Rich Text Editor Web Resource

在网络资源的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）以下代码从web加载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（），它获取目标字段的名称，其中应放置富文本编辑器。此信息从查询字符串中获取。这将允许在多个表单上使用此Web资源。

c）ckeditor本身的初始化 - 设置ckeditor的目标字段和属性。还将编辑器与页面上的预定义textarea绑定。

在您要使用WYSIWYG编辑器的表单上打开表单设计器。创建一个足够长度的文本字段（例如100 000个字符），它将保存html源代码。

在表单上插入iframe。作为Web资源，使用先前步骤中创建的资源。还要定义自定义参数（数据），您应在其中定义步骤4中定义的文本字段的名称。在我们的情况下，我们创建了new_bodyhtml文本字段，以便参数保存此值。该值由Web资源的 getTextFieldName（）返回。

不要忘记保存并发布CRM自定义中的所有更改，否则添加的网络资源和更新后的表单将无法使用。

这就是全部，以下是示例：

Answer 2

是的，您可以使用CKEditor，但是当我在表单上实现CKEditor时，事实证明它在提供的功能方面非常有限。此外，它生成的HTML还有很多不足之处。所以，我尝试了类似于Pavel的想法，但使用支持字段来使用TinyMCE存储实际的HTML。你可以在这里找到代码：

Javascript
HTML
Documentation

我将我的解决方案打包为托管和非托管CRM解决方案，可以在任何表单上导入和使用。此外，它适用于CRM 2013和CRM 2015

CRM 2013中的富文本编辑器（WYSIWYG）

2 个答案: