3 avril 2019

Voir vos styles de thème front sur ckeditor

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 !


Invisible pour les autres utilisateurs, utilisé pour générer votre avatar (ou votre Gravatar si vous en avez un).