配置富文本编辑器 configure-the-rich-text-editor

富文本编辑器(RTE)为作者提供了一系列广泛的功能来编辑其文本内容。 为所见即所得文本编辑体验提供了图标、选择框、工具栏和菜单。

要了解如何使用RTE功能进行创作,请参阅使用富文本编辑器进行创作。 可以将RTE配置为启用、禁用和扩展创作组件中可用的功能。 以下工作流说明了在Experience Manager中完成RTE配置任务的建议顺序。

有关如何配置RTE的一系列步骤

图:了解如何配置RTE的一系列步骤

了解触屏优化UI和经典UI understand-touch-enabled-ui-and-classic-ui

触屏优化UI是用于Experience Manager的标准用户界面。 Adobe为创作环境引入了触屏优化UI,其中具有响应式设计。 触屏优化UI专为触控和桌面设备而设计。 该界面与原始经典UI有很大不同。

已启用触控的用户界面中的 富文本编辑器工具栏

图:触屏UI中的富文本编辑器工具栏

经典UI中的 富文本编辑器工具栏

图:经典UI中的富文本编辑器工具栏

各种编辑模式 editingmodes

作者可以使用各种组件模式在Experience Manager中创建和编辑文本内容。 在不同编辑模式下,用于创作内容和设置内容格式的工具栏选项以及启用RTE的组件的用户体验因RTE配置而异。

编辑模式
编辑区域
建议启用的功能
触屏 UI
经典 UI
内嵌
就地编辑以进行快速、次要的编辑;格式化而不打开对话框
最小的RTE功能
Y
Y
RTE全屏
覆盖整个页面
所有必需的RTE功能
Y
N
对话框
对话框位于页面内容顶部,但不覆盖整个页面
经典UI中所有必需的RTE功能;在触屏UI中审慎启用功能
Y
Y
全屏对话框
与全屏模式相同;包含对话框的字段以及RTE
所有必需的RTE功能
Y
N
NOTE
在启用了触屏的UI中,源编辑功能在内联编辑模式下不可用。 不能以全屏模式拖动图像。 所有其他功能在所有模式中都可用。

内联编辑 inline-editing

打开时(缓慢双击),可以在页面中编辑内容。 此时会显示一个包含非常基本选项的紧凑工具栏。

在触屏UI中使用基本工具栏进行内联编辑

图:在触屏UI中使用基本工具栏进行内联编辑

在经典UI中,双击组件缓慢即可进行内联编辑,并且橙色轮廓会突出显示内容。 如果“内容查找器”处于打开状态,则窗口顶部会显示一个包含可用RTE格式选项的工具栏。 如果“内容查找器”未打开,则不会显示格式选项,并且您只能进行基本的文本编辑。

全屏编辑 full-screen-editing

Experience Manager组件可以在全屏视图中打开,该视图会隐藏页面内容并占据可用屏幕。 请考虑全屏编辑内联编辑的详细版本,因为它提供了最多的编辑选项。 使用内联编辑模式时,可通过单击紧凑工具栏中的 rte_fullscreen 来打开该页面。

在对话框的全屏模式以及详细的RTE工具栏中,对话框中可用的选项和组件也可用。 它仅适用于包含RTE以及其他组件的对话框。

在触屏UI中以全屏模式编辑时显示详细的RTE工具栏

图:在触屏UI中以全屏模式编辑时,显示详细的RTE工具栏

对话框编辑 dialog-editing

双击组件时,将打开一个对话框用于编辑内容。 对话框将在现有页面的顶部打开。 在某些特定情况下,对话框会作为弹出窗口打开。 例如,当文本组件属于多列页面布局中的列且可用于对话框的区域较少时。

触屏UI中的对话框编辑模式

图:触控式UI中的对话框编辑模式

经典UI中包含用于编辑的详细工具栏的对话框

图:经典UI中包含用于编辑的详细工具栏的对话框

关于RTE插件和相关功能 aboutplugins

该功能通过一系列插件提供,每个插件均具有:

  • features属性:

    • 用于激活或停用该插件的基本功能
    • 可使用标准化的程序进行配置
  • 在适当时,需要专门配置的其他属性和选项。

RTE的基本功能由相应插件专属的节点上的features属性值激活或停用。

