配置RTE以创建可访问的网页和站点

Adobe Experience Manager支持符合各种辅助功能标准的标准辅助功能。 此外，开发人员可以自定义或扩展以提供一些功能，这些功能有助于使用使用富文本编辑器(RTE)的Experience Manager组件创建可访问的内容。

在设计网页和向页面添加内容时，内容开发人员和作者可以使用RTE的功能提供与辅助功能相关的信息。 例如，通过标题和段落元素添加结构性信息。

要配置和自定义这些功能，请为组件配置RTE插件。 例如，paraformat插件允许您添加其他块级语义元素，包括将支持的标题级数扩展到默认提供的基本H1、H2和H3之外。

RTE可用于支持触屏的用户界面和经典用户界面的各种组件。 但是，使用RTE的主要组件是​Text​组件，该组件可用于这两个接口。 以下图像显示启用了一系列插件的RTE，包括paraformat:

图：触屏优化用户界面中的文本组件。

图：经典用户界面中的文本组件。

有关各种界面中可用的RTE功能之间的差异，请参阅插件及其功能。

配置插件功能

有关配置RTE的完整说明，请参阅配置富文本编辑器页。 这涵盖所有问题，包括关键步骤：

• 插件和功能。
• 配置位置。
• 激活插件并配置features属性。
• 配置RTE的其他功能。

通过在CRXDE Lite中相应的rtePlugins子分支中配置插件，您可以激活该插件的所有功能或特定功能。

示例——指定RTE选择字段中可用的段落格式

新的语义块格式可通过以下方式可供选择：

1. 根据您的RTE，确定并导航到配置位置。

2. 启用“段落”选择字段;通过 激活插件。

3. 在“段落”选择字段中指定要使用的格式。

4. 然后，RTE中的选择字段中的内容作者可以使用段落格式。 可以访问它们：

   • 使用触屏优化UI中的段落笔触图标。
   • 在经典UI中使用​格式​字段（弹出选择器）。

通过RTE中通过段落格式选项提供的结构元素，AEM为可开发辅助内容提供了良好的基础。 内容作者不能使用RTE设置字体大小或颜色或其他相关属性的格式，从而阻止创建内联格式。 相反，它们必须选择相应的结构元素，如标题，并使用从“样式”选项中选择的全局样式。 这可确保清晰的标记，为使用自己的样式表和正确结构化内容浏览的用户提供更好的选项。

使用源编辑功能

在某些情况下，内容作者会发现必须检查和调整使用RTE创建的HTML源代码。 例如，在RTE中创建的某段内容可能需要额外的标记，以确保符合WCAG 2.0。这可以通过RTE的源edit选项来完成。 可以在misctools插件](/docs/experience-manager-65/administering/operations/rich-text-editor.html?lang=zh-Hans#aboutplugins)上指定[ sourceedit功能。

添加对更多HTML元素和属性的支持

为了进一步扩展AEM的辅助功能，可以基于RTE（如​Text​和​Table​组件）扩展现有组件，并附加元素和属性。

以下过程说明如何使用​Caption​元素扩展​Table​组件，该元素向辅助型技术用户提供有关数据表的信息：

示例——将题注添加到表属性对话框

在TablePropertiesDialog的构造函数中，添加一个用于编辑题注的附加文本输入字段。 请注意，必须将itemId设置为caption（即DOM属性的名称）才能自动处理其内容。

在​表​中，将属性显式设置或删除为DOM元素。 该值由config对象中的对话框传递。 请注意，应使用相应的CQ.form.rte.Common方法设置／删除DOM属性（com是CQ.form.rte.Common的快捷方式），以避免浏览器实现中的常见缺陷。

示例——在文本中使用强调时创建可访问的HTML

RTE可以使用strong和em标记代替b和i。 将以下节点添加为对话框中的uiSettings和rtePlugins节点的同级节点。

<htmlRules jcr:primaryType="nt:unstructured">
    <docType jcr:primaryType="nt:unstructured">
        <typeConfig jcr:primaryType="nt:unstructured"
                useSemanticMarkup="{Boolean}true">
            <semanticMarkupMap
                    b="strong"
                    i="em"/>
        </typeConfig>
    </docType>
</htmlRules>

分步说明

1. 开始CRXDE Lite。 例如：http://localhost:4502/crx/de/

2. 复制：

   /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

   到:

   /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

   注意

   如果中间文件夹尚不存在，则可能需要创建中间文件夹。

3. 复制：

   /libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

   到:

   /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js。

4. 打开以下文件进行编辑(通过多次单击打开):

   /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

5. 在constructor方法中，在读取行之前：

   var dialogRef = this;
   

   添加以下代码：

   editItems.push({
       "itemId": "caption",
       "name": "caption",
       "xtype": "textfield",
       "fieldLabel": CQ.I18n.getMessage("Caption"),
       "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
   });
   

6. 打开以下文件：

   /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js。

7. 在transferConfigToTable方法的末尾添加以下代码：

   /**
    * Adds Caption Element
   */
   var captionElement;
   if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
   {
      captionElement = dom.firstChild;
   }
   if (config.caption)
   {
       var captionTextNode = document.createTextNode(config.caption)
       if (captionElement)
       {
          dom.replaceNode(captionElement.firstChild,captionTextNode);
       } else
       {
           captionElement = document.createElement("caption");
           captionElement.appendChild(captionTextNode);
           if (dom.childNodes.length>0)
           {
              dom.insertBefore(captionElement, dom.firstChild);
           } else
           {
              dom.appendChild(captionElement);
           }
       }
   } else if (captionElement)
   {
     dom.removeChild(captionElement);
   }
   

8. 使用​保存全部……​保存更改