将 富文本编辑器 控件添加到模型驱动应用

富文本编辑器控件是一个轻量级的、基于 HTML 的编辑器,构建于流行的 CKEditor 之上。 使用它,您可以在模型驱动应用中创建、粘贴和编辑带格式的文本。 要在编辑器中设置文本格式,您可以使用编辑器工具栏,插入 HTML 标记,或粘贴其他应用程序(如 web 浏览器或 Word)中的带格式文本。

您可以自定义编辑器的外观、功能和行为。 该控件的现代文本体验如下屏幕截图所示。

模型驱动应用中默认富文本编辑器的屏幕截图。

目前,富文本编辑器有两种不同的体验:

  • 现代文本编辑器:您可以实现的新体验
  • 经典文本编辑器:默认体验

现代文本编辑器增强功能

现代文本编辑器旨在与 Microsoft 应用程序(如 Outlook、Word 和 OneNote)的熟悉而直观的界面保持一致。 此更新引入了现代设计、黑暗模式、高对比度主题和新的助手功能,以增强您的文本编辑能力。

备注

经典富文本编辑器体验中可用的某些功能在现代体验中还不可用。 这些功能包括:

  • 配置选项,如本文针对经典体验所述
  • 有关记录

启用现代富文本编辑器体验

默认情况下,经典的富文本编辑器体验是启用的。 完成以下步骤,切换到现代富文本编辑器体验。

  1. 在 Dynamics 365 中,右键单击要启用现代富文本编辑器体验的应用程序,然后选择在应用程序设计器中打开。 Power Apps 打开应用程序设计器。
  2. 在命令栏上,选择设置。 将显示“设置”页面。
  3. 在左侧窗格的设置中,选择功能。 将显示“功能”页面。
  4. 根据您的需求,将以下任一或所有选项的开关设置为
    • 启用现代 RichTextEditor 控件体验和电子邮件描述:启用现代富文本编辑器控件体验和电子邮件描述。 此设置将覆盖您之前在富文本编辑器的经典(默认)电子邮件体验中进行的任何自定义。
    • 为默认控件启用现代 RichTextEditor 控件体验:为默认的、未配置的实例启用现代富文本编辑器体验。
    • 为笔记创作提供现代 RichTextEditor 控件体验:为笔记提供现代富文本编辑器体验。 此设置会覆盖您以前在富文本编辑器的经典(默认)笔记创作体验中进行的任何自定义。
  5. 选择保存
  6. 在应用程序设计器中,选择发布

从现代富文本编辑器体验恢复为经典体验

如果您需要恢复传统的富文本编辑器体验,请按照启用现代富文本编辑器体验中的相同步骤操作,但取消选择您在步骤 4 中选择的选项。

将富文本编辑器控件添加到文本列

以下配置在经典富文本编辑器体验中可用。

将文本列的格式设置为富文本时,将自动添加默认的富文本编辑器控件。

  1. 登录到 Power Apps

  2. 在左侧导航窗格中,选择解决方案

  3. 打开解决方案和解决方案中的表。

  4. 列和数据区域中,选择一个文本列。

    如果表中不包含文本列,选择 +新建列),为列输入名称。

  5. 数据类型中,选择文本右侧的 >,然后根据列包含单行文本还是多行文本选择适当的富文本选项。

  6. 保存列,然后将其添加到窗体中。

将富文本编辑器控件添加到窗体中的文本列

以下配置在经典富文本编辑器体验中可用。

  1. 登录到 Power Apps

  2. 在左侧导航窗格中,选择解决方案

  3. 打开解决方案和解决方案中的表。

  4. 数据体验区域中,选择窗体,然后找到包含要向其中添加富文本编辑器的文本列的窗体。

  5. 选择 > 编辑 > 在新选项卡中编辑

  6. 在窗体设计器区域,选择、添加或创建文本列。

  7. 在列属性窗格中,展开组件列表,选择 + 组件,然后选择富文本编辑器控件

  8. 添加富文本编辑器控件窗格中,选择 Web电话平板电脑,允许在任何设备上运行的应用使用编辑器。

    如果要自定义编辑器,在静态值框中输入其配置文件的相对 URL,配置文件是一个包含要更改的属性的 JavaScript web 资源。 如果将此字段留空,编辑器将使用默认配置。

  9. 选择完成

  10. 选择保存并发布对窗体应用更改。

