CRM 2013中的富文本编辑器(WYSIWYG)
Pav*_*mak 4 wysiwyg customization ckeditor dynamics-crm-2013
有时在CRM界面中使用HTML编辑器很有用.可以直接将编辑器实现到CRM 2013.作为编辑器,我们将使用ckeditor,它允许在服务器上安装而无需安装.
确定要使用富文本编辑器的字段.
创建将定义ckeditor的html- webresource.转到设置 - 自定义 - 自定义系统 - Web资源.
- 在Web资源的html编辑器中,选择Source选项卡并插入以下代码:
<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定制中的所有更改,否则添加的webresources和更新的表单将不可用.
这就是全部,这是一个示例:
| 归档时间： |
|
| 查看次数： |
3699 次 |
| 最近记录： |