有时,CRM 界面中的 HTML 编辑器很有用。可以直接在 CRM 2013 中实现编辑器。作为编辑器,我们将使用 ckeditor,它允许在不安装在服务器上的情况下使用它。
确定您想要使用富文本编辑器的字段。
Create html 网络资源这将定义 ckeditor。去设置-自定义-自定义系统-Web资源.
- 在网页资源的 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>
Note:正如你所看到的,有几个重要的部分
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) 功能获取文本字段名称()它获取应放置富文本编辑器的目标字段的名称。该信息是从查询字符串中获取的。这将允许在多种形式上使用此网络资源。
c) ckeditor本身的初始化——设置ckeditor的目标字段和属性。还将编辑器与页面上预定义的文本区域绑定。
在您想要使用所见即所得编辑器的表单上打开表单设计器。创建一个具有足够长度(例如 100 000 个字符)的文本字段,用于保存 html 源代码。
在表单上插入 iframe。使用前面步骤中创建的资源作为网络资源。还要定义自定义参数(数据),您应该在其中定义步骤 4 中定义的文本字段的名称。在我们的情况下,我们创建了 new_bodyhtml 文本字段,以便参数保存此值。该值由获取文本字段名称()的网络资源。
不要忘记保存并发布 CRM 自定义中的所有更改,否则添加的 Web 资源和更新的表单将不可用。
That's all, here is example how it looks like:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)