Hinzufügen von Stilen in Rich Text Berühren Sie ui multifield

Question

Ich habe versucht, eine Multifield Touch UI Textkomponente in AEM 6.2 zu erstellen. Ich habe es durch ein Feld mit dem folgenden Ressourcentyp hinzufügen:

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

Es worked.But I Arten als Plugin in meiner mutifield Textkomponente hinzufügen muß, die ich nicht in der Lage bin zu tun. Wie fügt man die Plugins hinzu, so wie wir die Plugins im klassischen UI hinzufügen? Ich muss verschiedene Stile im Rich-Text-Editor als Teil des Mehrfelds bereitstellen.

Vielen Dank für Ihre Hilfe!

Answer 1

Die Option zur Verwendung benutzerdefinierter Stile im Rich Text-Editor lautet removed in Touch UI, as per the AEM 6.0 documentation.

• bearbeiten
• Bild
• sourceedit
• Arten
• Tabelle

:

Die folgenden Plugin/Merkmalskombinationen sind nicht mit dem Touch-optimierte Benutzeroberfläche unterstützt

Zum Glück, sind sie wieder in AEM 6.2. Ich bin mir nicht sicher über 6.1, sie werden wahrscheinlich auch unterstützt.

Die Dokumentation für AEM 6.2 . Es hat mich sehr viel gelesen, aber ich schaffte es, das Styles Plugin zu arbeiten.

Im Wege eines TL; DR Ich kann nur sagen, dass die Stile Konfiguration das gleiche Format wie bei Classic UI folgt und dass Sie auch die Aufmerksamkeit auf die uiSettings für Ihre Komponente zu zahlen, da sie die Sichtbarkeit fahren von Schaltflächen in Touch UI.

Hier ist ein Beispiel Feldkonfiguration (Rest der Kürze halber weggelassen 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> 

Beachten Sie die Elemente in text/rtePlugins/styles und text/uiSettings/cui/inline/popovers/styles

Hier ist, wie es auf der Seite aussieht:

Answer 2

Fügen Sie diese

hinzu

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