Data URLs in CQ5 component | Community
Skip to main content
jan_riedel
jan_riedel
October 16, 2015
Solved

Data URLs in CQ5 component

  • October 16, 2015
  • 8 replies
  • 5250 views

I have a CQ5 component where the users can write som text with a richtext editor. It is also possible to paste Images fom the clipboard into the richtext editor. The Images are saved as base64 encoded data URL in the repository like this:

<img src="data:image/png;base64,iVBORw0KG...">

When the component is rendered the data URL for the Image is changed to <img src="_data_image/png;base64,iVBORw0KG..."> and the browser is unable to Display the Image because of the malformed data URL.

Has anybody a Suggestion what can be the cause of this Problem?

Thanks and Regards

Jan

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 kautuk_sahni

Hi

As stated by Praveen, RTE support basic functionality of Image.

      

image

image

Basic image support (drag from content or content finder).

Link: - https://docs.adobe.com/docs/en/cq/5-6-1/administering/configuring_rich_text_editor.html#RTE Plugins and the features Property

 

There is a community article that supports a rich text editor and lets an AEM author drag images from the Content Finder and drop them into the component. 

This article covers the following points:

  • how to work with rich text plugins
  • how to develop and register a custom xtype
  • how to work with multifield component
  • how to control the behaviour of the component using a cq:EditConfignode
  • how to style the component (for example, add a strike through style)
  • how to use drag and drop functionality

You can, modify things according to you needs.

 

Other Links:-

Link: - http://blogs.adobe.com/contentmanagement/tag/custom-richtext/ (Customize richtext editor)

This article covers:

Create a multi richText field,
Common rte configuration – build once use often
Customize default plugins
remove default plugins
restrict features in default plugins
Activate a (non-default) Plugin,
adding your own special character,
Adding default (OOB) special characters back.
PART -2 (these are the things covered in this article)

5.   Use css styles in your rte (Using externalStyleSheet with rte),
6.   Add formatting,
7.   Make “plaintext” as default Paste Mode an strip extra HTML on paste.
8.   Remove default p tag in rte (limited scope)

 

Few more reference links (less relevant to your question)

 1. http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

2.  http://experience-aem.blogspot.in/2015/09/aem-61-touch-ui-rich-text-editor-rte-browse-insert-image.html

3. http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touch-ui-rich-text-editor-plugin-to-upper-case.html

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

8 replies

edubey
edubey
October 16, 2015

AEM supports very basic functionality of image in richtext, which is you can easily drag and drop image from content finder, and it works fine.

Do you have any restriction in drag and drop?

jan_riedel
jan_riedelAuthor
October 16, 2015
Hi Kautuk, as mentioned above the richtext editor is not the real problem. The problem is that during the rendering process the XSS API or some other function converts the string "data:" into "_data_" and the browser is unable to recognize the image source as a data URL. Independent of the richtext editor it should be possible to correctly show such embedded images. I have the same problem with data that comes from a different system, not from the CQ5 system, and that should be displayed by a CQ5 component. Thanks and Regards Jan
jan_riedel
jan_riedelAuthor
October 16, 2015
Hi edubey, the richtext editor works as expected but when the jsp of the component is rendered some instance is malforming the data URL of the image. The string "data:Image/png" is converted to "_data_image/png" and so the browser is unable to show the Image. I guess that the XSS API may cause the problem because it converts the string "jcr:content" in URLs to "_jcr_content" which looks similar to the begin of the data URL. Is it possible to deaktivate the XSS API when rendering the component? Thanks and Regards Jan
kautuk_sahni
Community Manager
kautuk_sahniCommunity ManagerAccepted solution
Community Manager
October 16, 2015

Hi

As stated by Praveen, RTE support basic functionality of Image.

      

image

image

Basic image support (drag from content or content finder).

Link: - https://docs.adobe.com/docs/en/cq/5-6-1/administering/configuring_rich_text_editor.html#RTE Plugins and the features Property

 

There is a community article that supports a rich text editor and lets an AEM author drag images from the Content Finder and drop them into the component. 

This article covers the following points:

  • how to work with rich text plugins
  • how to develop and register a custom xtype
  • how to work with multifield component
  • how to control the behaviour of the component using a cq:EditConfignode
  • how to style the component (for example, add a strike through style)
  • how to use drag and drop functionality

You can, modify things according to you needs.

 

Other Links:-

Link: - http://blogs.adobe.com/contentmanagement/tag/custom-richtext/ (Customize richtext editor)

This article covers:

Create a multi richText field,
Common rte configuration – build once use often
Customize default plugins
remove default plugins
restrict features in default plugins
Activate a (non-default) Plugin,
adding your own special character,
Adding default (OOB) special characters back.
PART -2 (these are the things covered in this article)

5.   Use css styles in your rte (Using externalStyleSheet with rte),
6.   Add formatting,
7.   Make “plaintext” as default Paste Mode an strip extra HTML on paste.
8.   Remove default p tag in rte (limited scope)

 

Few more reference links (less relevant to your question)

 1. http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

2.  http://experience-aem.blogspot.in/2015/09/aem-61-touch-ui-rich-text-editor-rte-browse-insert-image.html

3. http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touch-ui-rich-text-editor-plugin-to-upper-case.html

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
K
Karthikayini_C
July 18, 2016

That's fine.But problem is when placing the script in source code editor directly image is not getting displayed.Please suggest if u have any solution.Thanks&Regards,Karthika

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
July 18, 2016

Karthikayini C wrote...

That's fine.But problem is when placing the script in source code editor directly image is not getting displayed.Please suggest if u have any solution.Thanks&Regards,Karthika

 

Hi Karthikayini

I would request you to please create a new post for this extending question. It helps us in archiving and Tracking.

 

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
GK-007
GK-007
April 29, 2017

Hello Jan,

We are facing the similar kind of issue and our content authors are also using the image of base 64 formats in the RTEs.Since these images are treating as malformed URL so the whole page is breaking and getting the 'Internal Server Error'.

Have you come across any solution to allow this kind of formats and render the page properly?

Thanks In Advance.

-GK

Jitendra_S_Toma
Jitendra_S_Toma
May 1, 2017

Jan Riedel wrote...

I have a CQ5 component where the users can write som text with a richtext editor. It is also possible to paste Images fom the clipboard into the richtext editor. The Images are saved as base64 encoded data URL in the repository like this:

<img src="data:image/png;base64,iVBORw0KG...">

When the component is rendered the data URL for the Image is changed to <img src="_data_image/png;base64,iVBORw0KG..."> and the browser is unable to Display the Image because of the malformed data URL.

Has anybody a Suggestion what can be the cause of this Problem?

Thanks and Regards

Jan

 

Hi Jan,

Instead of using RICHTEXT as xtype. Try with htmleditor. it works fine but there is one issue. After editing html content you have to come out of editor and then save it. you can add script tag here but add with type ("text/javascript") then it will work.

Terms & ConditionsAccessibility statement

Loading footer...