自定义富文本编辑器控件

经典富文本编辑器体验中提供了以下自定义设置。

Power Apps 让您可以更改富格文本编辑器控件的属性,来自定义其外观、功能和行为。 要自定义控件的特定实例,在单个 JSON 格式的配置文件中指定属性及其值。 要自定义控件的全局配置,更改默认配置文件中的属性。

自定义级别

最多可以有三个级别或层的配置可以自定义富文本编辑器:

  1. 在最基本的层面上,控件的每个实例都从文件 RTEGlobalConfiguration_Readonly.json 中获取配置。 此文件是只读的,因此不能直接更改这些属性。
  2. 在下一级别,控件的每个实例都从文件 RTEGlobalConfiguration.json 中的属性获取配置(如果存在)。 此配置在上一个配置之上分层,因此此文件中的属性将替换只读文件中相同的命名属性。
  3. 最后,在最高级别上,控件的特定实例从特定配置文件获取配置(如果存在)。 此配置在上一个配置之上分层,因此此文件中的属性将替换两个更低级别的文件中相同的命名属性。

我们必须在这里添加一点限定条件。 并非所有属性都会被更高级别配置中的属性替换。 extraPlugins 属性将合并,以允许在默认配置中使用广泛的外部和现成插件。 这样,您可以根据需要在配置文件中为控件的特定实例激活和停用插件。

自定义富文本编辑器的特定实例

  1. 在 Visual Studio Code 或其他文本编辑器中,创建一个文件并为其指定一个有意义的名称。

    文件 RTEGlobalConfiguration.json 包含富文本编辑器的默认或全局配置。 假设如果您在联系人窗体中自定义控件,您可以将文件的名称命名为类似于 RTEContactFormConfiguration.json

  2. 将以下代码片段复制并粘贴到文件中:

    {
    "defaultSupportedProps": {
      "propertyName": "value",
      "propertyName": "value",
      "propertyName": "value"
    },
    }
    

    最后一个 propertyName:value 对不以逗号结尾。

  3. 用要更改的富文本编辑器控件属性替换 propertyNamevalue。 字符串值必须用引号括起来。

    我们为您提供了一些示例配置,但您可以定义其他配置来满足您的需求。

  4. 在 Power Apps 中,使用您在步骤 1 中创建的 JSON 文件创建 JavaScript (JS) 类型的 Web 资源

  5. 将富文本编辑器控件添加到表单的文本列中,并在添加富文本编辑器控件窗格中静态值中,输入 JavaScript web 资源的相对 URL。

    虽然您可以输入 web 资源的绝对 URL,但我们建议您输入相对 URL。 这样,如果将 web 资源作为解决方案导入到不同的环境,只要相对路径相同,它仍然可以工作。

    例如,如果 web 资源的 URL 为 https://yourorg.crm.dynamics.com/WebResources/rtecontactform,相对 URL 为 /WebResources/rtecontactform

  6. 选择完成

  7. 选择保存并发布对窗体应用更改。

全局自定义富文本编辑器控件

可编辑的全局配置文件 RTEGlobalConfiguration.json 是您可以应用的第二个自定义级别。 默认情况下,此文件是空的。 这意味着富文本编辑器的所有实例都使用只读文件 RTEGlobalConfiguration_Readonly.json 中的属性,除非您为控件的特定实例创建了配置文件

如果您的业务需求需要在任何地方自定义控件,在 RTEGlobalConfiguration.json 文件中指定所需的值。 以此只读文件为例,确保以正确的格式输入属性值对。

在编辑器中使用 Copilot 优化文本

Copilot 使用自然语言处理算法来帮助改进书面内容。 您可以将 Copilot 添加到富文本编辑器,然后获取改进文本语法、清晰度或整体质量的建议。 了解如何在富文本编辑器中使用 Copilot

富文本编辑器属性

确定富文本编辑器实例“外观”的 JSON 文件包含两组属性:

示例配置文件

以下代码是一个 JSON 文件的示例,该文件同时包含 defaultSupportedProps 属性和各个配置属性。 如果属性具有默认值,将显示默认值。 如果属性没有默认值,将显示一个示例值来说明语法。 下面的两个表中介绍了这些属性。

