Beyond Embed Component: Integrate Web Code Editor | AEM Community Blog Seeding

[kautuk_sahni]

Beyond Embed Component: Integrate Web Code Editor by Suraj Kamdi

Abstract

After the introduction of AEM Core Components, custom component development has been drastically changed. In some use cases, there is zero customization and core components can be directly used for authoring. Even in those situations, the custom component is needed. It can be quickly built by extending the existing core components. Thus, the development cost and time to production are reduced.

Embed Component
In this era of social networking, we have faced the use case of embedding media or HTML from other social media sites. For these instances, OOTB AEM Core – Embed Component comes in handy.

Embed Component helps authors to embed three types of external content within a page:

URL-based – This feature supports the URL-based resource which is as per oEmbed Standards. This is used for use cases like embedding Facebook, Twitter, Instagram, etc.
HTML – This feature allows the author to directly add HTML content to the AEM page.
Embeddable – This feature allows customization of embedded resources like YouTube. Whereas, it provides flexibility for the author to provide additional information and parameters to embed the resource to the page. This functionality uses a backend pre-processor.
All the above-mentioned options can be configured using component design dialog for enabling or disabling the feature.

Security
Embedding content dynamically can lead to security vulnerability. AEM uses XSS Protection using the Anti Samy. For more information on XSS Protection, do AEM documentation on Security.

That said, what if embedded content needs custom dynamic behavior using JS or style changes using CSS? If XSS Protection config.xml file does not have 

[Suraj_Kamdi]

@kautuk_sahni Thanks for Sharing....