[Plugin] TinyMCE : Editeur pour articles et pages statiques

1235

Réponses

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2017 modifié
    Bonjour,

    Publication de la nouvelle version 2.1 du plugin avec la dernière version de Tinymce (version 4.7.1)
    Dans la liste des nouveautés :
    révision importante du code
    gestionnaire pour insérer des liens vers les articles, tags, catégoriés et pages statiques comme pour les médias
    le plugin embarque une version minifiée de la librairie tinymce. Voir le fichier notes.txt pour installer la prochaine version de la librairie
    l'habillage original (skin) de tinymce est assez plat. Si vous en voulez un plus fun, sélectionnez perso ou écrivez le vôtre (bon courage) en modifiant les fichiers .less .

    Les dernières versions de codemirror ne sont pas compatibles avec ce plugin. Mise à jour prochainement. Reste quelques vérifs à faire.

    Le plugin ne pèse que 1.1Mo. Vous pouvez la télécharger directement sur votre site avec le plugin kzUploader.

    Lien pour télécharger au début du fil de discussion.

    Ceci n'est pas un plugin officiel mais cela ne signifie pas qu'il est moins bien :D
  • cpalocpalo Member
    novembre 2017 modifié
    Bonjour,

    Suivant l'usage j'hésite toujours entre les deux plugins....
    Sinon j'apprécie cette nouvelle version; quand tu parles du plugin externe codemirror c'est bien de celui tinymce et non du tien pour pluxml?

    Je vais voir aussi du côté de TinyMce comment personnaliser pour pouvoir insérer la balise figure au lieu d'une image

    Pour personnaliser, c'est bien dans le fichier tinyMCE.php que cela se passe? à partir de la ligne 345 tinymce.init({

    Une petite exlication sur l'usage des constantes : MCE_PLUGINS, BASIC_PLUGINS, mCE_PLUGINS_SITE et un peu plus loin
    'plugins0' => $this::MCE_PLUGINS,
    'plugins1' => $this::BASIC_PLUGINS,
    'plugins2' => $this::BASIC_PLUGINS,
    'plugins3' => $this::BASIC_PLUGINS,
    'plugins4' => $this::BASIC_PLUGINS,

    Cordialement
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2017 modifié
    Mise à jour version 2.1.10 :
    correction habillage perso (case à cocher pour le titre des images)
    correction pour restaurer en plein écran après sauvegarde
    Possibilité d'utiliser tinyMCE pour poster les commentaires côté site

    @cpalo,
    Bonjour,

    Pour Codemirror, je parle de ce plugin pour PluXml
    J'ai modifié le code des 2 plugins pour que l'intégration soit plus facile

    La balise <figure> est intégrée d'origine dans la librairie de Tinymce.
    Il suffit juste de cocher la case titre dans le popup de l'image.
    Tinymce a maintenant un plugin intégré pour afficher le code source, bouton "<>", sans coloration syntaxique

    MCE_PLUGINS, BASIC_PLUGINS et MCE_PLUGINS_SITE sont des sélections arbitraires de plugins internes à Tinymce sous forme de listes séparées par des espaces.
    C'est moins pénible à taper ainsi que sous forme de tableaux (array)
    MCE_PLUGINS contient la liste de tous les plugins
    BASIC_PLUGINS contienr le strict minimum pour les "petites mains", profil "rédacteur" par exemple
    MCE_PLUGINS_SITE est une liste de plugins à utiliser côté site. Il faut utiliser la version 2.1.10

    plugin0, plugin1, plugin2, plugin3, plugin4 correspondent à chacun des profils administrateur, gestionnaire, ..., rédacteur.
    Le premier a droit à tous les plugins, le dernier à quelques miettes.

    J'espère que ton choix pour ces 2 plugins va pencher du bon côté ]:D
  • Merci pour toutes ces infos qui m'aident à mieux comprendre.

    Je viens d'installer ton plugin codemirror (cf mon post) mais la coloration syntaxique ne fonctionne pas
    Autre bug : en édition la page reste figée car l'ascenseur vertical n'est pas visible
    Quand je fait insérer une image d'accroche, le gestionnaire des médias apparaît avec le même message d'erreur:
    Warning: preg_replace(): Compilation failed: unknown property name after \P or \p at offset 26 in E:\htdocs\myPluXml\plugins\codemirror\codemirror.php on line 73
    Enfin il y a un petit défaut dans le css, lorsqu'on survole un bouton le background rend completement invisible le bouton; mais c'est sans doute le skin d'origine .

    Petite précision, tu parles de prism (que j'utilise pour le code dans mes articles) dans cette version et il y a le dossier prism dans le dossier du plugin. Quel est son rôle? surtout si en plus on utilise codemirror.

    Pour le choix, promis, j'essaierai de faire un retour sur mon expérience des deux.

    Cordialement
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Je vais regarder pourquoi le gestionnaire de médias appelle codemirror. C'est pas normal.

    Prism ne fait qu'afficher la coloration syntaxique. C'est pour cela qu'il est très léger.

    Codemirror est un éditeur avec coloration syntaxique. Il doit vérifier la syntaxe de chaque langage, replier/déplier le code, appairait les couples de parenthèses, accolades, crochets, rechercher et remplacer des expressions dans l'éditeur. C'est beaucoup plus compliqué et cela pèse plus lourd.

    Le bon compromis est d'utiliser prism côté site et codemirror côté admin.
    Pour le css, de quel plugin parles tu ? codemirror ou tinymce.
    J'ai dû me battre avec PluCss qui a des règles très générales :
    ligne n° 354 de core/admin/theme/plucss.css
  • Pour le css, c'est par rapport à tinymce.

    Codemirror et Prism c'est bien l'utilisation que tu préconises que j'utilise.
    Mais justement c'est pour cela que je me demandais le pourquoi de la présence de prism dans le dossier du plugin tinymce puisque c'est codemirror qui est utilisé.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2017 modifié
    Pour le survol du bouton dans le thème par défaut, tu peux rajouter cette ligne au début du fichier tinyMCE/css/admin.css :
    [== CSS ==]
    .mce-tinymce button:hover {
    	background-color: #aaa;
    }
    
    Cette règle est prioritaire sur celle de Plucss.
    Pour qu'elle fasse effet, il faut désactiver et réactiver le plugin, puis recharger le cache du navigateur (touche F5).

    A mon goût, le thème perso est plus agréable à voir.

    Pour Prism, je n'ai pas trop forcé, c'est livré avec la librairie tinymce. Mais cela reste basique.

    Le gros intérêt de codemirror est d'éditer les pages statiques, les feuilles de styles des plugins et les fichiers du thème.
    Certains peuvent préférer le plugin kzAce mais je n'ai pas prévu de l'intégrer à Tinymce. La libraire ace est plutôt mal écrite et ses auteurs ne sont pas très actifs.
  • CodeMirror me convient très bien.
    Je ne me préoccuppe donc pas de Prism pour l'édition et je continuerai à l'utiliser comme je le faisais maintenant pour la coloration dans les articles.

    Bonne fin de soirée
  • HamtaroHamtaro Member
    novembre 2017 modifié
    Bonjour tout le monde (ça fait longtemps...)

    Je passe par ici parce que je rebidouille un peu sous PluXml et j'ai installé ce plugin.

    Je voudrais signaler un petit bug, peut être volontaire :
    - le plugin ne se charge pas quand je commence un nouvel article, il faut enregistrer un brouillon (même vide) et là, l'interface apparaît. Pourtant quand je veux éditer un article existant, le chargement de l'interface a bien lieu du premier coup.
    Sinon, tout est nickel. Peut être une interaction avec un autre plugin qui bloque son chargement ?

    Merci pour le travail d'intégration à PluXml ! ;)

    Bonne journée.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2017 modifié
    @Hamtaro,

    Je viens de vérifier à nouveau. Je n'ai pas ce souci pour un nouvelle article.
    Peux-tu m'en dire plus sur ta config :
    * Liste des plugins actifs
    * version de PHP
    * OS
    * navigateur
    * En activant l'inspecteur web de ton navigateur( touche F12 ), as-tu des messages d'erreurs dans la console Javascript ?

    Merci pour ton retour.
  • Voici le contenu de ma console :
    [== Indéfini ==]
    tinymce.full.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
    article.php:264 Uncaught ReferenceError: tinymce is not defined
        at article.php:264
    

    Navigateur : Vivaldi
    OS : Mac OS High Sierra (10.13.1)
    Version de PHP : 5.6.30
    Apache

    Pour vérifier les plugins, j'ai tout désactivé sauf le tien : problème résolu.
    J'ai donc réactivé les plugins un par un pour trouver celui qui était en conflit : rien trouvé... Tout marche... Je deviens fou.

    Bon, ta demande d'info m'a aidé à débloquer le truc. Merci :p
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    novembre 2017 modifié
    Erreur 404 : cela veut dire que le navigateur a demandé un fichier qui n'est pas disponible sur le serveur.

    Mais si tout est rentré dans l'ordre, on va rester sur notre faim :(
    Il est possible que l'ordre de chargement des plugins est une importance.
    Le cache du navigateur peut jouer des tours aussi. Il faut penser à recharger complétement la page (touche F5 sur Firefox et Chrome).

    S'il y a à nouveau une erreur 404, clique sur l'onglet réseau de l'inspecteur web et recharge la page.
    Tu pourras ainsi identifier l'url qui donne l'erreur 404.

    Je n'ai pas de Mac. Je connais juste Vivaldi pour la musique.
    Quand j'ai besoin, je vais tester les macs au rayon informatique de la Fnac.
  • Vivaldi est multi plateforme il me semble. C'est développé par un ancien de chez Opéra. ;)
    Je le teste actuellement parce que j'aime sa gestion des historiques avec mise en avant de stats : https://vivaldi.com

    Je vais surveiller ce bug de près.
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Version 2.2.1:
    Dans la liste des liens vers les articles, les catégories, pages staiques et tags, l'url est indiquée en adresse relative style index.php?.... (suppression du hostname )

    J'ai modifié le plugin original codesample de TinyMCE pour prendre en compte un certain nombre d'options intéressantes de la bibliothèques PrismJS :
    * numérotation des lignes
    * lignes surlignées
    * téléchargement automatique pour les langages non compris dans la bibliothèque de base de PrismJS
    * téléchargement du code source depuis Github, Bitbucket, ...
    * téléchargement du code source directement depuis le serveur (juste un lien dans l'article ou la page statique au lieu du code source)
    * affichage du langage
    * bouton pour copier dans le presse-papier

    La modif pour Tinymce est visible sur mon dépôt Github:
    [== bash ==]
    git clone https://github.com/bazooka07/tinymce.git -b codesample
    

    Il n'est pas nécessaire d'utiliser le plugin PrismJS pour afficher le code source côté site.
    Néammoins, pour une utilisation avancée il est conseillé de l'utiliser :
    * pour avoir un script javascript plus léger
    * utiliser des langages moins courants que HTML, CSS, PHP, Javascript
    * avoir quelques thèmes supplémentaires
  • GoromGorom Member
    mars 2018 modifié
    Bonjour

    j'ai testé un bon moment CKEditor et je jette un oeil désormais à TinyMCE qui est pas mal du tout.
    D'ailleurs merci pour cet autre plugin de qualité.

    Alors je trouve TinyMCE plus abouti d'une façon générale sauf sur une fonctionnalité, l'affichage du message en code HTML.
    Sur CKEeditor, un simple clic permet de basculer rapidement entre le code source et et la version interprétée.
    Et surtout le code source conserve une certaine mise en forme avec des retours à la ligne.

    Sur TinyMCE, le bouton Code ouvre une fenêtre supplémentaire et affiche le tout dans un gros bloc imbuvable.

    A noter aussi que j'utilise un thème personnalisé (Responsee 7.1) et que de base, la partie où on édite le texte était affichée avec un fond noir. Pour éviter cela, il faut aller dans les paramètres de TinyMCE, onglet "CSS" puis décocher la case "Utiliser les feuilles de style du thème".

    Par ailleurs, j'ai tenté avec la dernière version de TinyMCE d'activer la fonctionnalité "Codemirror" qui est grisé.
    Pour cela, est ce que je dois revenir en arrière avec la version 1.4 du plugin ou bien il est encore possible d'intégrer CodeMirror à la version 2.2.1 ?

    J'ai tout de même essayé avec plusieurs méthodes mais sans succès. Codemirror a été abordé plusieurs fois dans ce sujet mais je n'ai pas trouvé de réponse claire à ce que je souhaite entreprendre.

    Merci !
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Bonjour,

    Merci de ton retour et de faire un peu de pub pour ce plugin non officlel.

    Pour le bouton "Code", efectivement ce n'est pas très fun si tu as un gros article. Mais c'est un plugin d'origine de TinyMCE et cela ne m'a coûté trop d'effort pour le mettre.

    D'où l'intérêt de CodeMirror qui utilise la coloration syntaxique, la complétion des tags, ...

    Quand Tinymce se lance, il regarde s'il existe un dossier plugins/codemirror/tinymce. Et alors il crée le lien avec Codemirror. Il faut une sorte de connecteur, un script JS en fait, entre les deux.
    L'idée est la suivante. Supposons un plugin nommé mon-plugin, si TinyMCE trouve un dossier plugins/mon-plugin/tinymce, il peut alors lancé un script pour intégrer ce plugin dans son espace de travail.
    Par contre, il faut utiliser une version récente de Codemirror. Cette technique n'était pas utilisé dans les premières versions.
    Télécharger la dernière version de Codemirror version 2.0.5 à ce jour
    Télécharger la dernière version de Tinymce version 2.2.1 à ce jour

    Concernant le thème personnalisé, cela dépend de tes feuilles de style.
    Tinymce utilise une balise textarea pour aficher le corps de l'article et rajoute une class à ce <textarea> pour obtenir au mieux le même rendu que sur le site.
    Cela est défini dans le fichier tintymce.php vers la ligne n° 566 :
    [== PHP ==]
    			// https://www.tinymce.com/docs/configure/content-appearance/#body_class
    			// https://www.tinymce.com/docs/configure/content-appearance/#body_id: Pas utilisé par le thème par défaut
    			$body_classes = array(
    				'article'		=> 'container',
    				'statique'		=> 'static-page',
    				'comment'		=> 'comment',
    				'new_comment'	=> 'body-article', // A vérifier
    				'user'			=> 'admin-page' // A vérifier
    			);
    			if(array_key_exists($this->__scriptname, $body_classes)) {
    				$body_class = $body_classes[$this->__scriptname];
    				echo <<< BODY_CLASS
    		body_class				: '$body_class',
    
    BODY_CLASS;
    			}
    
    
    Et c'est fonction de l'article, de la page statique, ...

    Pour l'instant, ce n'est pas paramétrable. Mais cela peut changer.
    Donne moi l'URL de ton site pour voir ce qu'il faut modifier dans ta feuille de style.
  • trentaneltrentanel Member
    mars 2018 modifié
    Bonjour,

    Ayant installé Tinymce il y a quelques jours, je vais lui ajouter codemirror.

    @Gorom
    tu as écrit :
    A noter aussi que j'utilise un thème personnalisé (Responsee 7.1)
    Moi aussi je voudrais pouvoir utiliser ce thème sur un site, mais je rencontre le problème suivant :
    les liens vers les listes des catégories, derniers articles .... s'affichent bien mais ne se "déplient" pas quand on y clique dessus, ils restent fixes.

    Avec l'aide de bazooka07, j'ai identifié le message d'erreur suivant : "TypeError: $(...).lazyload is not a function"

    Je fais appel à toi en tant qu'utilisateur de ce thème pour te demander s'il a bien marché du premier coup ou si tu as dû ajouter un composant.
    Peut-être une version plus récente de jquery ?
  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    mars 2018 modifié
    Je suis allé récupérer la version 7.1 de Responsee sur Github

    Ce thème n'est absolument pas basé sur le thème par défaut de PluXml. Il faut donc modifier légèrement Tinymce.
    Par rapport au biilet précédent, il faut modifier la ligne articles comme suit dans le fichier tinymce.php :
    [== PHP ==]
    'article'		=> 'container box',
    

    7 feuilles de style dans ce thème, Ce n'est pas un peu abusé :mad:

    Pour récupérer la dernière version du thème, ouvrir un terminal, se placer dans le dossier themes de PluXml et faire :
    [== bash ==]
    git clone https://github.com/Philippe-M/responsee.git
    
  • GoromGorom Member
    Merci Bazooka07 pour ces informations complémentaires, j'essaierai de tester tout ça prochainement. Il est vrai que j'ai moins de disponibilité en ce moment d'où ma réponse tardive.

    @trentanel : alors pour te répondre, oui le thème Responsee a bien fonctionné d'emblée. Je n'ai pas eu besoin d'ajouter de composant supplémentaire et je n'ai pas eu besoin d'installer jQuery non plus.
  • Merci, mon problème venait du fait que j'avais aussi le plugin Jquery d'activé. Une fois désactivé tout va bien.
  • Bonjour,

    Je viens d'installer le plugin et cet éditeur est bien agréable. Il y a une fonctionnalité qui m'intéresse tout particulièrement mais qui aboutit à un échec : "Edition des commentaires côté site". Fonctionnalité que j'aurais bien proposé à mes quelques utilisateurs.

    A la création du commentaire tout se passe bien, les adresses http s'affichent en lien sensible, les drag & drop d'images fonctionnent parfaitement, et puis... à l'enregistrement le code en dur, les balises html, la catastrophe. Faut-il effectuer un paramétrage particulier?

    Merci.

    PS : je ne savais pas vraiment s'il fallait créer un nouveau sujet ou poursuivre ici.

  • cpalocpalo Member
    septembre 2019 modifié


  • cpalocpalo Member
    décembre 2019 modifié

    Bonjour,

    Petit souci.

    Je suis en mode source:

    Je rentre

    <li class=""><a href="#"><i class="fab fa-facebook"></i></a></li>
    <li class=""><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li class=""><a href="#"><i class="fab fa-linkedin"></i></a></li>
    

    Et lorsque je fais OK :

    <li class="">&nbsp;</li>
    <li class="">&nbsp;</li>
    <li class="">&nbsp;</li>
    

    Et donc les icones ne s'affichent pas

    Si après je vais éditer directement le fichier dans data/articles et coller ce code, aucun problèmes les icones s'affichent bien.

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    décembre 2019 modifié

    Bonjour,

    Apparemment c'est un problème interne à TinyMCE parce que tes balises n'ont aucun contenu.

    Essaie de contourner le problème avec des espaces insécables comme ceci:

    <ul>
       <li><a href="#"><i class="fab fa-facebook">&nbsp;</i></a></li>
       <li><a href="#"><i class="fab fa-twitter">&nbsp;</i></a></li>
       <li><a href="#"><i class="fab fa-linkedin">&nbsp;</i></a></li>
    </ul>
    
  • Bonsoir,

    ça ne regle pas le problème .

    Il met des balises <em> à la place de <i>

    Et en plus, si dans le navigateur je fais code source fe la page mes trois lignes apparaissent correctement, mais si je suis dans tinymce code source nous avons l'autre affichage sans rien.

    Je crois avoir vu qu'il y avait un plugin fontawesome pour tinymce.Alors je vais aller regarder de ce côté.

  • bazooka07bazooka07 PluXml Lead Developer, Moderator

    Je pense que tu as un problème avec tes règles CSS.

    J'ai téléchargé l'archive sur et https://fontawesome.com/start je ne vois aucune référence à la balise <i> dans leurs régles CSS

  • Effectivement la balise <i> n'est pas une obligation. Mais je me prends la tête peut être pour pas grand chose. Mais important car ma curiosité a été éveillée et envie de trouver.

    Là j'avais juste un usage ponctuel.. juste une page pour décrire l'utilisation et la personnalisation des icones.

    Sinon je n'ai pas de souci pour les utiliser dans une une barre de menu par exemple.

  • Bonjour,

    Je suis avec la 5.8.2 et je voulais re-installer tinymce.

    Pas de souci à l'installation.

    Mais après oui car il ne s'ouvre pas lors de l'édition d'une page ou d'un article.

  • cpalocpalo Member

    Bonjour,

    Version 5.8.8.2 stable et 5.8.3 dvpt, en ligne et en local avec xammp; aucun autre plugin installé.

    Cela fonctionne pour les commentaires, côté visiteur et côté admin.

    Pour les pages statiques et articles, cela fonctionne en ligne mais pas en local.

    Ce que je veux dire quand cela ne fonctionne pas : l'éditeur ne s'ouvre pas, on reste donc avec la page ou l'article en code source, comme lorsqu'on n'a installé aucun plugin éditeur.

    Cordialement

  • cpalocpalo Member

    Précision.. ce n'est pas lié à la nouvelle version car je viens de réinstaller une version 5.6 et une 5.7 de pluxml, et j'ai le même problème.

    En local, l'éditeur ne s'affiche pas lorsqu'on veut éditer un article ou une page statique, mais s'ouvre bien pour les commentaires.

Connectez-vous ou Inscrivez-vous pour répondre.