"defaultSupportedProps": {
  "height": 185,
  "stickyStyle": {
    "font-size": "9pt",
    "font-family": "'Segoe UI','Helvetica Neue',sans-serif"
  },
  "stickyStyles_defaultTag": "div",
  "font_defaultLabel": "Segoe UI",
  "fontSize_defaultLabel": "9",
  "toolbarLocation": "bottom",
  "toolbar": [
  [ "CopyFormatting" ],
  [ "Font" ],
  [ "FontSize" ],
  [ "Bold" ],
  [ "Italic" ],
  [ "Underline" ],
  [ "BGColor" ],
  [ "TextColor" ],
  [ "BulletedList" ],
  [ "NumberedList" ],
  [ "Outdent" ],
  [ "Indent" ],
  [ "Blockquote" ],
  [ "JustifyLeft" ],
  [ "JustifyCenter" ],
  [ "JustifyRight" ],
  [ "Link" ],
  [ "Unlink" ],
  [ "Subscript" ],
  [ "Superscript" ],
  [ "Strike" ],
  [ "Image" ],
  [ "BidiLtr" ],
  [ "BidiRtl" ],
  [ "Undo" ],
  [ "Redo" ],
  [ "RemoveFormat" ],
  [ "Table" ]
 ],
  "plugins": [["button,toolbar,dialogui,dialog,autogrow,notification,clipboard,textmatch,fakeobjects,link,autolink,basicstyles,bidi,blockquote,panelbutton,panel,floatpanel,colorbutton,colordialog,listblock,richcombo,menu,contextmenu,copyformatting,enterkey,entities,popup,find,floatingspace,font,format,htmlwriter,horizontalrule,indent,indentblock,indentlist,justify,lineutils,openlink,list,liststyle,maximize,undo,menubutton,notificationaggregator,xml,ajax,pastetools,pastefromword,pastetext,preview,table,quicktable,removeformat,resize,selectall,showborders,sourcearea,specialchar,stylescombo,tab,tabletools,tableresize,tableselection,widgetselection,widget,wysiwygarea,textwatcher"]],
  "extraPlugins": "accessibilityhelp,autogrow,autolink,basicstyles,bidi,blockquote,button,collapser,colorbutton,colordialog,confighelper,contextmenu,copyformatting,dialog,editorplaceholder,filebrowser,filetools,find,floatpanel,font,iframerestrictor,indentblock,justify,notification,panel,panelbutton,pastefromword,quicktable,selectall,stickystyles,superimage,tableresize,tableselection,tabletools,uploadfile,uploadimage,uploadwidget",
  "removePlugins": "a11yhelp,codemirror,magicline,scayt,showborders",
  "superimageImageMaxSize": 5,
  "disallowedContent": "form[action]; *[formaction]; script; *[on*]",
  "linkTargets": ["notSet", "_blank"],
},
"attachmentEntity": {
  "name": "msdyn_richtextfiles",
  "fileAttributeName": "msdyn_fileblob"
},
"disableContentSanitization": true,
"disableDefaultImageProcessing": false,
"disableImages": false,
"externalPlugins": [
  {
    "name": "EmbedMedia",
    "path": "/WebResources/msdyncrm_/myplugins/embedmedia/"
  }
],
"imageEntity": {
  "imageEntityName": "msdyn_richtextfiles",
  "imageFileAttributeName": "msdyn_imageblob"
},
"readOnlySettings": {
  "height": 500,
  "showFullScreenExpander": true
},
"sanitizerAllowlist": {
  "attributes": [],
  "cssProperties": [],
  "domains": [],
  "protocols": [],
  "tags": []
},
"showAsTabControl": false,
"showFullScreenExpander": false,
"showHtml": false,
"showPreview": false,
"showPreviewHeaderWarning": false,
"allowSameOriginSandbox": false

defaultSupportedProps

下表介绍了最常用的属性,但您可以配置 CKEditor 支持的所有属性。 富文本编辑器控件使用 CKEditor 4。

