在富文本 Touch ui 多字段中添加样式答案

【问题标题】：Adding styles in rich text Touch ui multifield在富文本 Touch ui 多字段中添加样式
【发布时间】：2017-01-31 11:37:45
【问题描述】：

我试图在 AEM 6.2 中创建一个多字段触摸 ui 文本组件。我通过添加具有以下资源类型的字段来创建它：

<test
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/authoring/dialog/richtext"
   fieldLabel="Touch Ui Text"
   name="./test"
   renderReadOnly="{Boolean}true"/>

它起作用了。但是我必须在我的多字段文本组件中添加样式作为插件，这是我无法做到的。如何添加插件，就像我们在经典 ui 中添加 rte 插件一样？作为多字段的一部分，我需要在富文本编辑器中提供各种样式。

感谢您的帮助！

【问题讨论】：

标签： aem aem-6

【解决方案1】：

在富文本编辑器中使用自定义样式的选项似乎是removed in Touch UI, as per the AEM 6.0 documentation。

触摸优化 UI 不支持以下插件/功能组合：

编辑

图片

源编辑

样式

表格

谢天谢地，他们又回到了 AEM 6.2。我不确定 6.1，它们可能也受支持。

AEM 6.2 describes the steps necessary to enable the Styles RTE Plugin 的文档。我花了很多时间阅读，但我设法让 Styles 插件工作。

以 TL;DR 的方式，我只能说样式配置遵循与经典 UI 相同的格式，您还需要注意 uiSettings组件，因为它们推动了 Touch UI 中按钮的可见性。

这是一个示例字段配置（为简洁起见，省略了 cq:dialog 的其余部分：

<text jcr:primaryType="nt:unstructured"
      name="./text"
      sling:resourceType="cq/gui/components/authoring/dialog/richtext"
      useFixedInlineToolbar="true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="*"/>
        <justify jcr:primaryType="nt:unstructured" features="*"/>
        <lists jcr:primaryType="nt:unstructured" features="*"/>
        <links jcr:primaryType="nt:unstructured" features="*"/>
        <styles jcr:primaryType="nt:unstructured" features="styles">
            <styles jcr:primaryType="cq:WidgetCollection">
                <warning jcr:primaryType="nt:unstructured" cssName="warning" text="Warning"/>
                <note jcr:primaryType="nt:unstructured" cssName="note" text="Note"/>
                <header jcr:primaryType="nt:unstructured" cssName="header" text="Header"/>
            </styles>
        </styles>
        <paraformat jcr:primaryType="nt:unstructured" features="*">
            <formats jcr:primaryType="cq:WidgetCollection">
                <paragraph jcr:primaryType="nt:unstructured" description="Paragraph" tag="p"/>
                <heading1 jcr:primaryType="nt:unstructured" description="Heading 1" tag="h1"/>
            </formats>
        </paraformat>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured">
                <popovers jcr:primaryType="nt:unstructured">
                    <justify jcr:primaryType="nt:unstructured" ref="justify"/>
                    <lists jcr:primaryType="nt:unstructured" ref="lists"/>
                    <paraformat jcr:primaryType="nt:unstructured" items="paraformat:getFormats:paraformat-pulldown" ref="paraformat"/>
                    <styles jcr:primaryType="nt:unstructured" items="styles:getStyles:styles-pulldown" ref="styles"/>
                </popovers>
            </inline>
        </cui>
    </uiSettings>
</text>

注意text/rtePlugins/styles 和text/uiSettings/cui/inline/popovers/styles 中的元素。

这是它在页面上的外观：

【讨论】：

【解决方案2】：

添加这个

<rtePlugins jcr:primaryType="nt:unstructured">
    <styles
                                jcr:primaryType="nt:unstructured"
                                features="*">
        <styles jcr:primaryType="cq:WidgetCollection">
            <style1
                                        jcr:primaryType="nt:unstructured"
                                        cssName="style1"
                                        text="style1"/>
            <style2
                                        jcr:primaryType="nt:unstructured"
                                        cssName="style2"
                                        text="style2"/>
            <section--title>
            </styles>
        </styles>
    </rtePlugins>

【讨论】：