Adding Icon Images in rich text editor | Community
Skip to main content
June 7, 2021
Solved

Adding Icon Images in rich text editor

  • June 7, 2021
  • 2 replies
  • 3776 views

Hi All, I am trying to add icons in rich text editor like for example there will be block of text and in middle of that I am trying to add image but the alignment is not proper. Is there any other way to author those icons or any plugins related to that so that we can achieve that.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Bhuwan_B

Please refer to below community URL :

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/image-plugin-for-full-screen-rte-in-aem-6-3/td-p/300799

https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/rich-text-editor.html?lang=en#dialogfullscreen

 

AEM allows you to configure the interface for the Rich Text Editor differently for the different editing modes. The default settings are provided below. You can override these defaults based on your requirements. You customize only the toolbar features that you want to provide to your authors. You need not specify all the toolbar configurations.

To configure the toolbar for dialogFullScreen, use the following sample configuration.

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
          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"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <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,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

Authoring Process for RTE Images:

  •     Add RTE Component to the page
  •     Initialize inline text editing
  •     Drag an image from the left authoring sidebar onto the RTE at the cursor position
  •     Go to fullscreen text editing mode (or not, if you have "image" enabled for inline mode)
  •     Place the cursor on the image
  •     Click the Image button to launch an image properties box to enter Alt text
  •     Specify alt text and optionally left/right alignment
  •     Close the image properties box

2 replies

VeenaVikraman
Community Advisor
Community Advisor
June 7, 2021

    

Bhuwan_B
Community Advisor
Bhuwan_BCommunity AdvisorAccepted solution
Community Advisor
June 7, 2021

Please refer to below community URL :

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/image-plugin-for-full-screen-rte-in-aem-6-3/td-p/300799

https://experienceleague.adobe.com/docs/experience-manager-65/administering/operations/rich-text-editor.html?lang=en#dialogfullscreen

 

AEM allows you to configure the interface for the Rich Text Editor differently for the different editing modes. The default settings are provided below. You can override these defaults based on your requirements. You customize only the toolbar features that you want to provide to your authors. You need not specify all the toolbar configurations.

To configure the toolbar for dialogFullScreen, use the following sample configuration.

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
          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"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <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,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

Authoring Process for RTE Images:

  •     Add RTE Component to the page
  •     Initialize inline text editing
  •     Drag an image from the left authoring sidebar onto the RTE at the cursor position
  •     Go to fullscreen text editing mode (or not, if you have "image" enabled for inline mode)
  •     Place the cursor on the image
  •     Click the Image button to launch an image properties box to enter Alt text
  •     Specify alt text and optionally left/right alignment
  •     Close the image properties box