属性 Description Default value
height 设置内容区域的初始高度(以像素为单位)。 “185”
stickyStyle 设置编辑器字体和大小。 请参见 defaultSupportedProps
stickyStyles_defaultTag 在编辑器内容区域中的文本周围创建包装器。 它最初设置为“div”,但您可以将其更改为“p”或任何其他标记。 “div”
font_defaultLabel 设置工具栏中显示的字体标签。 此标签仅用于外观呈现,没有具体功用。 stickyStyle 属性确定编辑器字体和大小。 "Segoe UI"
fontSize_defaultLabel 设置工具栏中显示的字体大小标签。 此标签仅用于外观呈现,没有具体功用。 stickyStyle 属性确定编辑器字体和大小。 “9”
toolbarLocation 设置工具栏在编辑器内容区域的位置。 支持的值为“top”和“bottom”。 “bottom”
工具栏 列出要显示的工具栏按钮。 请参见 defaultSupportedProps
插件 列出编辑器可以使用的预设插件。 如果为 extraPluginsremovePlugins 指代了值,此列表中的插件可能与加载的插件不同。 如果将此属性设置为空字符串,编辑器将在没有工具栏的情况下加载。 请参见 defaultSupportedProps
extraPlugins 将插件追加到 plugins 列表中以加载更多插件。
很多插件需要其他插件才能工作。 富文本编辑器会自动添加这些插件,您不能使用此属性来替代它们。 改用 removePlugins
请参见 defaultSupportedProps
removePlugins 列出不加载的插件。 使用它可以在不更改 pluginsextraPlugins 列表的情况下更改加载哪些插件。 请参见 defaultSupportedProps
superimageImageMaxSize 设置使用 superimage 插件时,嵌入图像允许的最大大小,以兆字节 (MB) 为单位。 “5”
disallowedContent 让您可以阻止用户在内容中插入您不希望包含的元素。 您可以禁止整个元素或按属性、类和样式禁止。 请参见 defaultSupportedProps
linkTargets 允许您配置用户在创建链接时可以使用哪些链接目标选项:
- “notSet”:无目标集
- “frame”:在指定框架中打开文档
- “popupWindow”:在弹出窗口中打开文档
- “_blank”:在新窗口或选项卡中打开文档
- “_top”:在整个窗口主体中打开文档
- “_self”:在激活链接的同一窗口或选项卡中打开文档
- “_parent”:在父框架中打开文档
“notSet”、“_blank”

各个属性

下表介绍了可用于自定义富文本编辑器控件的更多属性。

属性 Description Default value
attachmentEntity 要通过使用默认表以外的表对上载的文件强制执行更高的安全性,设置此属性并指定其他表。
语法:"name": "tableName", "fileAttributeName": "attributeNameofBlobReference"
请参见 defaultSupportedProps
disableContentSanitization 内容清理将从富文本内容中删除一些自定义属性或标记。 它默认会禁用,以允许从外部源复制和粘贴富文本内容。 此属性仅应用于编辑模式。 当编辑器控件为只读或禁用时,内容始终会被清理。
disableDefaultImageProcessing 默认情况下,插入编辑器的图像会被上载到配置中定义的 attachmentEntity。 外部用户可能没有查看表中内容的权限。 相反,将此属性设置为 true,可以将图像作为 base64 字符串直接存储在配置为使用 rtf 编辑器控件的列中。
disableImages 确定是否可以在编辑器中插入图像。 此属性将具有最高优先级。 如果此属性设置为 true,将禁用图像,无论 imageEntity 属性的值如何。
externalPlugins 列出可以在富文本编辑器控件中使用的外部插件或您创建的插件。
语法:"name": "pluginName", "path": "pathToPlugin"(路径值可以是绝对或相对 URL)
无;请参见 defaultSupportedProps 获取示例
imageEntity 要通过使用默认表以外的表对图像强制执行更高的安全性,设置此属性并指定其他表。
语法:"imageEntityName": "tableName", "imageFileAttributeName": "attributeNameofBlobReference"
请参见 defaultSupportedProps
readOnlySettings 这些属性决定了以只读或禁用状态查看时列的行为。 您可以指定任何支持的属性。 无;请参见 defaultSupportedProps 获取示例
sanitizerAllowlist 列出可以在编辑器中显示的其他类型的内容。 请参见 defaultSupportedProps
showAsTabControl 允许您在内容区域上方显示更多命令。 必须设置为 true 才能使用以下属性:showFullScreenExpandershowHtmlshowPreviewshowPreviewHeaderWarning
showFullScreenExpander 确定编辑器是否可以在全屏模式下使用。 showAsTabControl 必须设置为 true。
showHtml 允许用户直接显示和编辑 HTML 内容。 showAsTabControl 必须设置为 true。
showPreview 允许用户预览呈现为 HTML 的编辑器内容。 showAsTabControl 必须设置为 true。
showPreviewHeaderWarning 允许您显示或隐藏预览内容时显示的警告消息。 showAsTabControlshowPreview 必须设置为 true。
allowSameOriginSandbox 允许将编辑器中的内容视为来自与呈现应用相同的源。
请谨慎使用本属性。 仅使用受信任的外部内容。 当此属性设置为 true 时,任何外部内容都有权访问内部资源。

