Vos intégration html contiennent parfois des styles qui doivent être appliqués à la fois en front à des blocs de texte contribués mais aussi en back au moment du remplissage de ces textes. Pour voir ces styles, Dans votre fichier de config de thème front (montheme.info.yml), rajoutez :
ckeditor_stylesheets: - css/votrestyles.css
Il arrive pourtant que les règles css de ces intégrations html s'appliquent aux éléments uniquement si leur parent a une classe spécifique, par exemple ".rte". Exemple :
.rte ul { list-style: none; }
Cela fonctionne facilement en front, puisque vous avez la main sur vos fichiers de template, mais ne marchera pas forcément en back, car la classe .rte doit être appliquée à l'iframe générée par ckeditor (ou à un wrapper situé plus profondemment dans l'iframe).
Vous pourriez alors dupliquer toutes les règles css ainsi :
.ckeditable ul, .rte ul { list-style: none; }
...mais ce serait bien laborieux si vous avez beaucoup de règles concernées !
Une autre solution, moins fastidieuse, consiste à ajouter le code ci-dessous dans un fichier js, par exemple celui de votre thème back :
CKEDITOR.on('instanceReady', function() { for (var i in CKEDITOR.instances) { elem = CKEDITOR.instances[i].document.getBody().addClass("rte"); } }); Et voilà, on a la classe au bon endroit et les règles css sont visibles à l'identique en back et en front !