Discussion :

[bndd24]

Bonjour,

Je suis quasi-sur de ne pas être sur le bon forum donc je vais me faire taper sur les doigts ! en même temps.. quel forum est adapté a ma question ?

bon.. voila je fais un forum et je cherche une solution pour inclure quelque chose comme ceci sur le haut de mon textarea dans mon forum.



la plupart des forums sur le net possèdent un genre de "tableau de bord" en haut.. je ne sais pas comment faire cela.. existe t'il une librairie ou quelque chose du genre ? avez-vous une solution à proposer ? merci pour votre aide.

[sabotage]

C'est un editeur Wysiwyg :
http://ckeditor.com/
https://www.tinymce.com/

[bndd24]

c'est exactement ce qu'il me fallait !

merci

[bndd24]

est t'il possible de le rendre responsive ? :/

[sabotage]

Je te recopie un exemple de CSS pour tinymce :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
    width: 100% !important;
}
 
/* on large screens, I use a different layout, so 600px are sufficient */
@media only screen and (min-width: 600px) {
    table.mceLayout, textarea.richEditor {
       width: 600px !important;
    }
}

Pour Ckeditor, dans config.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
CKEDITOR.editorConfig = function (config) {
 
    config.width = "auto";
    config.height = "auto";

[bndd24]

J'ai testé ckeditor il est pas mal !

par contre j'ai une question..

j'affiche les messages sur mon forum de test avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo $donnees->msg; ?>

car si je rajoute htmlspecialchars alors je n'ai plus la mise en forme.. du coup comment je dois faire pour avoir la belle mise en forme + sécurisé l'affichage ?

merci

[sabotage]

La sécurité apportée par htmlspecialchars() est justement d’empêcher l'utilisation de balise HTML et donc Javascript.
Il existe par exemple HTMLPurifier pour contrôler que le texte saisie par ton utilisateur est conforme.

[bndd24]

oui je sais bien mais actuellement si le membre rentre du code php comment je peux faire pour l’empêcher ?

http://htmlpurifier.org ?

[sabotage]

On ne peut pas injecter du PHP.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$texte_saisie = '<?php echo 'je suis malveillant mouahahaha'; ?>';
echo $texte_saisie; // affiche dans le navigateur <?php echo 'je suis malveillant mouahahaha'; ?>

[bndd24]

oui effectivement je viens de faire le test ! par contre pour le javascript ça fonctionne :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

<script>alert('hello')</script>

pas envie que les utilisateurs s'amusent de cette façon sur le forum.. comment je peux faire ? pas facile d'avoir un éditeur Wysiwyg et en même temps de sécuriser son forum..

[sabotage]

Je t'ai dit il faut inspecter avec HTMLPurifier.

[bndd24]

Oui effectivement mais il s'agit d'un forum traitant sur le php/mysql html css javascript et autres langages.. Donc je rencontre un problème car je veux offrir aux membres la possibilité de publier un code source via le forum mais alors comment faire avec htmlpurifier ? Tu comprends le problème ?

[sabotage]

Non je ne comprends pas.

[Invité]

Bonjour,

1/ CKeditor : on peut limiter/choisir aussi les icones à afficher dans le mini-meni wysiwyg
config.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
CKEDITOR.dtd.$removeEmpty['i'] = false;	// SPECIAL Font Awesome (ne pas supprimer les balises <i> vides)
CKEDITOR.editorConfig = function( config )
{
	// -----------------------
	config.basicEntities = false; // évite les &nbsp; inutiles
	config.allowedContent = true;	// accepte l'ajout d'attribut (class, style...) inline
	// -----------------------
	/* TOOLBAR PERSONNALISEE - SIMPLE (par exemple) */
	config.toolbar = 'ToolbarSimple';
	config.toolbar_ToolbarSimple =
	[
	{ name: 'basicstyles', 	items : [ 'Bold','Italic','Underline','Strike' ] },
	{ name: 'paragraph', 	items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
	{ name: 'links', 	items : [ 'Link','Unlink','Anchor' ] },
	{ name: 'editing', 	items : [ '-','SpellChecker', 'Scayt' ] },
	{ name: 'colors', 	items : [ 'TextColor','BGColor' ] },
	{ name: 'styles', 	items : [ 'Format' ] },
	{ name: 'clipboard', 	items : [ 'PasteText','PasteFromWord' ] },
	{ name: 'insert', 	items : [ 'HorizontalRule' ] },
	{ name: 'document', 	items : [ 'Source' ] }
	];
	// -----------------------
};

Utilisation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

		<script>CKEDITOR.replace( 'textarea_message', { toolbar:'ToolbarSimple' } );</script>

2/Le nettoyage du code peut se faire en PHP :

• strip_tags() permet de définir des $allowable_tags. Donc d'accepter ou pas certaines balises HTML.

[sabotage]

Avec strip_tags() un utilisateur malintentionné peut placer du javascript dans un attribut onmouseover par exemple.

[bndd24]

Je vais tenter d'expliquer différemment : je veux que l'utilisateur puisse poster n'importe quelle balise dans n'importe quel langage (comme sur ce forum) et au moment de l'affichage du topic je veux que seule la mise en forme html soit interprété (comme sur ce forum aussi).
Au fait, je fais un forum d'entraide à la programmation donc il y aura du code de différent langage posté par les utilisateurs.

[Invité]

Il ne faut donc pas donner accès à la "Source" (icône "Source" à supprimer).

...poster n'importe quelle balise dans n'importe quel langage (comme sur ce forum) et au moment de l'affichage du topic je veux que seule la mise en forme html soit interprété (comme sur ce forum aussi).

Il faut passer par du BBcode (comme sur ce forum ). ->
(affiche le code source de cette discussion pour t'en convaincre)

[bndd24]

mum.. ok je pense avoir compris.
Je résume :
Je garde bien l’éditeur ckeditor mais je supprime le bouton Source et je remplace la valeur des boutons gras italique souligné tableaux etc par des bbcodes.. ok mais euh existe t'il pas un "module" ou quelque chose qui remplace la valeur des boutons par des bbcodes comme sur ce forum ?

et donc pour l'affichage des messages du coup je remets en place le htmlspecialchars ??

[Invité]

A voir (je ne connais pas) :

• CKeditor - BBCode Output Format Plugin
• CKeditor - BBCode Editing (exemple)

J'ai vu ça aussi :

• SCEditor

Pour insérer du "code", il faut utiliser l'icône... "code" ! (qui se transforme en balise <code>, ou <pre>)

=> Prépare-toi un fichier TEST.php, et fais des essais...

[bndd24]

oui je crois bien que c'est la solution le plugin bbcode, en plus plugin officiel de ckeditor (cksource)

je reviens vers vous après les tests