Après l'introduction des AEM Core Componentsle développement de composants personnalisés a été radicalement modifié. Dans certains cas d'utilisation, il n'y a aucune personnalisation et les composants principaux peuvent être directement utilisés pour la création. Même dans ces situations, le composant personnalisé est nécessaire. Il peut être construit rapidement en étendant les composants de base existants. Ainsi, le coût de développement et le temps de production sont réduits.
Composant d'intégration
En cette ère de réseautage social, nous avons été confrontés au cas d'utilisation de l'intégration de médias ou de HTML à partir d'autres sites de médias sociaux. Pour ces cas, OOTB AEM Core – Embed Component est pratique.
Embed Component aide les auteurs à intégrer trois types de contenu externe dans une page :
- URL-based – Cette fonctionnalité prend en charge la ressource basée sur l'URL qui est conforme aux normes oEmbed. Ceci est utilisé pour des cas d'utilisation tels que l'intégration de Facebook, Twitter, Instagram, etc.
- HTML – Cette fonctionnalité permet à l'auteur d'ajouter directement du contenu HTML à la page AEM.
- Intégrable – Cette fonctionnalité permet la personnalisation des ressources intégrées comme YouTube. En revanche, cela permet à l'auteur de fournir des informations et des paramètres supplémentaires pour intégrer la ressource à la page. Cette fonctionnalité utilise un préprocesseur principal.
Toutes les options mentionnées ci-dessus peuvent être configurées à l'aide de la boîte de dialogue de conception de composants pour activer ou désactiver la fonctionnalité.
Sécurité
L'intégration dynamique de contenu peut entraîner une faille de sécurité. AEM utilise la protection XSS à l'aide de l'Anti Samy. Pour plus d'informations sur la protection XSS, consultez la documentation AEM sur Sécurité.
Cela dit, que se passe-t-il si le contenu intégré nécessite un comportement dynamique personnalisé à l'aide de JS ou des changements de style à l'aide de CSS ? Si le fichier config.xml de protection XSS n'a pas les balises et à l'emplacement approprié, il sera supprimé du code HTML généré. Pour le cas d'utilisation de base, le composant intégré d'AEM Core Component sera suffisant . Que se passe-t-il si l'auteur a besoin de fonctionnalités avancées telles que JS Scripting, en ajoutant du CSS personnalisé directement sur les pages Web à l'aide de boîtes de dialogue de création ?
Intégration d'un éditeur tiers
Ici, je vais montrer comment intégrer un éditeur de code Web dans AEM Authoring Dialogue. Pour cette intégration, j'ai choisi Ace Editor. Ace Editor possède une API d'éditeur de code intégrable qui fournira l'apparence réelle d'un simple éditeur de texte. En outre, ce plugin fournit des supports supplémentaires pour le surligneur de syntaxe HTMLJS et CSS et la fonction de balise de fermeture automatique.Création du composant
Créons ce composant en suivant ces étapes simples :[19659022]Tout d'abord, créez un composant nommé Code Embed component.- JS doit contenir les fichiers suivants
jquery-ace.min.js ace.min.js theme-monokai.js mode-markdown.js auteur.js
Le dossier - CSS doit contenir les fichiers suivants
ace.css
$(document).on("dialog-ready", function() { var textarea = $('#surajk-ace-editor'); $("#surajk-ace-container").html($(textarea).html()); var editor = ace.edit("surajk-ace-container"); editor.setTheme("ace/thème/monokai"); editor.getSession().setMode("ace/mode/html"); editor.getSession().on('change', fonction () { textarea.val(editor.getSession().getValue()); }); textarea.val(editor.getSession().getValue()); });
${properties.htmlMarkup @ context='unsafe'}Remarque : À des fins de démonstration, j'utilise une logique HTL simple. Vous pouvez également utiliser le modèle Sling pour le même.
Ressources
Télécharger ceci package pour référence. Si vous avez des questions, n'hésitez pas à me contacter.Source link