在富文本格式中添加样式Touch ui multifield [英] Adding styles in rich text Touch ui multifield

问题描述

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

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

感谢您的帮助！

解决方案

在富文本编辑器中使用自定义样式的选项似乎是

I was trying to create a multifield touch ui text component in AEM 6.2. I created it by adding a field with the following resource type:

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

It worked.But I have to add styles as a plugin in my mutifield text component which I am unable to do. How to add the plugins just like we add rte plugins in classic ui? I need to provide various styles in the rich text editor as part of multifield.

Thanks for helping!

解决方案

It appears the option to use custom styles in the Rich Text Editor was 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

Thankfully, they're back in AEM 6.2. I'm not sure about 6.1, they're probably also supported.

The documentation for AEM 6.2 describes the steps necessary to enable the Styles RTE Plugin. It took me a lot of reading but I managed to get the Styles plugin working.

In way of a TL;DR I can only say that the styles configuration follows the same format as in case of Classic UI and that you also need to pay attention to the uiSettings for your component as they drive the visibility of buttons in Touch UI.

Here's an example field configuration (rest of the cq:dialog omitted for brevity:

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

Note the elements in text/rtePlugins/styles and text/uiSettings/cui/inline/popovers/styles.

Here's how it looks on the page:

这篇关于在富文本格式中添加样式Touch ui multifield的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！