How to create/add the new RTE custom plugin for email

[swathialeti]

Can anyone help me with the steps to create/add the new custom RTE plugin for a component(Like Text).

[BrianKasingli]

@swathialeti,

From your touch UI _cq_dialog.xml, add the code snippet below (this is all features enabled for the RTE). Next, from sightly script, include this code block, ${properties.text @ context='html'}, and you should be able to see the RTE configurations show up for your component (after configuration).

<text
   jcr:primaryType="nt:unstructured"
   sling:resourceType="cq/gui/components/authoring/dialog/richtext"
   name="./text"
   useFixedInlineToolbar="{Boolean}true">
   <rtePlugins jcr:primaryType="nt:unstructured">
      <format
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <justify
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <lists
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <paraformat
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <links
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <image
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <findreplace
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <subsuperscript
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <spellcheck
         jcr:primaryType="nt:unstructured"
         features="*"/>
      <misctools
         jcr:primaryType="nt:unstructured"
         features="*">
         <specialCharsConfig jcr:primaryType="nt:unstructured">
            <chars jcr:primaryType="nt:unstructured">
               <copyright
                  jcr:primaryType="nt:unstructured"
                  entity="&amp;#169;"/>
               <trademark
                  jcr:primaryType="nt:unstructured"
                  entity="&amp;#8482;"/>
               <registered
                  jcr:primaryType="nt:unstructured"
                  entity="&amp;#174;"/>
               <emDash
                  jcr:primaryType="nt:unstructured"
                  entity="&amp;#8212;"/>
               <pound
                  jcr:primaryType="nt:unstructured"
                  entity="&amp;#163;"/>
               <nbsp
                  jcr:primaryType="nt:unstructured"
                  entity="&amp;#160;"/>
            </chars>
         </specialCharsConfig>
      </misctools>
      <styles
         jcr:primaryType="nt:unstructured"
         features="*">
         <styles jcr:primaryType="nt:unstructured">
            <plainSpan
               jcr:primaryType="nt:unstructured"
               cssName="defaultSpan"
               text="Default (add span tag)"/>
            <lead
               jcr:primaryType="nt:unstructured"
               cssName="lead"
               text="Lead"/>
         </styles>
      </styles>
      <table
         jcr:primaryType="nt:unstructured"
         features="*"/>
   </rtePlugins>
   <uiSettings jcr:primaryType="nt:unstructured">
      <cui jcr:primaryType="nt:unstructured">
         <inline
            jcr:primaryType="nt:unstructured"
            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table]">
            <popovers jcr:primaryType="nt:unstructured">
               <justify
                  jcr:primaryType="nt:unstructured"
                  items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                  ref="justify"/>
               <lists
                  jcr:primaryType="nt:unstructured"
                  items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                  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>
         <dialogFullScreen
            jcr:primaryType="nt:unstructured"
            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table]">
            <popovers jcr:primaryType="nt:unstructured">
               <paraformat
                  jcr:primaryType="nt:unstructured"
                  items="paraformat:getFormats:paraformat-pulldown"
                  ref="paraformat"/>
            </popovers>
         </dialogFullScreen>
         <tableEditOptions
            jcr:primaryType="nt:unstructured"
            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
      </cui>
   </uiSettings>
</text>

[swathialeti]

@BrianKasingli Thank you! I have added a new plugin(email) into this code. I can able to see that new plugin in the view but the icon is missing for it. Where does the icon should be added for this new plugin  ?

[BrianKasingli · Accepted solution]

I am glad the the first peice of the puzzle have been resolved. To add icon options for the RTE, please refer to this article on how to add style, https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/rte-styles-and-edit-in-tou...