下表列出了当前的插件,其中显示:

  • 插件ID,以及API文档链接。 激活插件时,将ID用作节点名称。
  • features属性的允许值。
  • 插件所提供的功能描述。
插件Id
功能
描述
编辑
剪切copy paste-default paste-plaintext paste-wordhtml
剪切、复制和三种粘贴模式
findreplace
查找替换
查找并替换。
格式
加粗斜体下划线
基本文本格式
图像
图像
基本图像支持(从内容或内容查找器拖动)。 根据浏览器的不同,支持的作者行为也有所不同
若要定义此值,请参阅选项卡大小
两端对齐
justifyleft justifycenter justifyright
段落对齐方式。
链接
modifylink取消链接锚点
超链接和锚点
列表
有序无序缩进缩进
此插件同时控制缩进和列表;包括嵌套列表。
misctools
specialchars sourceedit
其他工具允许作者输入特殊字符或编辑HTML源。 此外,如果要定义自己的列表,可以添加整个范围的特殊字符
参数格式
paraformat
默认段落格式为段落、标题1、标题2和标题3 (<p><h1><h2><h3>)。 您可以添加更多段落格式或扩展列表。
拼写检查
复选文本
语言感知拼写检查器
样式
样式
支持使用CSS类进行样式设置。 如果要添加(或扩展)自己的样式范围以用于文本,请添加新文本样式
下标
下标上标
基本格式的扩展,可添加子脚本和超级脚本。
表删除表插入行删除插入列删除列cellprops mergecells拆分单元选择列选择列
如果要为整个表或单个单元格添加自己的样式,请参阅配置表样式
撤消
撤消重做
撤消和重做操作的历史记录大小。
NOTE
对话框模式不支持全屏插件。 使用dialogFullScreen设置将工具栏配置为全屏模式。

了解配置路径和位置 understand-the-configuration-paths-and-locations

当您激活RTE插件时,您为作者提供的RTE编辑模式(和UI)将决定配置详细信息的位置:

编辑模式
触屏UI的位置
经典UI的位置
内嵌
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
全屏
cq:editConfig/cq:inplaceEditing
不适用
对话框
cq:dialog
dialog
全屏对话框
cq:dialog
不适用
NOTE
不要将cq:inplaceEditing下的节点命名为config。 在cq:inplaceEditing节点上,定义以下属性:
  • 名称configPath
  • 类型String
  • :包含实际配置的节点的路径
不要将RTE配置节点命名为config。 否则,RTE配置将仅对管理员生效,而不对组content-author中的用户生效。

配置以下仅适用于Touch UI中的对话框编辑模式的属性:

  • useFixedInlineToolbar:将在RTE节点(sling:resourceType= cq/gui/components/authoring/dialog/richtext的节点)上定义的此Boolean属性设置为True,以使RTE工具栏固定而不是浮动。

    当此属性为true时,默认情况下,富文本编辑会在“foundation-contentloaded”事件中启动。

    要防止出现这种情况,请将属性customStart设置为True并触发“rte-start”事件以开始RTE编辑。 当此属性为“true”时,默认行为(单击时开始rte)不起作用。

  • customStart:将RTE节点上定义的此Boolean属性设置为True,以通过触发事件rte-start来控制何时启动RTE。

  • rte-start:在开始编辑RTE时,在RTE的contenteditable-div上触发此事件。 仅当customStart设置为true时才有效。

在启用触屏的对话框中使用RTE时,必须将属性useFixedInlineToolbar设置为true以避免出现问题。

自定义就地编辑 customizing-in-place-editing

通过配置以下HTML,您可以定义文本编辑器从哪个属性选择器开始:

  • editElementQuery — 在cq:InplaceEditingConfig上定义,此属性用于指定将在其上开始文本组件的内联编辑的HTML元素的选择器。 如果未指定,则会在文本组件HTML上直接开始内联编辑。
  • textPropertyName — 在cq:InplaceEditingConfig上定义,此属性用于指定将保存在HTML节点上的属性的名称,其中文本组件的内容值将在内联编辑后保留。

对话框模式的相应属性为name

通过激活插件启用RTE功能 enable-rte-functionalities-by-activating-plug-ins

