配置富文本编辑器

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

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

配置富文本编辑器的典型工作流程

图:配置富文本编辑器的典型工作流程

了解触屏优化UI和经典UI

触屏优化UI是AEM的标准UI。 Adobe在版本5.6中引入了触屏UI,其中响应式设计用于创作环境。触屏UI专为触控和桌面设备设计。 UI与原始经典UI差别很大。

触屏优化UI中的富文本编辑器工具栏

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

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

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

各种编辑模式

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

编辑模式 编辑区域 建议启用的功能 触屏 UI 经典 UI
内嵌 就地编辑,实现快速、细微的编辑;不打开对话框即可设置格式 最低RTE功能 Y Y
RTE全屏 覆盖整个页面 所有必需的RTE功能 Y N
对话框 对话框,但不涵盖整个页面 经典UI中所有必需的RTE功能;审慎地启用触控UI中的功能 Y Y
全屏对话框 与全屏模式相同;包含RTE旁边对话框的字段 所有必需的RTE功能 Y N
注意

在触屏优化UI的内联编辑模式下,源编辑功能不可用。 无法在全屏模式下拖动图像。 所有其他功能在所有模式下都有效。

内联编辑

打开(慢速多次点按/单击)后,可在页面中编辑内容。 会显示一个包含基本选项的紧凑工具栏。

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

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

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

全屏编辑

AEM组件可以以全屏视图打开,从而隐藏页面内容并占据可用屏幕。 考虑对内联编辑的详细版本进行全屏编辑,因为它优惠的编辑选项最多。 在使用内联编辑模式时,可以通过从压缩工具栏单击rte_fullscreen打开它。

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

在触屏优化UI中以全屏模式进行编辑时的详细RTE工具栏

图:在触屏优化UI中以全屏模式进行编辑时的详细RTE工具栏

对话框编辑

在经典UI中多次单击组件时,将打开一个对话框,用于编辑内容。 现有页面顶部将打开对话框。 在某些特定情况下,对话框以弹出窗口的形式打开。 例如,当文本组件是多列页面布局中某列的一部分,且该对话框的可用区域较少时。

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

图:触屏优化UI中的对话框编辑模式

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

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

关于RTE插件和相关功能

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

  • features属性:

    • 用于激活或取消激活该插件的基本功能。
    • 可以使用标准化过程进行配置。
  • 在适当时,需要进行专门配置的更多属性和选项。

RTE的基本功能由特定于相应插件的节点上的features属性值激活或取消激活。

下表列表了当前插件,如下所示:

  • 带有指向API文档的链接的插件ID。 当激活插件时,ID用作节点名称。
  • 允许的features属性值。
  • 插件提供的功能描述。
插件ID 特征 描述
编辑 剪切复制粘贴——默认粘贴——纯文本粘贴-wordhtml 剪切、复制和,三种粘贴模式
findreplace 查找替换 查找和替换。
format 粗体下划线 基本文本格式
图像 图像 基本图像支持(从内容或内容查找器中拖动)。 根据浏览器的不同,支持对作者具有不同的行为
按键 要定义此值,请参阅选项卡大小
证明 justifleft justifycenter justifyright 段落对齐。
链接 modifylink取消链接锚点 超链接和锚点
列表 有序无序缩进 此插件同时控制缩进和列表;包括嵌套列表。
错误工具 specifars sourceedit 其他工具允许作者输入特殊字符或编辑HTML源。 此外,如果要定义自己的列表,还可以添加整个范围的特殊字符
参数格式 参数格式 默认段落格式为段落、标题1、标题2和标题3(<p><h1><h2><h3>)。 您可以添加更多段落格式或扩展列表。
拼写检查 检查文本 语言识别拼写检查器
样式 样式 支持使用CSS类设置样式。 如果要添加( 或扩展)您自己的样式范围以用于文本,请添加新的文本样式。
上标 下标上标 基本格式的扩展,添加子和超级脚本。
表可删除的插入程序removerow插入列remove列cellprops mergecellsselectrow选择列 如果要为整个表或单个单元格添加您自己的样式,请参阅配置表样式
撤消 撤消重做 撤消和重做操作的历史记录大小。
注意

对话框模式不支持全屏插件。 使用dialogFullScreen设置将工具栏配置为全屏模式。

了解配置路径和位置

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

