配置富文本编辑器 configure-the-rich-text-editor
富文本编辑器(RTE)为作者提供了一系列广泛的功能来编辑文本内容。 为所见即所得文本编辑体验提供了图标、选择框、工具栏和菜单。 管理员配置RTE以启用、禁用和扩展创作组件中可用的功能。 查看作者如何使用RTE创作 Web内容。
下面列出了配置RTE所需的概念和步骤。
了解可供作者使用的用户界面 understand-rte-ui
RTE界面为创作环境提供了响应式设计。 该界面专为触控和桌面设备而设计。
图：已启用所有可用选项的RTF编辑器工具栏。
工具栏提供了WYSIWYG创作体验的选项。 Experience Manager管理员可以在界面上的工具栏中配置可用选项。 默认情况下，Experience Manager中提供了一组完整的编辑选项。 开发人员可以自定义Experience Manager以添加更多编辑选项。
各种编辑模式 editingmodes
作者可以使用不同的组件模式在Experience Manager中创建和编辑文本内容。 在不同编辑模式下，用于创作内容和设置内容格式的工具栏选项以及启用RTE的组件的用户体验因RTE配置而异。
内联编辑 inline-editing
要编辑页面中的内容，请通过缓慢双击打开内容。 呈现了一个包含基本选项的紧凑工具栏。
图：使用工具栏中的基本选项进行内联编辑。
全屏编辑 full-screen-editing
Experience Manager组件可以在隐藏页面内容并占用可用屏幕的全屏视图中打开。 请考虑全屏编辑内联编辑的详细版本，因为它提供了最多的编辑选项。 使用内联编辑模式时，可通过单击紧凑工具栏中的
在对话框的全屏模式下以及详细的RTE工具栏中，对话框中可用的选项和组件也可用。 它仅适用于包含RTE以及其他组件的对话框。
图：以全屏模式编辑时的详细RTE工具栏。
对话框编辑 dialog-editing
双击组件时，将打开一个对话框用于编辑内容。 对话框将在现有页面的顶部打开。 在某些特定情况下，对话框会作为弹出窗口打开。 例如，当文本组件属于多列页面布局中的列且可用于对话框的区域较少时。
图：对话框编辑模式。
关于RTE插件和相关功能 aboutplugins
该功能通过一系列插件提供，每个插件均具有：
-
一个
features属性，- 用于激活或取消激活该插件的基本功能。
- 使用标准化过程配置。
-
适当时，需要专门配置的更多属性和选项。
RTE的基本功能由相应插件专属的节点上的features属性值激活或停用。
下表列出了当前的插件，其中显示：
- 插件ID，以及API文档链接。 激活插件时，将ID用作节点名称。
features属性的允许值。- 插件所提供的功能描述。
find、replaceimagejustifyleft、justifycenter、justifyrightsubscript、superscripttable，removetable，insertrow，removerow，insertcolumn，removecolumn，cellprops，mergecells，splitcell，selectrow，selectcolumnsdialogFullScreen设置将工具栏配置为全屏模式。了解配置路径和位置 understand-the-configuration-paths-and-locations
当您激活RTE插件时，RTE编辑的模式和您为作者提供的界面将决定配置详细信息的位置。 这些位置包括：
- 内联模式：
cq:editConfig/cq:inplaceEditing。 - 全屏模式：
cq:editConfig/cq:inplaceEditing。 - 对话框模式：
cq:dialog。 - 全屏对话框模式：
cq:dialog。
cq:inplaceEditing下的节点命名为config。 在cq:inplaceEditing节点上，定义以下属性：- 名称：
configPath - 类型：
String - 值：包含实际配置的节点的路径
config。 否则，RTE配置将仅对管理员生效，而不对组content-author中的用户生效。配置以下在对话框编辑模式下应用的属性：
-
useFixedInlineToolbar：您可以将RTE工具栏变为固定工具栏而不是浮动工具栏。 在sling：resourceType=cq/gui/components/authoring/dialog/richtext的RTE节点上将定义的此Boolean属性设置为True。 当此属性设置为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以避免出现问题。
通过激活插件启用RTE功能 enable-rte-functionalities-by-activating-plug-ins
RTE功能通过一系列插件提供，每个插件都具有功能属性。 您可以配置features属性以启用或禁用每个插件的各种功能。
有关RTE插件的详细配置，请参阅如何激活和配置RTE插件。
核心组件文本组件允许模板编辑器使用用户界面作为内容策略配置许多RTE插件，而无需技术配置。 内容策略可以与RTE UI配置配合使用，如本文档所述。 有关详细信息，请参阅创建页面模板和核心组件开发人员文档。
出于参考目的，默认文本组件（作为标准安装的一部分提供）可以在以下位置找到：
/libs/wcm/foundation/components/text/libs/foundation/components/text要创建您自己的文本组件，请复制上述组件而不是编辑这些组件。
配置RTE工具栏 dialogfullscreen
Experience Manager允许您针对不同的编辑模式以不同的方式配置富文本编辑器的界面。 默认设置如下所示。 您可以根据自己的要求覆盖这些默认值。 您只需自定义要提供给作者的工具栏功能。 您无需指定所有工具栏配置。
要为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>
内联模式和全屏模式使用不同的用户界面设置。 工具栏属性指定工具栏的选项。
例如，如果选项本身是功能（例如，Bold），则将其指定为PluginName#FeatureName（例如，links#modifylink）。
如果该选项是一个弹出窗口（包含插件的某些功能），则将其指定为#PluginName（例如，#format）。
可以使用-在选项组之间指定分隔符(|)。
内联或全屏模式下的弹出窗口节点包含正在使用的弹出窗口列表。 popovers节点下的每个子节点均以插件名称（例如，格式）命名。 它具有包含插件功能列表（例如，format#bold）的“items”属性。
RTE用户界面设置和内容策略 rtecontentpolicies
管理员可以使用内容策略来控制RTE选项，而不是执行如上所述的配置。 当内容策略用作可编辑模板的一部分时，它定义组件的设计属性。 例如，如果将使用RTE的文本组件与可编辑模板一起使用，则内容策略可以定义粗体选项是否可用，以及几个段落格式选项是否可用。 内容策略可重复使用，并且可以跨多个模板应用。
RTE中的可用选项会从用户界面配置下游流向内容策略。
- 用户界面配置设置定义哪些选项可用于内容策略。
- 如果RTE的用户界面配置已移除或未启用某个项目，则内容策略无法对其进行配置。
- 作者只能访问由用户界面配置和内容策略提供的功能。
例如，您可以看到文本核心组件文档。
自定义工具栏图标和命令之间的映射 iconstoolbar
您可以自定义RTE工具栏上显示的Coral图标与可用命令之间的映射。 除了Coral图标之外，您无法使用任何其他图标。
-
在
uiSettings/cui下创建名为icons的节点。 -
为下面的单个图标创建节点。
-
在每个图标节点上，指定一个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>
已知限制 known-limitations
Experience Manager RTE功能具有以下限制：
-
仅在Experience Manager组件对话框中支持RTE功能。 向导或Foundation-forms不支持RTE。
-
Experience Manager在混合设备上不起作用。
-
不要命名RTE配置节点
config。 否则，RTE配置仅对管理员生效，而不对组content-author中的用户生效。 -
RTE不支持将内容嵌入到内联框架或iframe中。
最佳实践和提示 best-practices-and-tips
- 对于浮动对话框，请仅启用插件而不启用弹出对话框。 没有弹出窗口的插件尺寸较小，最适合用于浮动对话框。
- 仅在全屏对话框模式或全屏模式下通过较大的弹出窗口启用插件，如
Paste插件。 具有大型弹出窗口的插件需要更多的屏幕空间才能提供良好的创作体验。 - 如果要使用CoralUI3 RTE的自定义插件，请使用
rte.coralui3库。