Invité

Astuce pour enlever le bug des images en base64 dans le tinymce

Messages recommandés

Invité   
Invité

Pour ceux qui rencontrent le soucis avec tinymce quand ils manipule les images avec l'outil qui s'affiche en dessous d'un image quand on clique dessus, la solution est toute simple et le coupable est  imagetools et se retrouvent avec leur data.json rempli de code en data64

 

ouvrez votre fichier init.js dans le dossier du tinymce sur votre zwii et vous cherchez la ligne où l'on active les plugins du tinymce

 

Citation

plugins: "advlist anchor autolink autoresize autosave charmap code colorpicker contextmenu fullscreen emoticons hr image imagetools etc......

 

dedans vous enlever simplement ( juste après image ) le nom du plugin imagetools

 

et vous devez donc avoir vos réglages ensuite ainsi

Citation

plugins: "advlist anchor autolink autoresize autosave charmap code colorpicker contextmenu fullscreen emoticons hr image etc..........

 

Ensuite vous rafraîchissez votre page et vous ne verrez plus cet " accessoire inutile " qui par contre remplissait vos data.json avec du data64 en lieu et place des adresses traditionnelles écrite par le zwii quand vous enregistriez une image...

 

Voila voilou la solution toute bête et magique :)

Partager ce message


Lien à poster
Partager sur d’autres sites
Rémi    146

Cool pour ceux qui ne veulent pas alourdir leur data.json, petit suggestion pour ton téléchargement : il y a peut-être moyen d'utiliser un système d'upload d'image à la place du base64 : https://www.tinymce.com/docs/advanced/handle-async-image-uploads/#usinguploadimagesandthenpostingaform. Bon je n'ai pas creusé plus que ça ;) !

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

@Rémi il me semble que l'histoire évoquée pour le base64 ne vienne pas du fait de l'upload d'une image mais du fait que lorsque l'on utilise l'outil intégré au clic sur une image et qui fait apparaître en dessous de celle ci la barre outils de imagetools, et bien les images sont encodées directement en base64 dans le data.json. je viens de tester suite à ton post et confirme que si dans tiny on clique sur importer ( uploder ) une image et que l'on met l'adresse web de l'image à importer dans le tinymce, et bien celle ci est écrite comme il le faut dans le data.json du zwii.

 

Exemple justement du coupable de ce bug que j'ai pris pour le servir d'exemple, en suite copiee de mon dat.json où l'on voit bien que c'est l'adresse du forum où est hébergée cette image qui y est écrite et comme il le faut par tinymce dans le data.json d'un zwii

adresse de l'image

http://forum.zwiicms.com/uploads/monthly_2018_03/blob.png.5594ed113c22c4bfc4bcf20398c66001.png

blob.png

ce sont uniquement les outils d'imagetools ( les neufs cases sous l'image une fois sélectionnée ) qui donnent ensuite à tinymce les modif à enregistrer en code sources et ses modifs le sont en base64 et pas en code source html comme traditionnellement dans le tiny )

code dans le data.json

Citation

>modification de l'image pour v&eacute;rification, elle &agrave; bien chang&eacute;?<\/p>\r\n<p>Verif sur ftp maintenant...<\/p>\r\n<\/div>\r\n<div class=\"col6\">\r\n<p><img src=\"\/Xpr\/ZwiiCMS-8.2.5\/site\/file\/source\/gallery\/space\/earth.jpg\" width=\"353\" height=\"722\" \/><\/p>\r\n<\/div>\r\nr<\/div>\r\n<p><img src=\"http:\/\/forum.zwiicms.com\/uploads\/monthly_2018_03\/blob.png.5594ed113c22c4bfc4bcf20398c66001.png\" alt=\"\" width=\"594\" height=\"254\" \/><\/p>",

 

le résultat sur mon site de test, pour conforter mon explication, facile à reconnaitre dans ce code de mon dat.json ce que l'on voit en visuel ci dessous ;)

tra3.thumb.png.fd6d8d243c06458adc5fe4b8773bbb29.png

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité
il y a 5 minutes, Rémi a dit :

