Bonjour,

Dans le but d'améliorer l'utilisation de mon outil d'extranet, je voulais mettre en  place un éditeur de texte des formulaires.

J'ai installé ckeditor qui me semblait bien. L'installation simple et ok, ça marche nickel, je peux manipuler le texte dans le formulaire comme il se doit, couleurs, listes, etc.

Seulement, le problème arrive à l'affichage car si (j'ai vérifié) l'enregistrement se fait sans souci, sans ajout de balises non voulues, la navigateur rajouter des <p></p> et des <br /> dans le texte qui ne sont pas dans le code source et qui me défigurent l'affichage, me donnant des espacements horribles !!!

Je ne comprends pas à quoi cela est dû et pourquoi cela est dû. Ça arrive aussi bien sur FF que sur Chrome (c'est même pire sur Chrome)

Pour exemple:

Voici ce que je mets dans l'éditeur ckeditor

Voici ce que je vois ensuite:

Il y a des espaces non voulus, je ne sais d'où ça vient.

Et voici le code source que je retrouve dans les sources après affichage:

D'où viennent ces balises??

Quelqu'un a-t-il eu déjà ce genre de souci? est-ce dû à ckeditor?

-
Edité par djkori 16 novembre 2017 à 19:35:42

Salut,

Dans un body en content éditable, les retours ligne peuvent être remplacés automatiquement par des <br> par le navigateur.

Au moment de l'enregistrement, je conseille de supprimer tous les espaces blancs entres les balises.

Merci pour le retour.

Oui, ça semble une bonne idée. J'ai essayé de trouver une regex qui puisse le faire mais les quelques rares codes que j'ai trouvé ne marchent pas. Il y a t-il une fonction pour supprimer les espaces blancs entre les balises?

-
Edité par djkori 21 novembre 2017 à 18:11:11

Tu peux utiliser une regex : 

container.innerHTML = container.innerHTML.replace(
  /(<\/[p|div]>)\s*\n\s*(<[p|div]>)/g,
  (m, m1, m2) => m1 + m2 // fonction fléchée avec retour implicite équivalent à function(m, m1, m2) { return m1 + m2 }
)

Ou alors, supprimer tous les noeuds de texte descendants directs de ton contenu, car normalement, les noeuds de textes utiles sont contenus dans des éléments :

for (const node of container.childNodes) {
  if (node instanceof Text) { // tu peux en plus tester le textContent de ce noeud pour vérifier qu-il contient que des caractères blancs, mais normalement c-est le cas
    node.parentNode.removeChild(node);
  }
}

-
Edité par LCaba 18 novembre 2017 à 9:55:15

-
Edité par djkori 21 novembre 2017 à 18:10:52

C'est bien ça. 

Après la regex tu peux la faire côté serveur (mais pas la manipulation du DOM).

Après, ça ne pose pas de problème de sécurité, c'est juste une histoire de lignes blanches.

Par contre, indépendamment de ça, il faut controler le HTML côté serveur avant de l'enregistrer, vérifier qu'il est bien formé et supprimer les balises non désirées (par exemple <script>, <iframe>, etc...)

LCaba a écrit:

C'est bien ça. 

Après la regex tu peux la faire côté serveur (mais pas la manipulation du DOM).

Après, ça ne pose pas de problème de sécurité, c'est juste une histoire de lignes blanches.

Par contre, indépendamment de ça, il faut controler le HTML côté serveur avant de l'enregistrer, vérifier qu'il est bien formé et supprimer les balises non désirées (par exemple <script>, <iframe>, etc...)

Oui, bien vu, effectivement.

Je vais tester et je reviens.

[Edit]

Ben en fait ça le fait pas en JS je crois car j'utilise cette fonction pour envoyer mes mails en ajax par jquery:

<script>
$("#form_edit_intro").submit(function() {
$.ajax({type:"POST", data: $(this).serialize(), url:"page.php",
	         success: function(data){
         
        $("#updates").html(data).fadeIn();
        
            },
	         error: function(){
	         
            }
        });
        return false;
        });
</script>

Du coup, le filtre ne peut se faire que côté serveur non?

Donc il me faudrait une regex mais en php si je ne me trompe pas?

Bien compliqué tout ça.

[Edit 2]

du coup, je tente avec une regex côté php :

$chaine=preg_replace('#<br>(?:\s*(?:<br>))+#i','<br><br>',$chaine);

Ça ne marche pas, et non plus à l'affichage (Regex qui a l'air de fonctionner sur un topic du forum php).

Mais en fait ce qui est stocké dans la bdd, ce n'est pas pas du html avec des br entre les balises mais du html avec des sauts de lignes, qui ensuite une fois affiché sur le navigateur sont transformés en br si j'ai bien compris?

Un vrai casse tête...

-
Edité par djkori 21 novembre 2017 à 16:55:46

Arrête de citer les messages précédents à chaque fois c'est agaçant et ça pourri la lisibilité du toic

Ben non, tu as juste à faire la modif au moment du submit, entre la ligne 2 et la ligne 3 (au moment de la soumission du form, mais avant l'envoi de la requete AJAX

Mille excuses pour les citations . Le referai plus promis juré

Ahh, oui, ok. Bien vu, effectivement, avant l'envoi c'est faisable.

Pour le problème des sauts de lignes et tabulations, j'ai finalement résolu côté php avec un str_replace()

$res=str_replace(array("\r\n", "\n", "\r", "\t"), '', $string);

Et ça marche, l'affichage est maintenant ok,

Par contre le filtrage des éventuels contenus <script> <iframe> etc, il faut le faire plutôt côté serveur ou navigateur?

Sachant qu'avec n'importe quel navigateur, il suffit d'ouvrir la console de développement pour modifier le comportement du script, ou tout simplement, que j'ai pas besoin d'utiliser la page que tu as conçue pour envoyer une requête POST à ta page page.php, je te laisse deviner la réponse.

Oui, effectivement...

Merci pour ton aide LCaba !

Ps: mignon le petit chien !

-
Edité par djkori 21 novembre 2017 à 18:46:43

Ha ha merci ! le modèle a bien grandi et un peu vieilli depuis, mais elle est toujours aussi belle