在富文本中添加样式 Touch ui multifield

Question

我试图在 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"/>

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

感谢您的帮助！

Answer 1

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

The following plugin/feature combinations are not supported with the touch-optimized UI:

edit

image

sourceedit

styles

table

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

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

以 TL;DR 的方式，我只能说样式配置遵循与 Classic 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 中的元素。

这是它在页面上的样子：

Answer 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>

在富文本中添加样式 Touch ui multifield

Adding styles in rich text Touch ui multifield

aem

aem-6