[Plugin] TinyMCE : Editeur pour articles et pages statiques
Bonjour,
Pour éditer vos articles et vos pages statiques, voici TinyMCE. Même s'il existe déjà pas mal de plugins pour cela, celui présente quelques avantages :
- La blibliothèque en javascript minifiée de TinyMCE est directement chargée depuis le Cloud via le réseau de serveurs en cache ou plus communément la technologie CDN. Conséquence, les mises à jour de la bibliothèque se font automatiquement sans effort (seamless en anglais)
- Pour le gestionnaire de fichiers, il utilise directement le gestionnaire de médias de PluXml medias.php. Vous retrouvez donc un interface connu.
- Cette implémentation de TinyMCE utilise un plugin externe basé sur Codemirror pour afficher le code HTML, PHP ou Javascript avec la coloration syntaxique. De plus il bénéficie de l'auto-complétion des balises HTML et du pliage de code (folding)
- le plugin utilise la dernière release de TinyMCE, soit 4.0
- Vous avez la possibilité de personnaliser son interface si vous êtes très courageux
Télécharger la dernière version du plugin
Accès au dépôt de plugins
Se tenir informé des dernières mises à jour en s'abonnant au flux RSS
- 23/04/2020 - *Version 2.3.0* Fix problèmes linguistiques avec PluXml 5.8.3
- 29/11/2017 - Version 2.2.1 fix pour les liens articles, statics, ... - Amélioration importante de codesample voir billet #135
- 04/11/2017 - Version 2.1 Importante révision de code - gestionnaire pour les articles, catégories, tags et pages statiques comme pour les médias - tinymce version 4.7.1
- 12/03/2016 - Version 1.502 - correction d'un bug dans config.php
- [del]11/03/2016 - version 1.501 - correction pour PHP 5.4[/del]
- [del]11/03/2016 - version 1.50 - différentes fonctionnalités supplémentaires (voir billet #100)[/del]
- 09/03/2016 - Version 1.431 - Correction dans tinyMCE.php pour le test de version de Pluxml - Maj du lien du CDN
- [del]03/03/2016 - version 1.43 - le fichier tinyMCE-pluxml.js est enregistré dans le dossier plugins (Pb droits écriture) - Nouveau calcul pour l'option document_base_url de TinyMCE (bogue sur Nginx/Debian avec lien symbolique ?) (billet #87)[/del]
- [del]02/03/2016 - version 1.42 Prise en compte de la version de Pluxml pour la version 5.5 (voir billets #59, #78, #83)[/del]
- [del]29/12/2015 - version 1.41 - correction pour le fichier d'aide (billet #54)[/del]
23/12/2015 - version 1.4
Utilisation TinyMCE 4.3 - voir billet #45 pour plus de détails
avec la bibliothéque de codemirror intégré : http://kazimentou.fr/pluxml-plugins2/plugins/tinyMCE-1_4-codemirror.zip
- 01/10/2015 - version 1.3
Mise à jour pour PluXml 5.4
Utilise TinyMCE 4.2
Ajout d'un sélecteur (règles CSS) pour choisir le textarea à éditer avec TinyMCE.
Ajout de 2 thèmes.
- 10/04/2014 - version 1.2
Extension du panneau de config pour sélectionner chaque plugin selon chaque utilisateur. Possibilité de définir les options générales ou pour chaque utilisateur. Commentaire et exemple pour chaque plugin.
Possibilité de régler les paramètres si le plugin est inactif.
- 07/04/2014 - version 1.1
Ajout d'un panneau de config:
On peut (dés-)activer l'utilisation de TinyMCE pour les articles, les pages statiques, les modéles, les commentaires, le plugin externe Codemirror selon le profil utilisateur, l'utilisation du CDN, choisir un skin, saisir des options supplémentaires à envoyer à Tinymce.
Quelques règles CSS pour améliorer la lisibilité dans l'éditeur.
Pour éditer vos articles et vos pages statiques, voici TinyMCE. Même s'il existe déjà pas mal de plugins pour cela, celui présente quelques avantages :
- La blibliothèque en javascript minifiée de TinyMCE est directement chargée depuis le Cloud via le réseau de serveurs en cache ou plus communément la technologie CDN. Conséquence, les mises à jour de la bibliothèque se font automatiquement sans effort (seamless en anglais)
- Pour le gestionnaire de fichiers, il utilise directement le gestionnaire de médias de PluXml medias.php. Vous retrouvez donc un interface connu.
- Cette implémentation de TinyMCE utilise un plugin externe basé sur Codemirror pour afficher le code HTML, PHP ou Javascript avec la coloration syntaxique. De plus il bénéficie de l'auto-complétion des balises HTML et du pliage de code (folding)
- le plugin utilise la dernière release de TinyMCE, soit 4.0
- Vous avez la possibilité de personnaliser son interface si vous êtes très courageux
Télécharger la dernière version du plugin
Accès au dépôt de plugins
Se tenir informé des dernières mises à jour en s'abonnant au flux RSS- 23/04/2020 - *Version 2.3.0* Fix problèmes linguistiques avec PluXml 5.8.3
- 29/11/2017 - Version 2.2.1 fix pour les liens articles, statics, ... - Amélioration importante de codesample voir billet #135
- 04/11/2017 - Version 2.1 Importante révision de code - gestionnaire pour les articles, catégories, tags et pages statiques comme pour les médias - tinymce version 4.7.1
- 12/03/2016 - Version 1.502 - correction d'un bug dans config.php
- [del]11/03/2016 - version 1.501 - correction pour PHP 5.4[/del]
- [del]11/03/2016 - version 1.50 - différentes fonctionnalités supplémentaires (voir billet #100)[/del]
- 09/03/2016 - Version 1.431 - Correction dans tinyMCE.php pour le test de version de Pluxml - Maj du lien du CDN
- [del]03/03/2016 - version 1.43 - le fichier tinyMCE-pluxml.js est enregistré dans le dossier plugins (Pb droits écriture) - Nouveau calcul pour l'option document_base_url de TinyMCE (bogue sur Nginx/Debian avec lien symbolique ?) (billet #87)[/del]
- [del]02/03/2016 - version 1.42 Prise en compte de la version de Pluxml pour la version 5.5 (voir billets #59, #78, #83)[/del]
- [del]29/12/2015 - version 1.41 - correction pour le fichier d'aide (billet #54)[/del]
23/12/2015 - version 1.4
Utilisation TinyMCE 4.3 - voir billet #45 pour plus de détails
avec la bibliothéque de codemirror intégré : http://kazimentou.fr/pluxml-plugins2/plugins/tinyMCE-1_4-codemirror.zip
- 01/10/2015 - version 1.3
Mise à jour pour PluXml 5.4
Utilise TinyMCE 4.2
Ajout d'un sélecteur (règles CSS) pour choisir le textarea à éditer avec TinyMCE.
Ajout de 2 thèmes.
- 10/04/2014 - version 1.2
Extension du panneau de config pour sélectionner chaque plugin selon chaque utilisateur. Possibilité de définir les options générales ou pour chaque utilisateur. Commentaire et exemple pour chaque plugin.
Possibilité de régler les paramètres si le plugin est inactif.
- 07/04/2014 - version 1.1
Ajout d'un panneau de config:
On peut (dés-)activer l'utilisation de TinyMCE pour les articles, les pages statiques, les modéles, les commentaires, le plugin externe Codemirror selon le profil utilisateur, l'utilisation du CDN, choisir un skin, saisir des options supplémentaires à envoyer à Tinymce.
Quelques règles CSS pour améliorer la lisibilité dans l'éditeur.
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
le plugin se marie aussi tres bien avec le plugin html5uploader... cela nous fait donc une alternative légère aux plugins spxtinymce (10 Mo à installer) ou ckeditor (6 Mo à installer) , qui sont vraiment très bien mais sont plus lourds à charger
le couple "html5uploader" + "tinymce" = 500Ko environ avec un chargement de fichiers en drag and drop, je dis : super !
mais, une demande : dans tiny mce, il n'y a pas la possibilité de rajouter facilement, en cochant un champ, le positionnement des images (float : left ou float : right)... ce que ckeditor fait...
on ne pourrais pas rajouter cette fonction dans le pop-up "images" ?
De plus : le pop-up "image" qui apparait est le gestionnaire de fichiers de pluxml, mais amputé des fonctions de suppressions de fichier... donc, si j'uploade des fichiers depuis ce pop-up, et si je m'aperçois que j'ai fait une erreur, je ne peux les supprimer depuis la même interface (je dois ressortir de tinymce, pour retourner dans le gestionnaire "classique" de médias de pluxml pour y supprimer les images, en cochant les cases manuellement...)
on ne pourrait pas faire la même chose depuis le pop-up qui apparait dans tinymce (c'est à dire avoir la version totale du gestionnaire de médias de pluxml avec toutes les fonctionnalités...) ?
en somme, l'équivalent de spxtinymce... mais en moins lourd à installer ...
oui, je sais, je veux tout !
L'alignement des images à droite ou à gauche est une demande qui a été faite sur les forums de TinyMCE. La solution proposée est d'utiliser les styles dans la balise <img>.
Dans la barre de menu, aller Format, puis sur formats, puis choisir Image Left pour gauche, ou Image Right pour Droite. (Lignes 132 et 133 dans TinyMCE qui n'ont pas peur de plonger dans le code).
Pour popup "Images", c'est exactement le fichier medias.php de PluXml. C'est pour cela que html5uploader fonctionne sans broncher. Le plugin lui modifie seulement 2 trucs.
[list=*]
[*]Un script en javascript modifie son comportement quand on clique sur un lien[/*]
[/list]
[list=*]
[*]Une feuille de style cache les parties inutiles de la page, notamment le menu d'administration plus d'autres choses.[/*]
[/list]
J'avais pousser plus loin pour d'autres choses qui me semblaient inutiles comme créer un nouveau dossier, supprimer des images, regénérer les miniatures. Par habitude, je charge tous les images dont j'ai besoin avant de rédiger un article, mais avec ta remarque, ce n'est pas le cas de tout le monde.
Autre remarque : la bibliothèque de TinyMCE se charge directement depuis un réseau de serveurs. Cela a plusieurs avantages :
- la bibliothèque se charge depuis le serveur le plus proche de ton visiteur
- Moins d'octets à sortir de ton serveur, surtout s'il est low cost ou gratuit
- les mises à jour se font de manière transparente jusqu'à la prochaine version.
Je ferai les modifs rapidement en tenant compte de tes remarques.
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Il n'y a pas toutes les options dans ce plugin non? Par exemple, Format > Formats > je n'ai rien à part Image left et Image right
C'est normal?
Merci
un des gros avantages de spxtinymce c'est la possibilité de paramétrer les menus et la barre d'outils en fonction des utilisateurs. Ce qui est trés pratique, en particulier lors de travail à plusieurs.
@Kristen,
C'est un peu voulu. Par exemple, pour la couleur du texte, j'estime que c'est au créateur du thème à s'en occuper, sinon chaque rédacteur va y aller de sa couleur et briser l'harmonie esthétique du site. Ceci dit, ce ne sont que des options à cocher dans un panneau de config.
Peux-tu préciser ce qu'il te manque ?
@cpalo,
Quand je vois que toutes les options sont cochées par défaut, je me demande si cela sert.
La seule option qui me semble utile est l'éditeur de texte avec la coloration syntaxique.
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Si cela peut servir lorsqu'on met le site en production avec diverses catégories d'utilisateurs.
Cela permet de faciliter la prise en main en supprimant facilement tout ce qui est inutile pour un utilisateur.
Il faut absolument éviter par exemple qu'un "simple" rédacteur "s'amuse" à changer les couleurs puisqu'à ce moment là il changerait la charte graphique.
Mais cette utilité n'est réelle que si il y a plusieurs utilisateurs avec des droits différents.
Sinon dans le cas d'un seul utilisateur le plus simple est effectivement d'aller directement paramétrer l'éditeur.
C'est ce que commence à faire car je voudrai faire un menu avec directement le choix de certains styles du thème.
Ce qu
Mais que faut-il télécharger exactement?
[del]Et comment on l'intégre dans l'administration de pluxml puisque ce n'est pas un plugin plx?[/del]
Est-ce qu'il y aurait une manière d'intégrer directement (comme dans CKeditor) syntaxHighLigther ?
OK d'accord. En fait, il ne me manque rien, c'est juste une remarque que je me suis faite en comparant ton plugin avec celui du site "source" http://www.tinymce.com/
Par contre, quand tu parles d'options à cocher dans un panneau de config, tu veux parler de cette page http://www.tinymce.com/download/custom_package.php
Si oui, une fois téléchargée l'archive, on fait quoi? Par curiosité.
Merci.
Rien. Tous les plugins sont chargés par défaut depuis Internet via CDN.
C'est juste pour accéder à l'aide de chaque plugin. Certains ont des options ou peuvent avoir un bouton sur la barre d'outil.
Are you reading english ?
Pour le choix de plugins de chaque utilisateur, je tiens compte de tes remarques mais le panneau va faire un peu usine à gaz comme le plugin concurrent ou plutôt barre HLM ou clapier
Pour SyntaxHighlighter, je suis surpris. Il ne fait que du coloriage. Ce n'est pas un éditeur de code comme Codemirror (complétion balises HTML, folding,..) Ceci dit, oui tu peux le mettre avec tinyMCE. Prends modèle sur Codemirror et mets les bonnes options.
@Kristen,
Je parlais du panneau d'options à cocher du plugin concurrent.
Après, cela dépend de ce que tu télécharges :
- Avec le choix par défaut de TinyMCE, ton archive va contenir un gros fichier tinymce.min.js file à mettre dans plugins/tinyMCE/tinyMCE/.
après dans tinyMCE.php, il faut faire pointer la variable $tinyMCE_lib vers ce gros fichier
- Sinon on peut laisser les plugins indépendants, il faut tous les installer dans le dossier tinyMCE comme Codemirror et faire pointer $tinyMCE_lib vers le dossier tinyMCE.
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Et si un jour le serveur de TinyMCE connait des ralentissements, voir indisponibilités, ça risque de créer des ralentissements sur le site qui a ce plugin, non ?
Perso, j'aime pas trop être dépendant de serveurs externes à mon hébergeur ...
Non. Ce n'est pas un serveur mais un réseau de serveurs en cache. (voir le lien sur CDN plus haut)
En clair, le contenu du serveur maitre de TinyMCE est dupliqué sur plusieurs serveurs caches.
C'est prévu pour accélérer la vitesse du net en évitant que tout le monde se rue sur le même serveur en empruntant la même autoroute de l'information.
Au pire si le serveur maitre tombe en panne, les serveurs caches empêcheront de le voir.
Le seul risque que tu as, c'est que quand ta box (Free,Neuf,B,...) tombe en panne tu ne verras plus les pages sur ton serveur en local. Par contre, pas de souci pour les visiteurs, à moins d'avoir ton site hébergé dans une framboise Π à la maison
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Autant pour moi!!!
SyntaxHightLighter c'est pour la mise en forme css de l'affichage de code dans les pages web.
Et donc codemirror serait plus pour remplacer editarea que j'utilise actuellement pour travailler en mode code lors de la redaction d'articles ou de pages statiques.
L'implémentation de codemirror dans TinyMCE c'est toi qui l'a faite ou c'est une option qu'on trouve dans TinyMce. Car personnellement je ne voudrai pas utilisé la version CDN de TinyMCE.
Bon dimanche
En fait j'ai la réponse dans ton post précédent (#10) pour ne pas utiliser la version CDN, et donc je peux utiliser ton plugin avec codemirror déjà intégré.
Cordialement
Et une facilité de personnalisation.
En fait, sans tomber dans une usine à gaz, ce que je cherche ( pas forcément ce système de case à cocher) c'est de permettre que suivant son statut d'utilisateur, on ait une version différente de TinyMce. Alors est-ce qu'il faut que j'installe plusieurs fois le plugin dans un dossier différent et qu'on puisse arriver à paramétrer les profils utilisateurs pour que cela soit l'une des copies des plugins qui soit activée? Ou une autre solution?
Bonne fin de we
Merci du retour.
Il n'y a pas d'intégration de codemirror dans la version standard de TinyMCE. Dans leur jargon, c'est un plugin externe que j'ai trouvé sur un autre site mais que j'ai remanié.
Si tu veux mettre toute la bibliothèque de TinyMCE sur ton site, il suffit de le rajouter avec les plugins internes, en respectant l'arborescence des dossiers.
Qu'as tu contre une version CDN ?
Les mises à jour se font automatiquement et TinyMCE se télécharge plus vite et on contourne certaines limitations des navigateurs.
Pour la personnalité du plugin en fonction du profil rédacteur, j'ai laissé un peu l'affaire en suspens pour améliorer mon plugin myPager. C'était plus facile.
Pour TinyMCE, il n'y a que 44 plugins
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Je n'ai rien contre une version CDN; En fait je ne me suis pas penché sur la question et c'est plus une habitude : l'appel à jquerry ou aux polices de google, je le fais à partir d'une version installée dans les fichiers du site et non pas à la version en ligne.
Si je ne veux pas faire appel à la version CDN, je dois donc remplacer: par quoi avant /plugins/tinymce/ pour que cela fonctionne et en local et en ligne.
Et en fait après reflexion, cela est bien que tout le monde ait pratiquement la même version ( excepté l'accès au mode code). Cela permet ainsi à l'administrateur de "tester" la qualité de la charte graphique et l'ergonomie pour saisir du contenu. Et s'il manque des menus d'en rajouter ou de les adapter à la réalité de son équipe et de son site.
Et donc d'avoir plutôt un tinymce personnalisé en fonction du site.
Par contre la gestion des utilisateurs est déjà gérée par pluxml ou des plugins ( suppression de fichiers, validation des commentaires, etc..) donc pas forcément utile d'en rajouter.
Cordialement
/*
* pour avoir la bibliothèque de tinymce en local :
* aller sur le site http://www.tinymce.com/download/custom_package.php
* télécharger un package "Basic package" en ajoutant des plugins si besoin ou "Full package"
* Ouvrer l'archive zip téléchargée avec le gestionnaire de fichiers
* sélectionner tout le contenu du dossier tinymce de l'archive
* coller-le dans le dossier tinyMCE du plugin
* sous Linux, corriger les droits d'accès aux fichiers par : "sudo chmod -R a+rX *" depuis le dossier du plugin
* décommenter la ligne ci-après pour la variable $tinyMCE_lib
* */ La modif de $tinyMCE_lib se fait dans le fichier tinyMCE.php après la ligne 75.
AMHA, c'est bien s'embêter la vie, à moins de vivre sur une île déserte loin de tout.
Vous ne bénéficiez plus des mises à jour automatiques faites par www.tinymce.com, ni de la vitesse de téléchargement des serveurs en réseau !!
C'est le même souci avec jQuery et les polices de Google
Donc utilisez les versions en CDN !!!
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Je ne m'étais pas encore interessé à ce sujet. Tu m'auras permis de la bonne lecture ce matin.
Effectivement cette technique paraît très séduisante, en particulier pour les sites en production.
De même que d'installer son propre CDN dans le cas de sites réalisés avec wordpress ou joomla.
Bon début de journée
Oui, j'ai vu des bugs de ce genre aussi. Cela m'arrive quand je modifie un attribut d'une balise html.
Pour contourner le problème pour l'instant, je clique en dehors de la balise avant de cliquer sur OK.
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Quand je reviens après en mode code, il y a à nouveau ce paragraphe vide en fin de code.
Je confirme, même problème. ]:D
Nouvelle version 1.1
On peut désactiver le plugin codemirror selon le profil utilisateur.
Idem pour les articles, les pages statiques, les commentaires, les modèles.
Tinymce n'aime pas le php. Si vous avez du code PHP à entrer dans vos pages statiques, je vous préconise d'utiliser à la place de TinyMCE, directement le plugin Codemirror.
En plus, quelques règles CSS pour améliorer la lisibilité de l'éditeur.
Bon amusement.
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
Merci pour ce travail.
Je vois bien l'utilité de désactiver ou pas codemirror suivant les profils, et je souhaitais cette option.
Par contre plus réservé pour les articles, etc. Parce que les utilisateurs pourront toujours y avoir accès par le biais de pluxml san spasser par tinyMce.
Par contre cela peut me servir peut etre dans ce que je voulais faire ( cf mes posts: qu'on ait des tinyMce différents suivant le profil).
Pour cela il faudrait que j'installe par exemple deux fois TinyMce avec deux noms différents ( est-ce possible ?) et qui auraient une configuration différente pour les menus et barre d'outils.
Cordialement
Simple, léger et configurable, que du bons. :cool:
A insérer bien sur dans le wiki sur la page des plugins.
Et quand c'est bien on dit merci, donc MERCI à toi.
Pour les articles, cela ne me coûte aucun effort par rapport aux pages statiques. Donc c'est cadeau.
Comme on ne sait jamais tout par avance ....
Tu peux dupliquer 2 à 5 fois TinyMCE pour coller au plus près des différents profils, mais il faut changer le nom à plusieurs endroits (nom de fichiers, de classe, dans les feuilles de style). En fait tu t'exposes à des bugs.
J'ai en préparation une autre version du plugin où on pourra régler finement le plugin en fonction du profil utilisateur.
Il y a un gros morceau de fait mais il reste encore un peu de taf.
Tu peux en avoir un aperçu ici télécharger la démo mais ce n'est pas opérationnel.
Donc patience...
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2
je partage l'avis de Braddy..
Avoir en plus, assez facilement la possiblité de rajouter certains réglages perso ou menus....ça c'est du bonheur...
Par contre pour "Pour les articles, cela ne me coûte aucun effort par rapport aux pages statiques. Donc c'est cadeau." . Ce que je voulais dire en fait c'était "Idem pour les articles, les pages statiques, les commentaires, les modèles.". C'était que si dans le plugin on paramétrait certains droits et qu'après directement dans le panneau d'administration on pouvait passer outre via pluxml, c'était un peu embetant.
Je me doutais bien que simplement renommer le plugin n'allait pas suffire!!!
Cordialement et encore merci pour ton travail
Nouvelle version du plugin :
Version 1.2
Extension du panneau de config pour sélectionner chaque plugin selon chaque utilisateur. Possibilité de définir les options générales ou pour chaque utilisateur. Commentaire et exemple pour chaque plugin.
Possibilité de régler les paramètres si le plugin est inactif.
Possibilité de désactiver l'extension
Si vous avez un rédacteur très intrépide, vous pouvez le brider en désactivant tous les plugins.
Bon amusement.
Accès à mon dépôt de plugins et thèmes
installe PluXml plus vite que ton ombre avec kzInstall2