示例配置

以下示例配置在经典体验中创建了富文本编辑器的特定自定义。 您可以按原样使用它们,或将它们作为自定义富文本编辑器的特定实例或全局使用的起点。

将默认字体设置为 11-point Calibri

配置文件中设置这些 defaultSupportedProps 属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"font_defaultLabel": "Calibri",
"fontSize_defaultLabel": "11",
"stickyStyle": {
  "font-size": "11pt",
  "font-family": "Calibri/Calibri, Helvetica, sans-serif;"
},

让 Enter 键插入新行而不是段落块

默认情况下,按 Enter 键会创建一个带有 <p> HTML 标记的段落块。 HTML 使用段落块来对信息进行分组,就像 Word 文档中的段落一样。 浏览器对 <p> 标记的格式稍有不同,因此为了视觉上的一致性,您可能希望使用新行或换行符来标记 <br\> 标记。

配置文件中设置此 defaultSupportedProps 属性。 在此值后面加一个逗号 (,)(除非它是文件中的最后一个属性)。

"enterMode": 2,

仅粘贴或创建 HTML 5 内容

虽然富文本编辑器控件最适合 HTML 5 内容,但您也可以使用 HTML 4 标记。 但是,在某些情况下,混合使用 HTML4 和 HTML5 标记可能会带来可用性方面的挑战。 要确保所有内容都是 HTML 5,在 allowedContent 属性中提供所有支持的 HTML 5 标记。 编辑器控件会将任何不兼容的标记转换为 HTML 5 的等效标记。

配置文件中设置此 defaultSupportedProps 属性。 在此值后面加一个逗号 (,)(除非它是文件中的最后一个属性)。

"allowedContent": "a(*)[*]{*};abbr(*)[*]{*};address(*)[*]{*};area(*)[*]{*};article(*)[*]{*};aside(*)[*]{*};audio(*)[*]{*};b(*)[*]{*};base(*)[*]{*};bdi(*)[*]{*};bdo(*)[*]{*};blockquote(*)[*]{*};body(*)[*]{*};br(*)[*]{*};button(*)[*]{*};canvas(*)[*]{*};caption(*)[*]{*};cite(*)[*]{*};code(*)[*]{*};col(*)[*]{*};colgroup(*)[*]{*};data(*)[*]{*};datalist(*)[*]{*};dd(*)[*]{*};del(*)[*]{*};details(*)[*]{*};dfn(*)[*]{*};dialog(*)[*]{*};div(*)[*]{*};dl(*)[*]{*};dt(*)[*]{*};em(*)[*]{*};embed(*)[*]{*};fieldset(*)[*]{*};figcaption(*)[*]{*};figure(*)[*]{*};footer(*)[*]{*};form(*)[*]{*};h1(*)[*]{*};h2(*)[*]{*};h3(*)[*]{*};h4(*)[*]{*};h5(*)[*]{*};h6(*)[*]{*};head(*)[*]{*};header(*)[*]{*};hr(*)[*]{*};html(*)[*]{*};i(*)[*]{*};iframe(*)[*]{*};img(*)[*]{*};input(*)[*]{*};ins(*)[*]{*};kbd(*)[*]{*};label(*)[*]{*};legend(*)[*]{*};li(*)[*]{*};link(*)[*]{*};main(*)[*]{*};map(*)[*]{*};mark(*)[*]{*};meta(*)[*]{*};meter(*)[*]{*};nav(*)[*]{*};noscript(*)[*]{*};object(*)[*]{*};ol(*)[*]{*};optgroup(*)[*]{*};option(*)[*]{*};output(*)[*]{*};p(*)[*]{*};param(*)[*]{*};picture(*)[*]{*};pre(*)[*]{*};progress(*)[*]{*};q(*)[*]{*};rp(*)[*]{*};rt(*)[*]{*};ruby(*)[*]{*};s(*)[*]{*};samp(*)[*]{*};section(*)[*]{*};select(*)[*]{*};small(*)[*]{*};source(*)[*]{*};span(*)[*]{*};strong(*)[*]{*};style(*)[*]{*};sub(*)[*]{*};summary(*)[*]{*};sup(*)[*]{*};svg(*)[*]{*};table(*)[*]{*};tbody(*)[*]{*};td(*)[*]{*};template(*)[*]{*};textarea(*)[*]{*};tfoot(*)[*]{*};th(*)[*]{*};thead(*)[*]{*};time(*)[*]{*};title(*)[*]{*};tr(*)[*]{*};track(*)[*]{*};u(*)[*]{*};ul(*)[*]{*};var(*)[*]{*};video(*)[*]{*};wbr(*)[*]{*};",

