Expand my Community achievements bar.

Image Plugin for Full Screen RTE in AEM 6.3

Avatar

Level 2

Hi,

I am trying to achieve the Image Plugin for RTE in full screen mode in AEM 6.3. But my code is failing for creating a Dialog using Dialog Manager.

CUI.rte.ui.cui.AbstractDialog

it throws error : Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Its so basic to have Image Insert Plugin in RTE.

I am using the following example from AEM 6.1 :

Experiencing Adobe Experience Manager - Day CQ: AEM 61 - Touch UI Rich Text Editor (RTE) Browse and ...

and Color Picker from AEM 6.3 :

Experiencing Adobe Experience Manager - Day CQ: AEM 63 - Touch UI RTE (Rich Text Editor) Color Picke...

to fix the Image Plugin.

Does any body have the solution for this ?

[Mod Note: Personal info removed]

6 Replies

Avatar

Level 10

The problem here is you are using a 6.1 community article for 6.3. Check with the author blog to see if they have updated for 6.3.

Avatar

Level 2

Yeah, I am trying to transition from AEM 6.1 to AEM 6.3, by using the second article mentioned in my discussion. But I am facing issue with the dialog manager.

Avatar

Community Advisor

Would be great if you can share a sample package(code + basic sample page) of what you have done so far and where you are stuck at.

Avatar

Level 2

The custom image plugin for the fullscreen rich text editor in the Touch UI is no longer necessary for AEM 6.3.  In AEM 6.3 you can drag and drop an image from the lefthand authoring sidebar onto a RTE in inline editing mode (not fullscreen).  Once you have the image inside the RTE, you can then switch to fullscreen mode and click the Image icon to set an "alt" text for the image.  This gives you the same capabilities as did the custom plugin, but just different steps for the author, and is better supported b/c it's all OOTB.  Just need to make sure you enable the "image" option in your RTE plugin configs.

AEM 6.3 Authoring Process for RTE Images:

  •     Add Text element 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

Avatar

Level 1

Hi , i am facing an issue in RTE plugin in AEM 6.3(Service pack 1). I am able to drop the image in RTE but i am not able to see any icon from image plugins available in RTE.

I have to give styles and alt text , to the droped images.

Does any body have the solution for this ?

Avatar

Community Advisor

If somebody else is looking for info to add image plugin to add Alt and alignment to the image, below needs to be added in toolbar property

image#imageProps

Configure the Rich Text Editor



Arun Patidar