Yes mais il y a peut-être moyen de dire à tinymce d'uploader l'image après modification au lieu de la générer en base64, enfin à voir !

 Non Rémi car si l'on garde le plugin imagetools activés dans les plugs du tiny, ce n'est pas l'upload d'image qui est en cause dans ce cas là mais bien la façon dont renvoie ce code d'office à tinymce qui lui de base écrit tout en code source ( et contrairement à ce que l'on pense, code source chez tiny ça veut dire que tu visionne uniquement le texte de ce que tu vois en éditeur complet ) et image tools une fois que vous avez fini de manipuler vos image et enregistrez votre boulot et bien il a envoyer votre code de manipulation en base64 pour que tiny l'écrivent ainsi.

Donc dans le code source si du texte est en html, zwii lui se contente de le recoder à sa façon pour afficher ce fameux code, mais si c'est du texte, et bien il le traite comme du texte avant de l'enregistrer dans le data.json et le base64 n'est justement que du texte, si tu veux en faire l'expérience sans me télécharger ou éditer une image dans le tinymce, tu ouvre ton tiny, tu te met en édition mode code source et tu y colle le code d'une image en data64..

Et bien ton image que tu n'auras même as téléchargée nul part sera visible une fois le message posté, mais le data.json lui se sera allourdi des centaines de lettres et caractères que contient un base64 pour afficher une image

 

Ouvres le fichier du plugin imagetools  plugin.min.js et tu explore son code, tu y trouvera ceci :

Citation

