Forum : soucis tinymce 4

Salut à tous,

Voilà j'essai de cree un petit gestionnaire de media tinymce.
Je me suis inspire du tuto de grafikart. Mais le soucis est qu'il parle de la v3 et non la v4.

Mon probleme est le suivant :
J'arrive a affiche l'editeur quand je clique sur l'icone image il m'affiche l'ecran de base avec un bouton a cote du champ url qui envoi vers une page.

Sur cette page j'ai la liste de mes images avec un lien sur chacune.
Mais je n'arrive pas a quand je clique sur le lien desire à le renvoyer à tinymce.
Grafikart utilise popup mais il n'existe plus dans la v4.
J'ai beau regarder dans la doc rien est exiplicite pour moi.

Auriez vous des pistes pour la creation du script dans ma page contenant la liste de mes images.
Voic le script sur ma page formulaire sur la page liste j'ai pas encore de script

tinymce.init({ language : "fr", mode : "exact", elements : "Inputcontent", menubar: false, plugins: [ "advlist autolink lists link image charmap anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste" ], toolbar: "insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | link image code | table | cut copy paste searchreplace |", file_browser_callback: function(field_name, url, type, win) { tinymce.activeEditor.windowManager.open({ url : 'medias_list.php', title : 'Liste des medias', width : 820, height : 600, resizable : 'yes', close_previous : 'no' },{ window : win, input : field_name }); } });

8 réponses

Mizzou,

il y a 11 ans

Bonsoir, je rencontre actuellement le meme souci que vous. Et l'issue de l'étape demeure incertaine car le script qui permet d'envoyer le media récupéré ne fonctionne pas, ou du moins ais je oublier de faire quelque chose. Pouvez vous m'aider dans la suite de votre sujet? Le javascript étant ma bête noire...
en attendant de vous lire.. Cordialement!

Mizzou,

il y a 11 ans

Je vous remercie d'avance...

tribal,

il y a 11 ans

Salut,
Malheuresement je n'es pas trouve la solution j'ai pas remis le nez dedans....

Lartak,

il y a 11 ans

Il vous faut penser à faire le côté traitement PHP aussi, le javascript ne fait pas tout. :)
Il faut créer les fichiers/fonctions concernant le listing, l'upload et l'édition/suppression des images.

Mizzou,

il y a 11 ans

Non ca c'est déjà fait, il nous faut tout simplement trouver le script pour selectionner l'image que nous avons dans la vue rendu par le manager pour la placer directement dans le textarea

tribal,

il y a 11 ans

Oui dans mon souvenir le coté php est réglé c'est juste la selection de l'image et l'ajout dans textaera le probleme. Les images s'affiche dans le pop-up etc

Romano83,

il y a 11 ans

Salut,
le mieux est de créer un plugin qui remplace l'uploader d'image par défaut de tinymce.
Il te suffit de mettre le nom de ton plugin dans la liste des plugins chargés par tinymce.
Exemple pour un plugin qui s'appelerait imageinsert :
Dans ta page :

tinymce.init({ selector: 'textarea.tinymce', language: "fr_FR", relative_urls: false, skin: 'nathalie', height: 300, plugins: [ "autolink autosave link imageinsert", "searchreplace visualblocks visualchars insertdatetime media nonbreaking", "contextmenu directionality template paste" ], toolbar1: "bold italic underline strikethrough bullist numlist alignleft aligncenter alignright alignjustify link unlink undo redo", toolbar2: "", toolbar3: "", menubar: false, toolbar_items_size: 'medium', paste_as_text: true, imageinsert_explorer: "lien vers ta fonction php qui gère l'upload de media", imageinsert_edit: "lien vers ta fonction php qui gère l'édition de media" }); // Fonction qui permet d'envoyer le media récupéré par le plugin vers le textarea tinymce function send_to_editor(content){ var ed = tinymce.activeEditor; ed.insertContent(content); ed.windowManager.close(); }

Je précise que l'option imageinsert_edit peut être optionnelle. A toi de voir si tu veux la mettre ou pas...

Et au niveau du plugin (je te laisse voir la structure des plugin sur la doc) :

tinymce.PluginManager.add('imageinsert', function(ed, url){ ed.addButton('image', { title: 'Insérer/Editer une image', icon: 'image', onclick: function(){ var el = ed.selection.getNode(); var url = tinymce.activeEditor.settings.imageinsert_explorer; // Au cas où on clique sur l'image déjà présente dans le textarea, on récupère les attributs de l'image pour pourvoir l'éditer if(el.nodeName == 'IMG'){ url = tinymce.activeEditor.settings.imageinsert_edit; url += '?src='+ed.dom.getAttrib(el, 'src')+'&alt='+ed.dom.getAttrib(el, 'alt')+'&class='+ed.dom.getAttrib(el, 'class'); } ed.windowManager.open({ title: 'Insérer/Editer une image', url: url, width: 1000, height: 600, },{ plugin_url: url }); } }); });

tribal,

il y a 11 ans

Salut,

Ok merci de ton infos j'ai presque réussi à le faire fonctionne j'ai juste encore le soucis du fait que quand je clique sur une image de ma liste sa l'ajoute.
J'ai cree le dossier du plugin avec le 2eme script que tu ma fourni et ajouter le lien dans la page qui contient lediteur de texte.

Mais dans ma page media_list.php je doit ajouter quoi ? Le script du dessus ?
Ou modifier quelque chose dans le lien j'arrive pas a savoir pour le moment.

En tt cas un grand merci pour ton aide j'ai fait une grande avance