CRM 2013中的富文本编辑器（WYSIWYG） [英] Rich Text Editor (WYSIWYG) in CRM 2013
问题描述
有时，在CRM界面中使用HTML编辑器很有用。可以直接在CRM 2013上实现编辑器。作为编辑器，我们将使用ckeditor，它允许使用它而无需在服务器上安装。
创建 html-webresource ，它将定义ckeditor。转到设置 - 自定义 - 自定义系统 - 网络资源。
- 在web资源的html编辑器中，选择源标签，然后插入以下代码：
< pre class =lang-html prettyprint-override> < 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（=）
}
//查找名为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（'NodataFieldName参数已传递到Rich Text Box编辑。'）;
return null;
}
else
{
return textFieldName;
}
}
else
{
alert（'没有数据参数传递到Rich Text Box编辑器。
}
}
}
else
{
alert（'没有数据参数已传递到Rich Text Box编辑器。 ;
}
return null;
}
CKEDITOR.timestamp = null;
//最大化编辑器窗口，即它将被拉伸到目标字段
CKEDITOR.on（'instanceReady'，
function（evt）
{
var editor = evt.editor;
editor.execCommand（'maximize'）;
}）;
var Xrm;
$（document）.ready（function（）
{
//从查询字符串中获取目标字段名
var fieldName = getTextFieldName （）;
var Xrm = parent.Xrm;
var data = Xrm.Page.getAttribute（fieldName）.getValue（）;
document.getElementById（'editor1'） .value = data;
/ *
//仅当您希望在编辑器中更改丢失焦点上的原始字段而不是属性更改时取消注释
更新失去焦点的文本框
CKEDITOR.instances.editor1.on（'blur'，function（）
{
var value = CKEDITOR.instances.editor1.getData（）;
Xrm.Page.getAttribute（fieldName）.setValue（value）;
}）;
* /
//在编辑器更改时更新文本框
CKEDITOR.instances.editor1.on （'change'，function（）
{
var value = CKEDITOR.instances.editor1.getData（）;
Xrm.Page.getAttribute（fieldName）.setValue（value）;
}）;
//以下设置定义编辑器允许整个HTML内容，而不删除标题，如head，style等。
CKEDITOR.config.allowedContent = true;
CKEDITOR.config.fullPage = true;
}）;
< / script>
< meta>
< / head>
< body style =word-wrap：break-word;>
< textarea class =ckeditorcols =80id =editor1name =editor1rows =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的目标字段和属性。
-
在表单上打开表单设计器想使用WYSIWYG编辑器。创建一个具有足够长度（例如100 000个字符）的文本字段，它将保存html源代码。
-
在表单上插入iframe。作为webresource使用在先前步骤中创建的资源。还要定义自定义参数（数据），在哪里应该定义在步骤4中定义的文本字段的名称。在我们的情况下，我们创建了new_bodyhtml文本字段，以便参数保存此值。此值由网络资源的 getTextFieldName（）返回。
-
不要忘记保存并发布CRM自定义中的所有更改，否则添加的web资源和更新的表单不可用。
-
示例如何：
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 use it without installation on the server.
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.
- 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.
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:
这篇关于CRM 2013中的富文本编辑器（WYSIWYG）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
