Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

CKEditor : pouvoir afficher du code HTML sans qu'il soit interpreté

Article posté le 17-10-2014 dans la catégorie Web

Article mis à jour le : 05-05-2022

Pouvoir afficher du code HTML avec CKEditor mais sans qu'il soit interprété

Pour ceux qui utilisent CKEditor comme éditeur WYSIWYG dans le back office de leur site ou application Web, vous avez peut être déja rencontré le problème de la gestion du code HTML.

En effet, admettons que vous souhaitiez écrire un article présentant un exemple de code HTML, vous allez sûrement passer par ces étapes:

  1. Vous écrivez l'article, l'enregistrement se fait sans problèmes
  2. Vous consultez l'article publié, l'exemple de code HTML non interprété est bien là
  3. Vous voulez éditer l'article, et là, la plupart des balises ont sauté...

Pour éviter ce genre de désagrément, et pouvoir éditer votre article sans avoir à tout refaire à chaque fois, voici comment faire, dans le cadre de l'utilisation de PHP comme language côté serveur :

  1. Utilisez PDO pour lire et écrire dans votre base de données
  2. Lorsque vous sauvegardez (donc édition ou création), appliquez un stripslashes() sur votre contenu de l'article avant l'opération d'écriture dans la base.
  3. Lorsque vous editez votre article, appliquez un htmlspecialchars() sur votre contenu avant son affichage

Et le tour est joué!

EDIT DU 06/10/2015 :

Oubliez (presque) tout ce que vous avez lu:

Tout d'abord, paramétrez votre CKEDITOR pour qu'il n'échappe pas de lui-même les caractères, car on ne sait pas si l'utilisateur n'aura pas désactivé JavaScript dans son navigateur :

config.entities  = false;
config.basicEntities = false;
config.entities_greek = false;
config.entities_latin = false;

Vous pouvez afficher le contenu de votre texte dans votre textarea de ckeditor avec htmlspecialchar().

Pour l'afficher à l'internaute à présent, utilisez strip_tags(), en précisant en second paramètre les balises autorisées. Exemple :

strip_tags($str,"<i><strong>");

autorisera les balises <i> et <strong>.

 


Cet article vous a plu? Découvrez d'autres articles :


comments powered by Disqus