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

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
管理

创建对象：

管理员

CAUTION

AEM 6.4已结束扩展支持，本文档将不再更新。有关更多详细信息，请参阅技术支助期. 查找支持的版本此处.

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

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

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

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

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

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

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

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

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

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

各种编辑模式 editingmodes

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

编辑模式

编辑区域

建议启用的功能

触屏 UI

经典 UI

内嵌

就地编辑，以便进行快速、细微的编辑；不打开对话框即可设置格式

最小RTE功能

RTE全屏

涵盖整个页面

所有必需的RTE功能

对话框

对话框，但不涵盖整个页面

经典UI中所有必需的RTE功能；谨慎地启用触屏UI中的功能

全屏对话框

与全屏模式相同；包含对话框的字段以及RTE

所有必需的RTE功能

NOTE

在触屏UI的内联编辑模式下，源编辑功能不可用。不能以全屏模式拖动图像。所有其他功能在所有模式下均可工作。

内联编辑 inline-editing

打开（慢速双击/单击）后，可以在页面内编辑内容。此时会显示一个包含基本选项的紧凑工具栏。

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

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

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

全屏编辑 full-screen-editing

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

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

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

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

对话框编辑 dialog-editing

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

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

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

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

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

关于RTE插件和关联的功能 aboutplugins

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

A features 属性：
- 用于激活或停用该插件的基本功能。
- 可以使用标准化过程进行配置。
在适当情况下，需要进行专门配置的更多属性和选项。

RTE的基本功能由的值激活或停用 features 属性。

下表列出了当前的插件，其中显示：

包含API文档链接的插件ID。 ID用作激活插件.
的允许值 features 属性。
插件提供的功能描述。

插件ID

功能

描述

编辑

剪切复制paste-default paste-plaintext paste-wordhtml

剪切、复制和粘贴三种模式.

findreplace

查找替换

查找并替换.

格式

粗斜体下划线

基本文本格式.

图像

基本图像支持（从内容或内容查找器中拖动）。根据浏览器的不同，作者支持的行为各不相同

键

要定义此值，请参阅选项卡大小.

证明

justifleft justifcenter justifright

段落对齐。

链接

modifylink取消链接锚点

超链接和锚点.

列表

已排序的未排序缩进输出

此插件可同时控制缩进和列表;包括嵌套列表。

misctools

specialchars sourceedit

其他工具允许作者输入特殊字符或编辑HTML源。此外，您还可以添加整体特殊字符范围要定义自己的列表。

参数格式

paraformat

默认段落格式为“段落”、“标题1”、“标题2”和“标题3”(<p>, <h1>, <h2>和 <h3>)。您可以添加更多段落格式或扩展列表。

拼写检查

checktext

语言感知拼写检查程序.

样式

支持使用CSS类的样式。添加新的文本样式如果您要添加（或扩展）自己的样式范围以与文本一起使用。

子上标

下标上标

基本格式的扩展，添加子和超脚本。

表

表removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns

请参阅配置表样式，但需为整个表或单个单元格添加自己的样式。

撤消

撤消重做

历史记录大小撤消和重做操作。

NOTE

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

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

的 RTE编辑模式（和UI）您为作者提供的配置详细信息在您激活RTE插件:

编辑模式

触屏UI的位置

经典UI的位置

内嵌

cq:editConfig/cq:inplaceEditing

全屏

cq:editConfig/cq:inplaceEditing

不适用

对话框

cq:dialog

dialog

全屏对话框

cq:dialog

不适用

NOTE

请勿在下命名节点 cq:inplaceEditing as config. 开 cq:inplaceEditing 节点，定义以下属性：

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

请勿将RTE配置节点命名为 config. 否则，RTE配置将仅对管理员生效，而对组中的用户不生效 content-author.

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

useFixedInlineToolbar:在RTE节点（一个具有sling:resourceType=的节点）上定义的此布尔属性 cq/gui/components/authoring/dialog/richtext) True，以修复RTE工具栏而不是浮动工具栏。

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

