Intégration de tinyMCE
Un nouveau tutoriel, cette fois ci c’est un peu différent, puisque c’est le premier tutoriel sur de la « programmation web ». Je le trouve un peu laborieux, c’est mon premier essai, donc veuillez m’excuser. Dans ce tutoriel nous allons voir comment intégré tinyMCE dans un de vos formulaire contenant un texterea. Grâce a tinyMCE, un visiteur pourra mettre en forme son texte, ajouter des smiley, etc…. L’avantage c’est que ça se présente sous forme d’une « interface graphique », un peu comme dans un traitement de texte. Sans plus attendre, la vidéo :
Comment ajouté un éditeur wysiwyg dans vos formulaires
envoyé par zone-tuto. – Vidéos des dernières découvertes scientifiques.
Avec l’aide de la vidéo vous savez comment intégré tinyMCE, mais je vais vous donner les codes (ça vous évitera de tout recopier) et quelques informations supplémentaires.
Pour commencer, le site officiel : http://tinymce.moxiecode.com/
Ensuite, les codes que j’utilise dans la vidéo (à insérer entre les balises head):
Intégration de tinyMCE (faites attention au chemins) :
<script src="modules/Tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"><!--mce:0--></script>
Paramétrage de tinyMCE (comme le code est assez long, j’ai préféré le « caché », pour l’afficher cliqué sur la barre) :
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "n_text", // le nom de votre texterea
theme : "advanced", // le thème choisi pour l'éditeur, laissez advanced si vous voulez avoir tous les choix de plugins etc....
language : "fr", // langue
plugins : "advimage,fullscreen,preview,emotions,insertdatetime,save", //les plugins que vous allez utiliser
//les barres de boutons de 1 à 3
theme_advanced_buttons1 :
"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,sub,sup,charmap,|,undo,redo,|,outdent,indent,|,link,unlink,save,|,insertdate",
theme_advanced_buttons2 :
"forecolor,backcolor,|,fontsizeselect,fontselect,formatselect,|,image,emotions,|,cleanup,removeformat,|,fullscreen,preview",
theme_advanced_buttons3 : "",
//
theme_advanced_toolbar_location : "top", //où se place la toolbar,
theme_advanced_toolbar_align : "left", //l'alignement de celle ci
theme_advanced_statusbar_location : "bottom", //Où se positionnera la barre de statut
content_css : "../templates/TinyMCE.css", //lien vers le css utilisé
plugin_insertdate_dateFormat : "%d/%m/%Y", // le format de la date pour le plugin insertdatetime
plugin_insertdate_timeFormat : "%H:%M:%S", //pareil sauf que c'est le format de l'heure
//les attributs autorisé pour les balises citées. Exemple, la balise hr n'acceptera que les attributs class, widht, size et noshade
extended_valid_elements :
"hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],a[href|name]",
//
theme_advanced_resize_horizontal : true, //redimensionnement horizontal (oui ou non).
theme_advanced_resizing : true //redimensionnement vertical (oui ou non)
});
</script>
Et enfin, un dernier code important, il permet de créer un texterea en javascript (comme ça, si un malin désactive javascript pour injecté du code malveillant, le texterea ne sera pas créé et son attaque sera bloqué) :
<span id="content_placeholder"></span>
<script language="javascript" type="text/javascript">
with (document.getElementById ("content_placeholder")) {
with (appendChild (document.createElement ("TEXTAREA"))) {
name = "nom_du_textarea";
cols = 80;
rows = 25;
value = "texte_par_defaut";
}
}
//-->
</script>
<noscript>
The editor requires scripting to be enabled.
</noscript>
<noscript>mce:3</noscript>Dans ce dernier code, vous pouvez régler la longueur de votre formulaire avec « cols et rows », dans « name » vous mettez le nom du textarea, et dans « value » le texte à afficher par défaut à l’intérieur du textarea (pour guider un visiteur par exemple).
Voila, le tutoriel est fini, si j’ai oublié quelques choses ou que vous avez des questions laissez un commentaire (ou allez faire un tour sur le forum) et j’y répondrais !
Publié le 20 juin 2009 par Madrzejewski Alexis dans Développement web, Tous les tutoriels vidéos
41 commentaires
Ajouter un commentaire
Ici les commentaires sont en DoFollow, profitez-en mais en abusez pas !
Veuillez ne pas poster de code (php, html ou autre) car il sera bloqué par le site.
Les commentaires ne sont pas immédiatement validés.
Merci de faire une recherche sur Google avant de poser une question.
Très intéressant. Je t’ai mis en favoris pour revoir ça à tête reposée.
Bon courage.
SVP est-ce qu’il y a une solution concernant le caractére ‘ (apostrophe) car le script ne l’accepte pas .
merci d’avance.
Bonjour,
Pourrais-je avoir plus d’information sur l’erreur ?
Le script se bloque complètement ou c’est seulement des antislash qui se mettent devant l’apostrophe ?
SI c’est des antislash c’est que :
-Vous avez ajouter addslashes pour sécurisé un peu plus votre variable récupérant le texte tapé par un visiteur par exemple
-Ou alors les magic_quote sont activé ce qui a le même effets que addslashes.
Dans ce cas il suffit juste de retirer les antislash avant d’afficher le texte a l’aide de la fonction stripslashes
Je ne sais pas comment cela se fait que j ai ete avertis de se tuto par mail, alors qu il existe depuis un petit temp, etc … mais il tombe a pic et est tres interressant !
Je le met egalement en favori et je pense que je vais te referencer sur mon site si tu le permet, car je l utilise egalement et c est vraiment une alernative interressante au bbcode d autant plus tres facile a mettre en place
Ton tuto va completer mes connaissances, merci a toi … excellent !
De rien
Merci pour le référencement, sa fait plaisir !
trop bien ton tutto, tu sais comment ça marche par exemple sous joomla, qui recouper les fichiers du ftp pour les modifier avec tinyMCE ??
merci pour ton tutto
Malheureusement je ne connais pas joomla, mais a mon avis il doit y avoir des explications dans la doc officiel, ou alors des tutoriels sur les forums
Merci pour ce ptit coup de main !! Dommage que tu ne rentres pas trop dans les détails .. tant pis je vais farfouiller la doc !!
Salut, merci c’est pas mal du tout !
Pour désactiver le javascript sous Firefox :
Outils > Options > Contenu > Décocher « Activer JavaScript »
a+
Merci
Au passage, très intéressant ton site, notamment en ce qui concerne les pages d’administrations, c’est très galère ce genre de script :/
Merci, ça fait plaisir ! Mais ça fait un bon temps qu’il n’est plus à mis à jours.. Je recommence une nouvelle version
En tout cas ça fait plaisir de voir un tutoriel comme celui-là, ça fait un bail que je veux insérer ce genre de module sur mes textareas !
A la prochaine
Si je peux me permettre les erreurs d’orthographe dans un tutoriel cela ne fait pas sérieux du tout.
-ée
-sa
et d’autres fautes de français.
Mais je vais regarder la vidéo et aller voir ce que le site propose d’autre.
Merci
Bonjour,
Merci de la remarque, c’est un article qui date un peu et maintenant je suis plus vigilant (j’utilise bonpatron par exemple). J’en ai corrigé un paquet
normalement c’est bon.
Pingback: Créer un bbCode avec PHP et GeSHi | Tutoriels-Video
Bonjour,
Rien à voir..
Je vois que votre vidéo est sur dailymotion ..
Mais comment on intégrer un vidéo dailymotion dans tinymce ????
Bonjour, très bon tuto pour intégrer tinymce, tout marche bien.
Par contre, comment fait-on pour modifier un texte formaté enregistré dans une base sql ? Si j’indique dans le textarea javascript :
value = « nomchamp) ;?> »;
les balises html bloquent l’affichage du textarea. cela ne marche que s’il n’y a aucun formatage. Aurais-tu une solution ? Merci !
Bonjour,
@camyo :
Je n’ai jamais essayer, mais je pense qu’il existe une icône genre « multimédia » qui permet d’insérer des vidéos provenant des hébergeurs connu. Un peu comme sur wordpress en fait.
Sinon, on autorise le code html et on met directement le code proposé par les hébergeurs vidéos. C’est une solution plus risqué que la première par contre.
@cedric :
J’avais un problème similaire sur mon deuxième site, c’est à dire que j’avais un script de new sans tinymce, et je pouvais modifier facilement les différentes valeurs en faisant une requête php et en réa-fichant le tout dans le texterea.
Lorsque que j’ai fait la mise à jour avec tinyMCE, tout ce bloqué. A l’époque je n’avais pas trouvé de solution (en fait c’était le bazar parce que dans ma base de donnée j’avais du texte formaté avec l’ancien système et du texte formaté avec tinyMCE).
Je pense qu’il faut jouer avec les fonctions en php qui permettent de protéger des caractère spéciaux comme htmlentities par exemple. Comme cela les caractères spéciaux seront bloqué et tinyMCE devrait pouvoir se lancer. Mais je me demande, si en faisant ça, on ne perdrait pas la mise en page qu’on a effectué.
Sinon une autre solution c’est de ne pas ne pas utiliser de javascript pour créer le textarea (faire le texterea en html pur et dur), normalement ça ne pause pas de problème, sauf que ça représente une faille de sécurité. Si c’est dans vos pages d’administration, ça ce tente étant donné que vous êtes le seul à y aller, par contre si c’est des pages publique c’est très risqué ! (j’en ai parlé dans le tutoriel normalement).
Bonne chance
Pingback: Système de news en PHP avec flux RSS | Tutoriels-Video
Bonjour,
d’abord très bon tuto
par contre j’ai un petit soucis car quand je copie le code j’ai des avertissements dans la console d’erreur de firefox…et donc rien de s’affiche.
exemple : Avertissement : Propriété « scrollbar-arrow-color » inconnue. Déclaration abandonnée.
Je ne comprend pourquoi alors que avec le code du site du zero tout marche nickel pour vous…
Cordialement
Ju
Bonjour,
Je n’ai jamais eu ce genre de problème et malheureusement je ne vois pas de solution.
Est-ce que ça fonctionne avec un navigateur différent ?
Bonjour,
je ne sais pas pourquoi, mais en ayant recopié tes scripts et en ayant veillé à mettre les bonnes adresses (dans firebug les scripts apparaissent bien)…
rien ne se passe !
J’ai bien veillé à ce que « message » s’appelle bien message.
J’ai essayé sur la version que j’avais fait du tuto livre d’or du site du zéro, puis sur leur code de correction directement.
RIEN ! C’est rageant… tout le monde à l’air content.
Ah oui. Javascript est activé puisque quand je met le code de sécurité, le champ texte s’affiche bien.
Et ça ne fonctionne ni sur safari, ni sur firefox, ni sur opéra ni sur chrome.
Si quelqu’un a une idée !!! Merci d’avance.
J’ai trouvé… c’était le paramètre de lang… comme je n’ai pas mis le français, ça posais problème ! Il m’a suffit de mettre en à la place de fr et ça marche !!!!
Mille merci pour ton tuto !
« S’il n’y a pas de textarea, il n’y aura pas de failles »
Faux !
Never Trust User Input de toutes manières. C’est une règle de base en PHP (googlisez un peu).
Les seules protections valables sont celles de PHP, ce serait trop long à expliquer mais c’est le cas.
Bonjour,
C’est vrai, mais si je me souviens bien je rajoute une petite protection en php derrière.
Et normalement il n’y a pas de problème étant donné que j’ai regardé la doc officiel sur les moyen de protection, donc je doute qu’il y ai une erreur dans la doc, ce serait grave.
Il y a éventuellement un cas que je n’est pas envisager, c’est si l’utilisateur bloque le javascript, et créé un autre textarea avec un outils comme webdeveloper, dans ce cas précis le système possède une faille en effet mais dans le tuto j’ai ajouter un « addslashes » normalement.
Merci pour ce joli tuto
Merci beaucoup pour cette vidéo
Bonjour,
Merci pour ce tuto qui aide bien.
J’ai malgré tout un problemme: pas de BBcode à l’affichage.
J’ai le bon textarea, sa valeur s’affiche bien car c’est une zone modifiable.
C’est le bon chemin pour tiny_mce.js.
Et le Javascript est bien activé.
Je suis sous firefox.
Si vous avez des solutions, je suis preneur.
Cordialement
Bonjour,
Je pense que c’est un problème lors de la configuration de TinyMCE (le code javascript que l’on mets dans le header qui permet de modifier l’aspect de l’éditeur en autre).
Je vous recommande d’aller voir la page des essaies sur le site offciel qui est très bien faites et offre des exemples : http://tinymce.moxiecode.com/tryit/full.php
Salut , j’ai réussi a contourner l’editeur et a envoyé des scripts
il m’a suffit de faire une page html similaire avec un formulaire classique <input et textarea pour pouvoir envoyer des scripts a mon serveur !
faudrait reflechir à ce probleme !
Salut, merci pour ce script qui fonctionne… presque! Les icônes se mélangent toutes et s’étendent horizontalement… Je peux cliquer dessus, faire des textes… mais c’est MOCHE!
Quelqu’un a une idée?
PS: même problème qu’inaden avec la langue, il faut remplacer « fr » par « en »
Problème résolu.
Mon css interférait avec celui de tinymce…
Merci encore Alexis!
Jute un petit commentaire d’un developpeur :
IL N’EXISTE AUCUNE SECURITE FIABLE EN JAVASCRIPT.
En effet il faut comprendre que le javacript s’execute coté client.. Avec le plugin firebug, par exemple on peut tout simplement reecrire une parti du script a notre convenance.. et hop au revoir les pseudo securités.
La seul sécurisation possible ne peut se faire que coté serveur.. donc avec php par exemple, le reste n’est que fantasme.
Salut @ Cuoq
Merci de le préciser, mais il me semble que j’ai l’ai dit dans la vidéo et dans le cas contraire c’est une erreur de ma part.
Bonjour,
Bravo et merci pour le temps passé sur ton tuto video qui est parfaitement clair.
Très bon tuto mais attention !!
Meme avec le script qui désactive l’affichage du textarea si le javascript n’est pas activé il peut en effet y avoir danger.
Il suffit de créer un formulaire fantôme et de le soumettre à la page concernée… ainsi je peux soumettre le formulaire que je souhaite où je veux et quand je veux sans passer directement sur le site où se trouve le formulaire.
Une protection PHP est primordial et obligatoire et il ne faut pas l’enlever…
Salut,
merci pour le tuto, par contre je souhaite avoir deux instance de tinymce sur la même page dans deux langue différentes la première en allemand et la deuxième en français, malheureusement la première instance ne charge pas les langues et met les place.holder a la place. quelqu’un sait comment configurer la bête ?
Merci d’avance,
Elrick
Bonjours Alexis, tu peux me dire comment tu crée ta base de données que tu utlise dans le tuto? Puisque j’essaie de suivre tes instructions et je ne vois pas pourquoi quand j’enregistre et que je cherche ce qui se trouve dans mas base de données, les balises restent. Par contre si j’utilise tinymce sans l’enregistrement dans la base de données ça marche très bien. Merci
Bonjour Melchi,
Malheureusement ça va faire un petit bout de temps que j’ai fait ce tutoriel et je n’ai plus les sources/BDD. Tout ce qu’il me reste est dans cet article.
Cependant, me connaissant, ça doit être assez simple. Généralement j’utilise un type « tinytext » ou « mediumtext » pour stocker des informations tels que des commentaires ou un article issue de TinyMCE.
Merci Alexis, moi j’enregistre dans un champ de type text, mais quand je veux afficher sur la page les ça vient avec les codes. Je vais continuer à essayer. Merci encore
Comment fait on pour changer les textes en anglais ( fonts .. et autres )par du français
merci
Il faut chercher sur le site officiel de TinyMCE les modules de langue française et les téléchrger. Et mettre language: »fr »