Data URLs in CQ5 component

[jan_riedel]

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

[edubey]

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]

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]

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 · Accepted solution]

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.h...

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

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[Karthikayini_C]

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]

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

[GK-AEM]

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]

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.