仅粘贴或创建纯文本

配置文件中设置这些 defaultSupportedProps 属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"enterMode": 2,
"shiftEnterMode": 2,
"allowedContent": "*",
"disallowedContent": "*",
"forcePasteAsPlainText": true,
"toolbar": [],
"removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools",

配置文件中设置此单个属性。 在此值后面加一个逗号 (,)(除非它是文件中的最后一个属性)。

"disableImages": true,

允许编辑器使用全屏

配置文件中设置这些单个属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"showAsTabControl": true,
"showFullScreenExpander": true,

富格文本编辑器的屏幕截图,突出显示全屏扩展控件。

允许查看和编辑 HTML 内容

要允许用户直接查看和编辑内容的 HTML,显示 HTML 选项卡。

配置文件中设置这些单个属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"showAsTabControl": true,
"showHtml": true,

富格文本编辑器的屏幕截图,突出显示 HTML 选项卡控件。

显示简化的工具栏或将其彻底删除

默认情况下,编辑器工具栏包含所有可用的格式设置工具。 要提供简化的工具栏,使用 toolbar 属性并指定用户可以用来设置内容格式的工具。

配置文件中设置此 defaultSupportedProps 属性。 在此值后面加一个逗号 (,)(除非它是文件中的最后一个属性)。

"toolbar": [ { "items": [ "FontSize", "Bold", "Italic", "Underline", "BGColor" ] } ],

富格文本编辑器的屏幕截图,突出显示简化的工具栏。

要完全删除工具栏,将 toolbar 的值设置为“[]”(两个方括号)。

添加一个新字体列表,将 20-pixel Brush Script MT 设置为默认字体

配置文件中设置这些 defaultSupportedProps 属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"font_names": "Brush Script MT/'Brush Script MT', cursive;Calibri/Calibri, Helvetica, sans-serif;Calibri Light/'Calibri Light', 'Helvetica Light', sans-serif;"
"font_defaultLabel": "Brush Script MT"
"fontSize_sizes": "8/8px;12/12px;20/20px;32/32px"
"fontSize_defaultLabel": "20"
"stickyStyle": {
  "font-size": "20px",
  "font-family": "'Brush Script MT', cursive"
},

使用 Brush Script 作为默认字体和新字体列表的富文本编辑器的屏幕截图。

将工具栏放在富文本编辑器的顶部

配置文件中设置此 defaultSupportedProps 属性。 在此值后面加一个逗号 (,)(除非它是文件中的最后一个属性)。

"toolbarLocation": "top",

以 30 像素高度启动编辑器,然后调高以适应内容

配置文件中设置这些 defaultSupportedProps 属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"autoGrow_onStartup": false,
"autoGrow_maxHeight": 0,
"autoGrow_minHeight": 30,
"height": 30,

屏幕截图为在富文本区域中键入内容或粘贴图像,增大富文本区域以适应内容。

将编辑器高度固定为 500 像素

配置文件中设置这些 defaultSupportedProps 属性。 除最后一个值外,每个值后面都应加一个逗号 (,)。

"removePlugins": [ "autogrow" ],
"height": 500,

显示在固定高度的情况下,当向富文本区域添加足够的内容时,会出现滚动条的屏幕截图。

让上下文(右键单击)菜单使用浏览器的默认上下文菜单

要用浏览器的默认上下文菜单替换编辑器控件的上下文菜单,删除 ContextMenu 插件。

配置文件中设置此 defaultSupportedProps 属性。 在此值后面加一个逗号 (,)(除非它是文件中的最后一个属性)。

"removePlugins": "contextmenu,liststyle,openlink,tableresize,tableselection,tabletools",

