配置富文本编辑器

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

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

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

了解触屏优化UI和经典UI

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

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

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

各种编辑模式

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

内联编辑

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

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

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

全屏编辑

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

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

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

对话框编辑

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

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

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

关于RTE插件和关联的功能

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

• A features 属性：

  • 用于激活或停用该插件的基本功能。
  • 可以使用标准化过程进行配置。

• 在适当情况下，需要进行专门配置的更多属性和选项。

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

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

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

了解配置路径和位置

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

配置以下仅在触屏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是必须避免出现问题的。

就地自定义编辑

您可以通过配置以下属性来定义文本编辑器启动的HTML选择器：

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

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

通过激活插件启用RTE功能

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

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

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

获取文件

配置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. 创建名为的节点 icons 在 uiSettings/cui.

2. 为下方的各个图标创建节点。

3. 在每个图标节点上，指定一个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富文本编辑器

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

1. 覆盖节点 /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 （对于嵌入属性）。

2. 覆盖节点 /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.

3. 从 rte.coralui3 to rte.coralui2. 例如，在覆盖节点后 /libs/mcm/campaign/components/touch-ui/clientlibs/rte 在 /apps，请从 rte.coralui3 to rte.coralui2.

4. 覆盖节点 cq/ui/widgets 在 /apps. 替换依赖项 cq.rte 节点 /apps/cq/ui/widgets with cq.coralui2.rte.

更多信息

有关配置RTE的更多信息，请参阅 AEM Widget API 引用。

特别是，要查看可用的插件和相关选项，请执行以下操作：

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

• 富文本组件提供了多种功能，其中使用了 CQ.form.rte.plugins.Plugin. 对于每个插件：

  • 有关可启用（或禁用）的功能的详细信息，请参阅功能。
  • 有关相应插件的详细配置，请参阅配置选项以了解所有可用参数。

• 还提供了有关链接HTML规则的更多信息。

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

已知限制

AEM RTE功能具有以下限制：

• 仅在AEM组件对话框中支持RTE功能。 向导或Foundation表单(如 页面属性 和 基架 在触屏UI中。

• AEM无法运行 混合设备.

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

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

Business.Adobe.com 资源

Targeted Content Embedded Charts Responsive Forms Version History Web Content Management Dynamic Forms