CRM 2013 中的富文本编辑器 (WYSIWYG)

Question

有时在 CRM 界面中使用 HTML 编辑器很有用。可以直接对 CRM 2013 实施编辑器。作为编辑器，我们将使用 ckeditor，无需在服务器上安装即可使用它。

Answer 1

确定要使用富文本编辑器的字段。
创建 html-webresource 将定义 ckeditor。进入设置-自定义-自定义系统-网络资源。

在网络资源的 html 编辑器中，select 源选项卡 并插入以下代码：

<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() 获取应该放置富文本编辑器的目标字段的名称。此信息是从查询字符串中获取的。这将允许在多种形式上使用此 Web 资源。

c) ckeditor本身的初始化——设置ckeditor的目标字段和属性。还将编辑器与页面上预定义的文本区域绑定。

在您要使用所见即所得编辑器的表单上打开表单设计器。创建一个具有足够长度（例如 100 000 个字符）的文本字段，用于保存 html 源代码。
在表单中插入 iframe。作为网络资源，使用在前面的步骤中创建的资源。还要定义 Custom Parameter(data)，您应该在其中定义在步骤 4 中定义的文本字段的名称。在我们的情况下，我们创建了 new_bodyhtml 文本字段，因此该参数包含此值。该值由网络资源的 getTextFieldName() 返回。

不要忘记保存并发布 CRM 自定义中的所有更改，否则添加的网络资源和更新的表单将不可用。
就是这样，下面是示例：

Answer 2

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

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

CRM 2013 中的富文本编辑器 (WYSIWYG)

Rich Text Editor (WYSIWYG) in CRM 2013

ckeditor

customization

wysiwyg

dynamics-crm-2013