代码之家 › 专栏 › 技术社区 › Param1414086

在富文本触摸ui多字段中添加样式

aem-6 aem

Param1414086 · 技术社区 · 8 年前

我试图在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插件一样? 我需要在富文本编辑器中提供各种样式,作为多字段的一部分。

谢谢你的帮助!

2 回复 | 直到 8 年前

Community CDub 4 年前

在富文本编辑器中使用自定义样式的选项似乎是: 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 .我花了很多时间阅读,但我还是设法得到了风格插件正在工作。

以 TL;博士 我只能说,样式配置遵循与经典UI相同的格式,您还需要注意 uiSettings 对于您的组件,因为它们驱动触摸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 .

下面是它在页面上的外观:

Vazgen Torosyan 7 年前

加上这个

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