Image Plugin for Full Screen RTE in AEM 6.3

Avatar

Avatar
Boost 1
Level 1
vivek07mishra
Level 1

Like

1 like

Total Posts

6 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
vivek07mishra
Level 1

Like

1 like

Total Posts

6 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
vivek07mishra
Level 1

23-08-2017

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]

Replies

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,410 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,410 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

23-08-2017

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

Avatar
Boost 1
Level 1
vivek07mishra
Level 1

Like

1 like

Total Posts

6 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
vivek07mishra
Level 1

Like

1 like

Total Posts

6 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
vivek07mishra
Level 1

23-08-2017

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

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
Level 5
viveksachdeva
Level 5

Likes

52 likes

Total Posts

225 posts

Correct reply

35 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
viveksachdeva
Level 5

23-08-2017

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

Avatar
Validate 1
Level 2
brett_birschbac
Level 2

Likes

4 likes

Total Posts

20 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
brett_birschbac
Level 2

Likes

4 likes

Total Posts

20 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile
brett_birschbac
Level 2

22-12-2017

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

Avatar
Level 1
abhinav_tmy
Level 1

Likes

0 likes

Total Posts

3 posts

Correct reply

0 solutions
View profile

Avatar
Level 1
abhinav_tmy
Level 1

Likes

0 likes

Total Posts

3 posts

Correct reply

0 solutions
View profile
abhinav_tmy
Level 1

05-12-2018

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

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,329 posts

Correct reply

949 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,462 likes

Total Posts

3,329 posts

Correct reply

949 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

23-06-2019

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