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

[rakeshv29668579]

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.

[arunpatidar · Accepted solution]

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