create({id:"imagetools"+Dt++,blob:i,base64:e.toBase64(),uri:a,name:u}),c.add(l),t.undoManager.transact(function(){t.$(s).on("load

c'est vers la fin et tout un tas d'autre paramètres dans ce style un peu partout demandant à interpréter une image au format traditionnel avant de bosser dessus en la convertissant déjà en base64...

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@Rémi @Roger nounours Si j'en crois mes recherches, je crois bien qu'il existe, ce moyen :

 

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

https://www.tinymce.com/docs/advanced/php-upload-handler/

 

J'aurais bien aimé explorer et vous le proposer, mais... vous savez la suite et dans l'état où je suis, je ne vis plus la nuit — en même temps, ça fait belle lurette que je ne suis plus très nocturne. :( 

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

@PeterRabbit :) héhé, moi j'ai juste cliqué sur ton tout premier lien et vis c'est comme ça que j'ai vu que le imagetools posait soucis dan le tiny pour son histoire de base64 et que beaucoup en parlaient et chercher des solutions... Bien vu l'artiste pour le titre de ta recherche " tinymce imagetools base64 "

 

Et moi me suis dit, bon être obligé de chercher des soluces pour utiliser les 9 malheures petites case du imagestools alors que le dites case ne sont là que pour faire du custom ou pivoter une image voir si on veux la renommer..

Pourquoi chercher midi à quatorze heure puisque tout ceci peut être fait tout autrement...alors imagetoolls gadget inutile, hop je le supprime et plus de bin's xD

 

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

@Rémi Il n'y a pas un problème dans le forum ? Pour ce qui est de la piste, j'ai oublié un lien o.O. J'aurais voulu essayer ce script, puisqu'il paraît qu'il fonctionne, mais je manque de compétences pour l'adapter. Je me disais bêtement que tu saurais. Mais je ne t'avais pas donné toutes les infos. 

 

blob.png.ee602320f289b1baf3ef4be9d6398a58.png

Modifié par PeterRabbit (Voir l’historique des modifications)

Partager ce message


Lien à poster
Partager sur d’autres sites
Rémi    146

@PeterRabbit yes @Roger nounours me l'a déjà remonté hier, j'attends la version 4.3 d'IPBoard qui va sans doute corriger ce pb (j'espère).

 

Oh top pour le lien, merci tu gères ! :grin: Je vais le noter sur github pour ne pas le perdre, je me pencherai dessus un jour ou l'autre ! (https://github.com/remijean/ZwiiCMS/issues/180)

Partager ce message


Lien à poster
Partager sur d’autres sites
CroqueWeb    73

Vous venez de découvrir que le plug imagetools de TinyMCE encode en base 64 les images retouchées et vous le vouez aux gémonies, pour ma part j'y trouve un intérêt pour dimensionner des images et leur donner un effet pour ensuite servir de vignettes, cliquables ou pas, ou de bouton. Ceci pouvant être fait directement avec l'éditeur wysiwyg dans le même temps que la création d'une page. Comme je le signalais l'inconvénient est le plombage du data.json quand il s'agit d'image en haute résolution, mais pour de petites images ce problème n'existe pas, le poids du code source est bien sur plus élevé que si on utilise directement une image, mais l'avantage c'est que la vignette fait partie du code source et n'a donc pas besoin d'être chargée séparément, ce qui supprime autant de requêtes que d'images au serveur et augmente par la même son temps de réponse, l'affichage est ainsi immédiat, c'est très utile pour un roll-over, par exemple, en évitant le non chargement ou le chargement retardé de l'image sur une page en contenant beaucoup, la différence est notable pour des connexions bas débit telles que la 3g. J'ai une page de liens contenant une vingtaine de vignettes toutes encodées en base 64, le poids de la page est tout à fait acceptable et toutes ces petites images s'affichent immédiatement lors du chargement de la page. Il sufit juste d'apprendre à se servir de cette fonction, et pour les utilisateurs novices de Zwii et de l'éditeur wysiwyg TinyMCE, il faudrait les informer des avantages et inconvénients du code en base 64.

Partager ce message


Lien à poster
Partager sur d’autres sites
Rémi    146

@CroqueWeb yes mais sachant que l'ensemble des données est stocké dans le data.json, c'est intéressant de chercher un moyen de réduire sa taille, surtout avec l'arrivée des prochains modules (par exemple le chat) qui vont augmenter largement la taille du fichier. D’où l’intérêt du lien de @PeterRabbit :) .

 

Un autre point c'est la complexité d'informer efficacement des utilisateurs qui n'ont pas spécialement de connaissances dans le web.

 

Enfin bref je pense que ce débat n'a pas lieu d'être sur ce topic de support, nous pouvons le continuer dans le forum de discussions libres :) .

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283
il y a 28 minutes, CroqueWeb a dit :

Vous venez de découvrir que le plug imagetools de TinyMCE encode en base 64 les images retouchées et vous le vouez aux gémonies [...]

 

Il me semble que j'essaye de trouver une solution, non ? Si tu as le temps, feel free.

Modifié par PeterRabbit (Voir l’historique des modifications)
  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
CroqueWeb    73
il y a 36 minutes, PeterRabbit a dit :

 

Il me semble que j'essaye de trouver une solution, non ? Si tu as le temps, feel free.

Ben justement, la solution trouvée remplace le codage par une image...

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par CroqueWeb
      Après quelques jours d’absence, je constate que la communauté est active, apportant partage et entraide, je m’en réjouis. Il est en effet souhaitable que ça aille dans ce sens, car bien que modérateur de ce forum, je ne sais pas tout et ne peut donc répondre à tout, je ne suis, de plus, pas disponible constamment.
    • Par dangee
      Si comme moi, vous avez besoin de rajouter des balises "non conventionnelles" (comme itemtype ou itemprop ;)), vous ne pourrez pas avec la configuration de base de TInyMce.
      Pour modifier cela, ouvrez le fichier init.js dans le répertoire /core/vendor/tinymce et ajoutez le code suivant après la langue.
      //valid extended_valid_elements: "*[*]", verify_html : false, cleanup : false, et voilà :))
    • Par dangee
      Hello,
       
      Petite question sur TinyMce...J'ai ajouté un template .html dans /vendor/tinymce/templates et modifié le init.js en fonction, mais celui-ci n’apparaît pas dans la liste de l'éditeur " + > modèle "...Une idée ??
       
      EDIT : finalement, c'était la bonne manip'...juste un cache un peu trop long ;))