AEM Component to allow content author to input HTML, JavaScript and CSS

Avatar

Avatar

rakeshv29668579

Avatar

rakeshv29668579

rakeshv29668579

04-03-2020

We have a custom component created in AEM which accepts HTML, JavaScript and CSS Styles altogether in a single text area and embed it into the page where the component is used. Embedding of this text is done with context "unsafe". Everything works fine.

 

But if content author places a code, say for example <style> tag and missed to put a closing tag, the component disappears from component tree once the page is refreshed (I suspect the reason might be that Slightly would have considered the code is potentially harmful). 

 

However the component is still accessible from CRXDE but not in Touch UI which makes difficult for content authors to correct their mistake.

 

Any thoughts on this is appreciated.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

04-03-2020

The reason could be, script and CSS are not content so would not display in page (but in source code it will be there).
with broken markup, the whole content might getting removed but you can display this in edit mode only as content, so it will be always available when author will be editing

e.g.

<sly data-sly-test="${wcmmode.edit}">
${properties.content}

</sly>

<sly data-sly-test="${!wcmmode.edit}">
Your code

</sly>

 

Another way is to edit component using content tree - https://helpx.adobe.com/experience-manager/6-3/sites/authoring/using/author-environment-tools.html#C...

 

Answers (0)