Intégrer l’éditeur de texte TinyMCE en mode simple sur un site
Nous avions déjà abordé la façon de rendre ce génial petit éditeur Open Source compatible avec les copier-coller de Word. …
Ce billet ayant suscité quelques questions, voici un petit tuto sur l’intégration toute simple de TinyMCE sur un site…
Comment intégrer l’éditeur sur ma page ?
1. Pour commencer, télécharger la dernière version de TinyMCE sur le site de l’éditeur :
2. Dézipper la bête. Par défaut le package contient des fichiers d’exemple inintéressants dans notre cas, le seul dossier à garder est donc le dossier « tiny_mce » qui est par défaut dans « jscript » :
3. Uploader ce dossier tiny_mce sur la racine de son site, soit http://www.monsite.com/tiny_mce/ dans notre exemple.
4. Ouvrir le code de la page editeur.html sur laquelle on souhaite créer un éditeur de texte. Pour respecter les chemins relatifs, on va supposer que ce fichier est déposé lui aussi sur la racine du site.
En haut de la page editeur.html, dans le <head>, insérer le code suivant :
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
!--
tinyMCE.init({
mode : "textareas",
valid_elements : "em/i,strike,u,strong/b,div[align],br,#p[align],-ol[type|compact],-ul[type|compact],-li"
});
//-->
</script>
Ceci a pour objet d’appeler les scripts de TinyMCE en mode simple sur les zones de saisie multiligne (textaréa) des formulaires de la page, c’est à dire avec une barre d’outil minimale (gras, italique, souligné, barré, et listes).
Personnellement je préfère ne pas appeler les barres complexes (dites « barres developper »), avec des mises en formes possibles qui risquent de casser la charte graphique du site, surtout si cet éditeur est destiné à des néophytes. Tout ce qui relève des polices de caractère, des couleurs, des alignements, etc. est normalement déjà inclus dans la feuille de style du site lui même …
Notez que dans cet exemple j’ai appliqué les règles de nettoyage du code Word, dont j’avais déjà parlé sur ce billet, mais l’attribut valid_elements est facultatif. L’absence de toute autre précision implique que l’éditeur est appelé en mode « simple »
5. Il n’y a plus qu’à créer le formulaire lui même, là rien de spécial, si ce n’est que tout champ « textarea » va maintenant se voir gratifier d’une barre d’outil :
<form id="form1" method="post" action="insert.php">
<div><label>
Insérez votre commentaire<br />
<textarea name="comment" id="comment" cols="45" rows="5"></textarea>
</label>
<br />
<input name="Submit" type="submit" Value="envoyer" /></div>
</form>
6. Dernière étape pour les puristes, la traduction en français des info-bulles des icones de l’éditeur, qui sont en anglais par défaut.
Le hic, c’est que les traductions FR données sur le site de TinyMCE ne fonctionnenet pas en mode « simple ».
Il faut donc mettre un tout petit peu les mains dans les fichiers de programme…
Cherchez le fichier en.js qui se trouve dans le répertoire tiny_mce\themes\simple\langs\, et remplacez le texte qui s’y trouve par celui-ci :
tinyMCE.addI18n('en.simple',{
bold_desc:"Gras (Ctrl+B)",
italic_desc:"Italique (Ctrl+I)",
underline_desc:"Souligne (Ctrl+U)",
striketrough_desc:"Barre",
bullist_desc:"Liste non numerotee",
numlist_desc:"Liste numerotee",
undo_desc:"Annuler la derniere action (Ctrl+Z)",
redo_desc:"Refaire la derniere action (Ctrl+Y)",
cleanup_desc:"Debugguer le code"
});
ou toute autre traduction à votre convenance… Enregistrez et c’est bon pour la traduction.
Et voilà… la première partie est finie, vous avez désormais ceci sur votre page :
Comment récupérer la variable formatée ?
Le plus simplement du monde … Il s’agit d’une variable de type text que l’on peut manipuler ou insérer dans une base des données.
Exemple du code de récupération de la page insert.php de notre exemple précédent, avec une insertion dans une base des données :
<?php
$comment=addslashes($_POST['comment']);
include("connect.inc.php"); // ici le script de connexion à la base des données
$requete="INSERT INTO ma_table (comment) VALUES ('$comment')";
$result = mysql_query($requete) or die('Erreur SQL !<br />'.$requete.'<br />'.mysql_error());
mysql_close();
header("location: editeur.html");
?>
ou encore, pour un simple affichage de la variable sur la page insert.php : <?php echo $_POST['comment']; ?> …!
voili, voilou, that’s all folk ! :]
oui, cet article date de 2009
Bonjour,
j’ai téléchargé les fichiers, mais ça ne fonctionne pas.
ça ne marche qu »avec la vesion cdn
Bonjour, j’espère que vous n’allez pas vous étonner de mon souci après tout ce temps. Chez moi après envoi rien ne bouge, c’est dire que le texte ne s’enregistre pas dans la base.
Bonjour et merci pour ce tuto
Par contre je rencontre un souci: lorsque je souhaite éditer mes news, le texte n’apparait pas dans la zone texte du BBcode. Pourtant, les News apparaissent bien sur ma page d’accueil, comme demandé mais pas moyen de les modifier. Quel est le souci ? Je précise que j’ai installé la dernière version dispo sur le site officiel..
Merci pour votre aide.
Merci pour tout c’est genial!
Bonjour SuperGLue,
Quelle page ? Celle de ce site ? Celle de votre site ? Celle de TinyURL ?
Bonjour,
Quand je lance la page, avast détecte une « url malveillante »
Bonjour Nicolas. J’ai écrit un billet là dessus, regarde là : https://www.webtolosa.com/2011/12/19/les-copier-coller-ne-fonctionne-pas-avec-lediteur-de-texte-de-mon-cms/
Bonjour,
nous avons installé tinyMCE sur notre intranet,
nous avons le problème bloquant suivant : on ne peut pas faire de copier/coller sans il y est un ajout de caractères intempestifs(balise html),
existe t-il un moyen de pallier ce problème s’il vous plaît ? (sur firefox et ie)
cordialement,
nicolas
pour moi ca marche pas
j’arrive pas a voire le gras italic et centre
tu as bien inséré ton code directement ou depuis un fichier texte, et pas en copier-coller de Word ou d’un blog ? Parceque les apostrophes « et les quotes » ce n’est pas pareil en terme de code, autour de ton textarea par exemple…
Pour les accents, regarde tes en-têtes, c’est sans doute un problème d’encodage UTF8 des pages d’envoi et de reception ?
Bonjour a tous je viens d’installer tiny et comme tous le monde j’ai quelques petits soucis
je n’utilise pas de bdd pour ma page voici le code pour rediger mon texte pour ma page reglement depuis mon admin :
!–
tinyMCE.init({
mode : « textareas »,
valid_elements : « em/i,strike,u,strong/b,div[align],br,#p[align],-ol[type|compact],-ul[type|compact],-li »
});
//–>
Réglement
Modifier le Reglement
Cette option vous permet de modifier votre Règlement sans passer par le FTP.
J’ai donc une page reglement sur mon site mais lorsque je valide mon texte depuis l’admin mon design et css n’est pas pris en compte, voici ce que cela me donne sur ma page reglement sur notpad++ des que je valide, et sur mon site « reglement du site de … » sans design:
Règlement du site de …
De plus comment faire pour que les accents resorte bien sur le site.
Merci a tous pour vos reponse.
Harri, au lieu d’utiliser une base de données, tu peux utiliser un fichier texte qui va stocker les informations de la textarea.
exemple :
if (isset($_POST[‘texte’]))
file_put_contents( ‘pages/adm/note.txt’,$_POST[« texte »]);
?>
Bonjour à tous,
Pour mon cas ça marche nickel, mais comme d’habitude, un problème. Quand j’écris dans le textarea et que je clique « envoyer », tout marche bien et le texte apparait dans la page où je voulais. Mais si je sors de cette page et que je me reconnecte, le texte n’apparait plus.
Je suis obligé de partir sur la création d’une base de donné (que je comprends pas grand chose) ? Ou est-ce qu’il y a un code simple pour maintenir ce texte ?
Ce textarea serait utilisé par une personne qui n’a pas trop de connaissance informatique et qui mettrait a jour son site (une mise à jour tres simple que avec tu texte).
Merci pour votre aide
comment ajouter l’option Link à cet éditeur ?
bonjour
moi j’ai un petit problème depuis un moment, c’est que le bouton souligne et rayer ne fonctionnent pas.
J’ai essayé le technique de Jérôme mais ça ne fonctionne pas.
Que faire?
merci
Merci beaucoup ça nous aide dans le développement partie admin de notre site merci une autre fois !
je peux pas vous remercie,
mais merci super infiniment
cooolllllll
Bonjour
Merci pour le tuto collage/word, impeccable.
Bon courage à tous
Yannick
pas vraiment, mais si c’est un intranet il y a une session avec un login/mot de passe pour entrer. Comme toutes les sessions par défaut elles sont limitées dans le temps, probablement par cookie (tu trouveras des tas de tutos là-dessus sur Google) : tu ne crois pas que cela viendrait de là ?
Essaye soit de rallonger la durée de la session (pas très sur… ça dépend du degré de sécurité que tu veux) soit de mettre un petit compteur en JS qui déclanche un pop-up d’avertissement type « Attention, fin de session dans xx minutes : votre saisie deviendra invalide »
Salut,
J’ai un petit soucis avec l’utilisation, je coirs, de TinyMCE.
J’ai créé un petit intranet pour la gestion des jobs de la société dans laquelle je travaille.
PHP 5.3.3 et MySQL 5.0.91.
J’ai créé une page avec un TextArea.
Lorsque l’utilisateur encode des info dans ce champ et qu’il laisse « trop longtemps » cette page ouverte, rien ne s’enregistre.
Je sais… le « trop longtemps » est un peu vague. Je n’ai jamais chronométré.
Certaines personnes ici rédige directement leurs info dans ce champs, ce qui peut prendre parfois un peu de temps…
Une idée?
Olby.
Cela vient probablement de la façon dont tu saisis le texte : en particulier ça marche comme pour Word pour les retours à la ligne.
[enter] > nouveau paragraphe avec saut de ligne (soit par exemple : « je saute
une ligne »)
[Ctrl+enter] > juste un retour chariot sans saut de ligne (soit par exemple : « je retourne
à la ligne »)
Évite aussi les copier-coller depuis Word ou autre traitement de texte, ça c’est la cata. chaque fois :getlost:
bonjour;
je veut bien garder ma mise en page aprés récupération de la base de données car je trouve que il fonction pas avec la mise en page faite .
merci de m’aider.
@Jérômr
merci de ta contribution
En fait, j’ai fini par trouver, pour ceux que ça intéresse :
valid_elements : « em/i,strike,u,span[!style],strong/b,div[align],br, #p[align],-ol[type|compact],-ul[type|compact],-li »
C’est le « span[!style] » qui autorise le soulignement. J’espère que ça n’aura pas d’effets non souhaités en autorisant d’autres balise avec « span ».
aie aie, pour mon commentaire précédent, le forum a interprété mon code html donné en exemple. Je reprends :
Le pense que cela vient du fait que la balise « u » n’est pas générée par Tinymce comme « b » ou « strong ». Il utilise pour souligner la balise « span » avec en attribut « style » et le code css « text-decoration », puis la valeur « underline » (j’espère que c’est clair). J’ai bien essayé d’ajouter « span » dans la liste des balise à intégrer dans le valid_elements…rien n’y fait
Merci pour vos réponses !
Bonjour et bravo pour ce tuto clair.
Après avoir utilisé valid_elements, ça marche beaucoup mieux, sauf que le « souligné » n’est plus enregistré lorsque je teste Tinymce…le gras, l’italique, tout fonctionne bien et est enregistré en base de données…pourquoi pas le souligné ? Le pense que cela vient du fait que la balise « u » n’est pas générée par Tinymce comme « b » ou « strong ». Il utilise pour souligne « texte souligne ». J’ai bien essayé d’ajouter « span » dans la liste des balise à intégrer dans le valid_elements…rien n’y fait
Quelqu’un a une idée ?
Merci !
Bonjour,
Bon, finalement j’ai réalisé une bidouille pour insérer une image sans avoir les problèmes évoqués ci-dessus lors d’une modification ou l’insertion impossible d’un code img src=… dans le textarea de Timy.
J’inverse la proposition si vous voulez la bidouille dites-le moi ici ou un mail md at ouvaton.org
A+
Michel
Je recommence l’édition de mon texte car des mots ont disparu le rendant incompréhensible.
Au sujet des images.
Il semblerait que la partie upload des images soit payante.
Mon problème :
Lorsque je mets dans le texte une insertion d’image classique (img src etc) ça fonctionne. Par contre lors de la modification du texte Timy modifie l’url en y ajoutant le nom du site et le nom du dossier. De plus lors de la sauvegarde du texte modifié l’insertion de l’image en code img scr=… disparaît.
Je pense faire une bidouille en php (du genre upload à part, numérotation des images dans le dossier images et insertion d’un img1 par exemple qui permet d’aller chercher l’image 1 dans le dossier images et remplacer ce img1 par <img src="..), mais bon si vous avez plus simple, je suis preneur.
Cordialement,
Michel
Tiny MCE ne permet pour l’instant pas ça (à ma connaissance ?) : ce n’est pas génial, il faut donner l’URL de l’image uploadée avec un client FTP par exemple, ou depuis un champ d’upload sur ta page. C’est à donc toi de faire un champ d’upload en PHP par exemple…
Bonjour,
je galère depuis plusieurs jours pour intégrer la possibilité de choisir ses images et même de les loader sur le serveur lors de l’intégration de celle-ci.
J’ai essayé tout un tas de script sur le net mais rien ne fonctionne.
Existe-t-il un moyen de faire cela.
Merci d’avance
Bonjour,
J’utilise le script ci dessus, aucun problème pour l’affichage du module "basic" sous mes textareas, mais le code Word "MSO…" est tout de même enregistré dans la table de ma base de données… ??????
merci,
Seb
Non c’est bien des TEXT dans la base de données. Ceci dit je n’ai plus le problème alors que je n’ai rien fait de spécial ! Je croise les doigts
Merci en tout cas
Bonjour,
J’ai installé tinymce dans l’admin de mon site, par contre quand je récupère le texte sur une page, la mise en page ne correspond pas à celle que j’ai fait depuis l’admin. J’ai surtout un problème avec les alignements. Je n’arrive pas à comprendre d’ou ça peut venir.
Merci d’avance
Julien
Ludovic, cela vient assez probablement du type de ton champ dans la base des données. Vérifie, il doit être en tinytext ou on varchar 250 caractères, mets le en TEXT par exemple et tu n’auras plus de probleme.
Bonjour à tous !
Voila j’ai un souci avec cet outil et je ne sais plus quoi faire ~:( Je voudrai pouvoir enregistrer un texte saisi, dans une base de donnée (à travers un "textarea" donc) et lorsque j’essaie de saisir une quantité de texte supérieure à 2 lignes cela ne s’enregistre pas dans la base de donnée, ou une fois sur 15 ^^ quelqu’un a-t-il déjà rencontré ce problème ?
Merci par avance
Ludovic Dupraz
Bonjour,
Pour répondre à une de question de valentine42_7 (samedi 7 novembre 2009 à 09:24), il faut en effet écraser en.js par fr.js mais il faut que tu changes tout tes "en" par "fr" dans le fichier tiny8mce.js,
voilou.
En tous cas un grand merci de m’avoir fait connaîter ce joli et performant petit outil :))
NEVI
Merci de votre réponse.
– Pour la traduction FR, tu as ce qu’il faut dans le texte ci-dessus pour "tiny_mce\themes\simple\langs\"
– Pour les inputs de type text, pas possible à ma connaissance
– Pour limiter la taille des caractères saisis dans un champ de textarea tu peux soit passer par CSS qui émule un champ de texte en limitant sa taille, soit par javascript pour compter les caractères.
Par exemple pour le code CSS :
<html>
<head>
<style>
<style>
div.test{
width:100px;
height:100px;
overflow:hidden;
font-family:Courier new;
font-size:medium;
margin-top:5px;
word-wrap : break-word;
}
</style>
</head>
<body>
<div class=test>Contenue de ton div.</div>
</body>
</html>
Et pour le javascript :
<html>
<head>
<script>
function limite(zone,max) {
if(zone.value.length>=max){zone.value=zone.value.substring(0,max);}
}
</script>
</head>
<body>
<form name="menu1">
<div><textarea name="zone2Text" cols="40" rows="10" onKeyUp="limite(this,255);" onKeyDown="limite(this,255);">Ton texte ici.</textarea></div>
</form>
</body>
</html>
Bonjour,
j’ai remplacer le code en.js par celui que vous nous suggérer mais à l’affichage, les icônes apparaissent en anglais: B(bold) U(underline) I(italic) au lieu de G(gras) S(souligné) I(italique). Je ne sais pas pourquoi. Auriez-vous une idée?
Autre question, savez-vous s’il est possible d’appliquer le tinymce sur des inputs?
Le problème sur les textareas c’est que je ne sais pas comment empêcher l’utilisateur d’écrire des caractères à l’infini, alors que l’input on met un maxlength limitant le nombre de caractères et on ne peut plus écrire ensuite.
Je vous remercie d’avance et vous félicite pour cette explication très claire sur le tinymce.
Valentine42_7
ben pour moi la mise a jour en FR n’a pas marché… par contre la technique d’ici tres bien :bravo: merci !
Il existe un pack langue FR pourtant
. Mes infos sur icônes apparaissent en français.
Comment faire ? Simple :
1- télécharger le pack langue français sur le site officel (ne pas cliquer sur XML, mais cocher le checkbox, puis cliquer sur "download" tout en bas de la liste de langues disponibles.
2- dézipper ce pack, PAS AVEC WINDOWS QUI BLOQUE TOUS LES FICHIERS, mais par exemple en utilisant 7-zip,
3- copier les dossiers dézippés "langs", "plugins" et "themes" sur votre site
et le tour est joué (en français :)) )
oui… utilise la fonction stripslashes() de PHP lorsque tu récupères ta variables
Merci pour toutes ces informations !
par contre je me heurte encore à un petit problème sur TinyMCE :
J’enregistre les informations directement dans des fichiers texte et lors de l’enregistrement des informations, un antislash se place automatiquement devant chaque apostrophe. Il y a t’il une possibilité d’éviter ceci ?
c’est simple, c’est clair, bravo et merci.
purée je cherchais ça. Super mec c’est parfaitement clair :))