编辑模式 触屏UI的位置 经典UI的位置
内嵌 cq:editConfig/cq:inplaceEditing cq:editConfig/cq:inplaceEditing
全屏 cq:editConfig/cq:inplaceEditing 不适用
对话框 cq:dialog dialog
全屏对话框 cq:dialog 不适用
注意

请勿将cq:inplaceEditing下的节点命名为config。 在cq:inplaceEditing节点上,定义以下属性:

  • 名称: configPath
  • 类型: String
  • :包含实际配置的节点的路径

请勿将RTE配置节点命名为config。 否则,RTE配置只对管理员有效,对组content-author中的用户无效。

仅在触屏UI中配置在对话框编辑模式下应用的以下属性:

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

    如果此属性为true,则默认情况下,Richtext编辑从“foundation-contentloaded”事件开始。

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

  • customStart:将在RTE节点上定义的此布尔属 True性设置为,通过触发开始控制何时事件RTE rte-start

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

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

自定义就地编辑

您可以通过配置以下属性来定义文本编辑器开始的HTML选择器:

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

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

通过激活插件启用RTE功能

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

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

下载此示例配置以了解如何配置RTE。 在此包中,所有功能均已启用。

获取文件

注意

核心组件文本组件允许模板编辑器将用户界面中的许多RTE插件配置为内容策略,从而无需进行技术配置。 内容策略可以如所述使用RTE用户界面配置。 有关详细信息,请参阅RTE用户界面设置和内容策略创建页面模板核心组件开发人员文档

注意

为便于参考,默认文本组件(作为标准安装的一部分提供)可在以下位置找到:

  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text

要创建您自己的文本组件,请复制上述组件,而不是编辑这些组件。

配置RTE工具栏

AEM允许您针对不同的编辑模式以不同方式配置富文本编辑器的UI。 默认设置如下所示。 您可以根据要求覆盖这些默认值。

为获得最佳创作体验:

  • 在浮动对话框中,只启用那些没有弹出窗口的插件,因为浮动对话框的大小较小。
  • 在全屏对话框中,启用所有必需的插件,甚至弹出窗口更大的插件,如Paste插件。 使用下面描述的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]"
          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,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)。 分隔符( |)可以使用“-”指定一组按钮之间的值。

内嵌模式或全屏模式下的弹出节点包含正在使用的浏览器的列表。 popovers节点下的每个子节点都以插件命名(例如format)。 它有一个属性items,其中包含插件功能列表(例如format#bold)。

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

管理员可以使用内容策略控制RTE选项,例如,不要按照上述说明进行配置。 当内容策略用作可编辑模板的一部分时,内容策略定义组件的设计属性。 例如,如果将使用RTE的文本组件与可编辑的模板一起使用,内容策略可以定义粗体选项可用,并提供一些段落格式选项。 内容策略可重复使用,并可以跨多个模板应用。

从AEM 6.4 Service Pack 3开始,RTE流中从用户界面配置到内容策略的可用选项。

  • 用户界面配置设置定义了内容策略可用的选项。
  • 如果删除或未启用RTE的用户界面配置,则内容策略无法配置它。
  • 作者只能访问用户界面配置和内容策略提供的功能。

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

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

可以自定义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富文本编辑器

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

注意

Adobe不建议将切换作为最佳实践。 切换到CoralUI 2 RTE作为最后手段。 如果插件不依赖RTE内部(如类),则CoralUI 2 RTE的自定义插件可与CoralUI 3 RTE一起使用。 如果您正在为CoralUI 3 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。 例如,在将节点/libs/mcm/campaign/components/touch-ui/clientlibs/rte覆盖到/apps下后,将对它的任何依赖关系从rte.coralui3更改为rte.coralui2

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

注意

CoralUI 2 RTE使用handlebars模板进行插件对话框。 因此,CoralUI 2 RTE clientlib对handlebars clientlib有依赖关系。 CoralUI 3 RTE不使用handlebars模板,并且没有任何关联的依赖关系。 如果您的自定义插件使用handlebars模板,请在网页中包含handlebars clientlib。

更多信息

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

尤其要查看可用的插件和相关选项:

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

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

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

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

已知限制

AEM RTE功能有以下限制:

  • RTE功能仅在AEM组件对话框中受支持。 在触屏优化UI上,向导或基础表单(如页面属性Scaffolding)不支持RTE。

  • AEM在混合设备上不工作。

  • 请勿命名RTE配置节点config。 否则,RTE配置仅对管理员有效,对组content-author中的用户无效。

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

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now