查找富文本编辑器控件的配置

如果您不确定富文本编辑器实例的配置来自哪里,可以使用浏览器的开发人员工具来查找。

  1. 在 Microsoft Edge 或 Google Chrome 中,运行模型驱动应用,并打开具有富文本编辑器控件的窗体。
  2. 右键单击富文本编辑器内容区域,选择检查
  3. 在检查窗格中,选择控制台选项卡。
  4. 在命令栏的列表框中选择父级 Main.aspx 页面。

浏览器开发人员工具的屏幕截图,突出显示“控制台”选项卡和 main.aspx 页面。

  1. 选择检查窗格命令栏上的清除控制台图标,然后在控制台中输入 CKEDITOR.config.

浏览器开发人员工具的屏幕截图,突出显示“清除控制台”图标。

  1. 在检查窗格控制台中,输入 CKEDITOR.config. 以显示不同配置。

CK 编辑器配置列表。

  1. 选择一个配置(如 autoGrow_minHeight)以显示当前设置。

富文本编辑器工具栏

下表介绍了默认情况下富文本编辑器中可用的格式设置工具。

Icon 姓名 Shortcut key Description
格式刷。 复制格式 Ctrl+Shift+C、Ctrl+Shift+V 将某个部分的外观应用于其他部分。
字体。 字体名称 Ctrl+Shift+F 选择字体。 应用程序将您选择的字体视为默认字体。 如果您未选择,Segoe UI 是默认字体。

当您选择格式化内容时,会显示应用于该内容的字体名称。 如果您选择的内容包含多种字体,将显示应用于所选内容的第一个字体。
字体大小。 字号 Ctrl+Shift+P 更改文本的大小。 应用程序将您选择的字体大小视为默认字体大小。 如果您未选择,12 是默认大小。

当您选择格式化内容时,会显示应用于该内容的字体大小。 如果您选择的内容包含多个大小,将显示应用于所选内容的第一个大小。
粗体。 粗体 Ctrl+B 将文本设置为粗体。
斜体。 Italic Ctrl+I 将文本倾斜。
下划线。 下划线 Ctrl+U 为文本添加下划线。
文本突出显示颜色。 背景颜色 通过以明亮的颜色突出显示文本来突出文本。
字体颜色。 文本颜色 更改文本的颜色。
项目符号。 插入/移除项目符号列表 创建项目符号列表。
编号。 插入/移除编号列表 创建编号列表。
减小缩进。 减少缩进量 将段落移到更靠近边缘的位置。
增大缩进。 增加缩进量 将段落移到远离边缘的位置。
块引用。 块引用 在内容中应用块级别引用格式。
左对齐。 左对齐 Ctrl+L 将您的内容与左边距对齐。
居中对齐。 居中对齐 Ctrl+E 将内容放在页面的中间。
右对齐。 右对齐 Ctrl+R 将内容与右边缘对齐。
链接。 链接 在文档中创建用于快速访问网页和其他云资源的链接。 在显示文本框中输入或粘贴定位点文本,然后在 URL 框中键入或粘贴 URL。

如果链接指向的不是网页,可以选择链接类型和协议。 要指定 URL 类型链接应打开的位置,选择目标选项卡,然后选择目标

粘贴或键入的 URL 会自动转换为链接。 例如,http://myexample.com 将变为 <a href="http://myexample.com">http://myexample.com</a>
移除链接。 取消链接 从定位点删除链接,并将其转为纯文本。
上标。 上标 紧邻文本行上方键入小写字母。
下标。 下标 紧邻文本行下方键入小写字母。
删除线。 删除线 横穿文本绘制一条线来删掉文本。
插入图像。 图像 要插入图像,将其从剪贴板粘贴到内容区域,或将图像文件从文件夹拖到内容区域。 拖动图像任何一角调整其大小。 控件支持 .png、.jpg 和 .gif 图像。

要对图像的来源、外观和行为进行更多控制,选择图像按钮。 浏览到本地文件夹中的图像文件或输入其 URL。 如果图像存储在外部服务器上,输入绝对路径。 如果位于本地服务器上,可以输入相对路径。 (可选)输入特定高度和宽度来调整图像大小,然后选择对齐方式。 您还应该输入替换文本来描述使用屏幕阅读器的用户的图像。