要阻止出现这种情况，请设置属性 customStart to True和会触发“rte-start”事件以开始RTE编辑。当此属性为“true”时，默认行为（单击时启动rte）不起作用。
customStart:将RTE节点上定义的此布尔属性设置为 True，通过触发事件来控制何时启动RTE rte-start.
rte-start:在 contenteditable-div ，用于开始编辑RTE。仅当 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属性。您可以配置features属性以启用或禁用每个插件的各种功能。

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

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

获取文件

NOTE

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

NOTE

出于参考目的，默认的文本组件（作为标准安装的一部分提供）可在以下位置找到：

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

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

配置RTE工具栏 dialogfullscreen

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用户界面设置和内容策略 rtecontentpolicies

管理员可以使用内容策略（例如，不执行上述配置）来控制RTE选项。内容策略用于定义组件在可编辑模板. 例如，如果将使用RTE的文本组件与可编辑的模板一起使用，则内容策略可以定义提供粗体选项和一些段落格式选项。内容策略可重复使用，并可跨多个模板应用。

AEM 6.4 Service Pack 3之后，RTE流程中从用户界面配置到内容策略的下游可用选项。

用户界面配置设置定义可用于内容策略的选项。
如果RTE的用户界面配置已删除或未启用项目，则内容策略无法对其进行配置。
作者只能访问用户界面配置和内容策略提供的此类功能。

例如，您可以在文本核心组件文档.

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

您可以自定义RTE工具栏中显示的Coral图标与可用命令之间的映射。除Coral图标外，您不能使用任何其他图标。

创建名为的节点 icons 在 uiSettings/cui.
为下方的各个图标创建节点。
在每个图标节点上，指定一个Coral图标和一个映射到该图标的命令。

下面是一个示例代码片段，用于将命令“粗体”映射到名为的Coral图标 textItalic.

<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的自定义插件不依赖RTE内部版本（如类），则此插件可与CoralUI 3 RTE配合使用。如果要对CoralUI 3 RTE使用自定义插件，请使用 rte.coralui3 库。

覆盖节点 /libs/cq/gui/components/authoring/editors/clientlibs/core 在 /apps，并执行以下操作：
- 替换 rte.coralui3 with rte.coralui2 （对于依赖关系属性）。
- 替换 cq.authoring.editor.core.inlineediting.rte.coralui3 with cq.authoring.editor.core.inlineediting.rte.coralui2 （对于嵌入属性）。
- 替换 cq.authoring.rte.coralui3 with cq.authoring.rte.coralui2 （对于嵌入属性）。
覆盖节点 /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 和 /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 在 /apps.

删除类别 cq.authoring.dialog 从 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 并将其添加到 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2.
从 rte.coralui3 to rte.coralui2. 例如，在覆盖节点后 /libs/mcm/campaign/components/touch-ui/clientlibs/rte 在 /apps，请从 rte.coralui3 to rte.coralui2.
覆盖节点 cq/ui/widgets 在 /apps. 替换依赖项 cq.rte 节点 /apps/cq/ui/widgets with cq.coralui2.rte.

NOTE

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

已知限制 known-limitations

AEM RTE功能具有以下限制：

仅在AEM组件对话框中支持RTE功能。向导或Foundation表单(如页面属性和基架在触屏UI中。
AEM无法运行混合设备.
请勿命名RTE配置节点 config. 否则，RTE配置将仅对管理员生效，而对组中的用户不生效 content-author.
RTE不支持嵌入内容的内联框架或iFrame。

recommendation-more-help

5ce3024a-cbea-458b-8b2f-f9b8dda516e8

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

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

各种编辑模式 editingmodes

内联编辑 inline-editing

全屏编辑 full-screen-editing

对话框编辑 dialog-editing

关于RTE插件和关联的功能 aboutplugins

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

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

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

配置RTE工具栏 dialogfullscreen

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

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

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

更多信息 further-information

已知限制 known-limitations