RTE功能通过一系列插件提供,每个插件都具有功能属性。 您可以配置features属性以启用或禁用每个插件的各种功能。

有关RTE插件的详细配置,请参阅如何激活和配置RTE插件

示例:下载此示例配置,该示例配置说明了如何配置RTE。 在此程序包中,将启用所有功能。

NOTE
核心组件文本组件允许模板编辑器在GUI中将多个RTE插件配置为内容策略,从而无需技术配置。 内容策略可以与RTE UI配置配合使用,如本文档所述。
有关详细信息,请参阅本文档的RTE UI设置和内容策略部分,以及创建页面模板核心组件开发人员文档
NOTE
出于参考目的,默认文本组件(作为标准安装的一部分提供)可以在以下位置找到:
  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text
要创建您自己的文本组件,请复制上述组件而不是编辑这些组件。

配置RTE工具栏 dialogfullscreen

AEM允许您为不同的编辑模式以不同的方式配置富文本编辑器的界面。 默认设置如下所示。 您可以根据自己的要求覆盖这些默认值。 您只需自定义要提供给作者的工具栏功能。 您无需指定所有工具栏配置。

要为dialogFullScreen配置工具栏,请使用以下示例配置。

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

内联模式和全屏模式使用不同的UI设置。 工具栏属性用于指定工具栏的按钮。

例如,如果按钮本身是功能(例如,Bold),则将其指定为PluginName#FeatureName(例如,links#modifylink)。

如果按钮是弹出框(包含插件的某些功能),则将其指定为#PluginName(例如,#format)。

可以使用-在按钮组之间指定分隔符(|)。