如果图像同时还是指向网页或其他云资源的链接,在目标 URL 框中输入资源的 URL,如果需要,选择链接应打开的目标
从左到右。 文本方向从左到右 将文本更改为从左到右。 这是默认设置。
从右到左。 文本方向从右到左 将文本更改为从右到左,以显示双向语言内容。
撤消。 撤销 反转您上次对内容所做的更改。
重做。 重做 撤消上次的重做,或重新应用上次对内容所做的更改。
清除所有格式设置。 清除格式 从选择文本中删除所有格式。
表。 插入具有所选行数和列数的表。 要更好地控制表的大小和外观,选择按钮 > 更多,更改其属性。 您还可以右键单击表来查看和更改表的属性。

要更改列宽,拖动它的边框。 您可以选择一个或多个单元格、行或列,应用特定格式,向选定文本添加链接,以及剪切、复制和粘贴整行或整列。
个性化设置 设置默认字体和字体大小。
辅助功能帮助 Alt + 0 打开可以在富格文本编辑器中使用的键盘快捷方式列表。
展开工具栏。 展开工具栏 如果窗口太窄,无法显示整个工具栏,选择将工具栏展开到第二行。

提示

要使用浏览器的内置拼写检查器,在右键单击要检查的文本时按 Ctrl 键。 否则,右键单击(上下文)菜单将为所选择的元素提供上下文格式。
浏览器内置拼写检查器的替代工具是 Microsoft 编辑器浏览器扩展。 Microsoft 编辑器与富文本编辑器控件无缝协作,启用后可提供快速简便的内联语法和拼写检查功能。

离线使用富文本编辑器

富文本编辑器控件在您离线工作时可用,但有一些您习惯使用的特性和功能不能提供。 您使用编辑器默认配置上载的图像在离线工作时不可用。

以下插件在离线时对富文本编辑器可用:

  • ajax、autogrow、basicstyles、bidi、blockquote、button、confighelper、contextmenu、dialog、dialogui、editorplaceholder、enterkey、entities、fakeobjects、floatingspace、floatpanel、format、horizontalrule、htmlwriter、indent、indentblock、indentlist、justify、lineutils、list、listblock、maximize、menu、menubutton、notification、notificationaggregator、panel、panelbutton、popup、preview、removeformat、resize、richcombo、selectall、showborders、sourcearea、specialchar、stylescombo、tab、textmatch、textwatcher、toolbar、undo、widgetselection、wysiwygarea、xml

以下格式设置工具在离线时在富文本编辑器中可用:

  • 粗体、斜体、下划线、项目符号和编号列表、减少和增加缩进、块引用、左对齐、居中对齐、右对齐、删除线、双向文本、撤消和重做、删除格式

使用富文本编辑器的最佳实践

  • 富文本字段将存储用于设置格式的 HTML 标记以及用户输入的数据。 设置富文本字段的最大大小时,请确保同时允许 HTML 标记和用户数据。

  • 为了获得最佳效果,将 HTML 内容保持在 1 MB 或以下。 如果大小更大,您可能会注意到加载和编辑的响应时间变慢。

  • 在默认配置中,图像不会对效果产生负面影响,因为它们与 HTML 内容分开存储。 但是,当上载图像的用户没有 msdyn_richtextfiles 表的权限时,图像会作为 base64 内容存储在文本列中。 Base64 内容很大,因此,您通常不会希望将图像存储为列内容的一部分。

  • 如果您有系统管理员或基本用户安全角色,则用户个性化功能默认有效。 如果您没有这些角色,您必须拥有创建、读取和写入 msdyn_customcontrolextendedsettings 表的权限,用户个性化插件才能工作。

常见问题解答

为什么键入的字符显示很慢?

如果编辑器中有大量内容,响应时间可能会增加。 将内容保持在 1 MB 或以下以获得最佳效果。 拼写检查或语法检查也可能会降低键入性能。

为什么我无法上载图像? 为什么图像预览无法加载?

如果图像文件名(包括路径)较长,文件可能无法上载或者预览可能无法显示。 请尝试缩短文件名或将其移到路径较短的位置,然后再次上载。

为什么我在文本中看到 HTML?

如果在未设置富文本格式的列中使用富文本编辑器控件,内容将以基础 HTML 显示,而不是带格式的文本。

显示在编辑器内容区域的 HTML 的屏幕截图。

要解决此问题,请确保列的格式设置为富文本

另请参阅

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。