内联或全屏模式下的弹出节点包含正在使用的弹出框列表。 “弹出项”节点下的每个子节点均以插件的名称(例如,格式)命名。 它具有包含插件功能列表(例如,format#bold)的“items”属性。

RTE用户界面设置和内容策略 rtecontentpolicies

管理员可以使用内容策略来控制RTE选项,而不是执行如上所述的配置。 当内容策略用作可编辑模板的一部分时,它定义组件的设计属性。 例如,如果将使用RTE的文本组件与可编辑模板一起使用,则内容策略可以定义粗体选项是否可用,以及几个段落格式选项是否可用。 内容策略可重复使用,并且可以跨多个模板应用。

RTE中的可用选项会从用户界面配置下游流向内容策略。

  • 用户界面配置设置定义哪些选项可用于内容策略。
  • 如果RTE的用户界面配置已移除或未启用某个项目,则内容策略无法对其进行配置。
  • 作者只能访问由用户界面配置和内容策略提供的功能。

例如,您可以看到文本核心组件文档

自定义工具栏图标和命令之间的映射 iconstoolbar

您可以自定义RTE工具栏上显示的Coral图标与可用命令之间的映射。 除了Coral图标之外,您无法使用任何其他图标。

  1. uiSettings/cui下创建名为icons的节点。

  2. 为下面的单个图标创建节点。

  3. 在每个图标节点上,指定一个Coral图标和一个用于映射到该图标的命令。

下面是将命令Bold映射到名为textItalic的Coral图标的示例片段。

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format#bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

切换到CoralUI 2富文本编辑器 switch-to-coralui-rich-text-editor

在页面上,您可以包含CoralUI 2 RTE clientlib或CoralUI 3 RTE clientlib。 默认情况下,富文本编辑器包括CoralUI 3 RTE clientlib。 要切换到CoralUI 2 RTE,请执行以下步骤。

NOTE
Adobe不建议将其作为最佳实践。 最后才考虑使用CoralUI 2 RTE。 CoralUI 2 RTE的自定义插件适用于CoralUI 3 RTE(如果插件不依赖于RTE内部程序,例如类)。
如果要使用CoralUI3 RTE的自定义插件,请使用rte.coralui3库。
  1. /apps下覆盖节点/libs/cq/gui/components/authoring/editors/clientlibs/core,并执行以下操作:

    • 将依赖项属性的rte.coralui3替换为rte.coralui2
    • 将嵌入属性的cq.authoring.editor.core.inlineediting.rte.coralui3替换为cq.authoring.editor.core.inlineediting.rte.coralui2
    • 将嵌入属性的cq.authoring.rte.coralui3替换为cq.authoring.rte.coralui2
  2. /apps下覆盖节点/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2

    /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3中删除类别cq.authoring.dialog并将其添加到/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2

  3. 将页面上包含的任何其他依赖项从rte.coralui3更改为rte.coralui2。 例如,在/apps下叠加节点/libs/mcm/campaign/components/touch-ui/clientlibs/rte后,将其上的任何依赖关系从rte.coralui3更改为rte.coralui2

  4. /apps下覆盖节点cq/ui/widgets。 将节点/apps/cq/ui/widgets处的依赖项cq.rte替换为cq.coralui2.rte

NOTE
CoralUI 2 RTE使用Handlebars模板作为插件对话框。 因此,CoralUI 2 RTE clientlib依赖于handlebars clientlib。 CoralUI 3 RTE不使用Handlebars模板,因此没有任何关联的依赖项。 如果您的自定义插件使用handlebars模板,请在网页中包含handlebars clientlib。

更多信息 further-information

有关配置RTE的更多信息,请参阅AEM Widget API参考。

具体来说,要查看插件及相关可用选项,请执行以下操作:

  • CQ.form.RichText组件提供了一个表单字段,用于编辑样式化文本信息(RTF)。 要了解富文本表单的所有可用参数,请参阅配置选项。

  • 富文本组件使用CQ.form.rte.plugins.Plugin下列出的插件提供多种功能。 对于每个插件:

    • 有关可以启用(或禁用)的功能的详细信息,请参阅功能
    • 有关相应插件的详细配置,请参阅所有可用参数的配置选项
  • 此外,还提供了有关链接的HTML规则的更多信息。

这些资源可用于扩展和自定义您自己的RTE。 例如,要在创建链接时列出页面中可用的锚点,您可以提供自己的LinkPlugin实现。

已知限制 known-limitations

AEM RTE功能具有以下限制:

  • 仅在AEM组件对话框中支持RTE功能。 在启用触屏UI上的向导或基础表单(如页面属性基架)上不支持RTE。

  • AEM在混合设备上不起作用。

  • 不要命名RTE配置节点config。 否则,RTE配置仅对管理员生效,而不对组content-author中的用户生效。

  • RTE不支持使用内联框架或iframe嵌入内容。

最佳实践和提示 best-practices-and-tips

  • 对于浮动对话框,请仅启用插件而不使用弹出窗口。 没有弹出窗口的插件尺寸较小,最适合用于浮动对话框。
  • 仅在全屏对话框模式或全屏模式下通过较大的弹出窗口启用插件,如Paste插件。 具有大型弹出窗口的插件需要更多的屏幕空间才能提供良好的创作体验。
  • 如果要使用CoralUI3 RTE的自定义插件,请使用rte.coralui3库。

解决RTE的常见问题 troubleshoot-issues-with-aem-rich-text-editor

如何选择多个表单元格?

要选择表中的多个单元格,请按CtrlCmd键,然后逐一单击表单元格。

现在,对所选内容执行操作,例如设置所选单元格的属性。

使用“配置”按钮编辑组件时,超链接丢失

通过使用“配置”按钮编辑文本组件,在文本组件中添加超链接。 再次编辑超链接并再次验证超链接时,可能会丢失该超链接。

解决方法是,在第二次显示“编辑”对话框时单击文本组件,然后运行链接验证。

此问题可在AEM 6.3及更高版本中解决。

在源编辑模式下添加的​ HTML内容丢失

请勿添加易受XSS影响的HTML。 AEM而非RTE,可能会删除一些HTML内容以遵守XSS反精神病规则。

要验证粘贴的HTML是否已保存,请在CRXDE(在content节点中)中检查保存的内容。

如果未保存,则HTML必须已被RTE删除,因为它不符合RTE规则。

如果保存在CRXDE中但未在页面上渲染(要检查渲染,请参阅页面的预览,它被AEM XSS规则删除。

多字段组件未按预期工作

要创建多字段组件,请专门使用CoralUI 3 。 请勿使用CoralUI 2组件对话框。

此外,请验证多字段实施代码和节点结构是否正确。

可供管理员使用的配置不可供作者使用

如果反映的是管理员的接口配置更新,而不是作者帐户的接口配置更新,请确保配置节点未命名为config。 使用configPath属性

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2