Bonjour à tous,
Je suis les tutoriels de Grafikart sur "développer un site web de A à Z" et je bloque sur le jour 6, l'intégration du WYSIWYG, TinyMCE.
Dans le tutoriel, Grafikart utilise la version 3.x du wysiwyg, aujourd'hui nous sommes à la version 4.

Sauf que dans la V4, pas de popup.js ... donc en fait, vers la 35 ème minute de la vidéo, il explique comment par un simple clic dans l'explorateur des images envoyés, on renvois le lien de l'image dans l'éditeur d'image de tinyMCE.
Sauf que le code proposé dans le tutoriel, ne peut pas fonctionner, car comme je le disais, pas de popup.js dans la nouvelle version.

Je me suis retourné en effet vers la doc du site de tyniMCE mais cette dernière ne référence que la méthode proposée dans le tutoriel pour les version 2.x et 3.x de l'éditeur ... rien pour la version 4. J'ai fouillé à droite à gauche, et a part retrouver des files managers complet compatibles avec la nouvelle version, je ne vois rien de bien clair qui pourrait coller avec ce que propose le tutoriel de grafikart.

Est-ce que quelqu'un aurait été déjà, ici confronté à ce problème pour la version 4 de l'éditeur ? Est-ce qu'une solution existe ?

Je remercie d'avance, toutes les personnes qui prendront la peine de me répondre :)

Bonne journée à tous.

6 réponses


ste
Auteur

Je m'excuses pour le double post, mais je fouille toutes la doc de TinyMCE et j'ai l'impression de ne pas être le seul à bloquer, pourtant j'ai vu d'autres scripts (ici ou là) avec un custom files manager qui fonctionnent vraiment comme le présente grafikart dans son tutoriel : Clic sur l'image qui renvoie le value dans le champ 'lien de l'image' de l'éditeur. Dans le tutoriel, grafikart explique bien qu'il faut se réfférer à cette doc : http://www.tinymce.com/wiki.php/TinyMCE3x:How-to\_implement\_a\_custom\_file\_browser Qui explique, comme je l'ai dit plus haut bien la méthode pour les version 2.x et 3.x ... Pourtant sur leurs forums je trouve des gens bloqués suite à la version 4.x, comme exprimé ici : [url= http://www.tinymce.com/forum/viewtopic.php?id=30861][/url] [url= http://www.tinymce.com/forum/viewtopic.php?id=30861]http://www.tinymce.com/forum/viewtopic.php?id=30861[/url] Un administrateur se permet même de répondre et indique que 'oui' des choses ont changées, mais que la doc n'est pas finalisée. Bref, ça botte en touche, et le problème est que ce fameux popup.js devient totalement inexistant. La solution de récupérer l'ancien fichier des versions antérieures a placer dans un dossier spécifique du dossier 'plugins' ne semble pas fonctionner ... (je vais essayer quand même on verra). Bref, vraiment, si quelqu'un trouve ou connait la solution pour renvoyer ce value dans l'éditeur je suis preneur. Et de plus ça pourrait aider des futurs autres personnes qui souhaiteront eux aussi appliquer la nouvelle version de TinyMCE au fabuleux tutoriel de Grafikart. Et j'ai aucune compétence en java pour essayer de bidouiller moi même :( Merci à tous :)

Bonjour,

Voici comment moi j'ai modifier pour le rendre compatible avec Tinymce 4 :
Dans la vue admin_edit de posts

<script src="<?php echo Router::webroot('js/tinymce/tinymce.min.js'); ?>"></script>
<script type="text/javascript">
    tinyMCE.baseURL ='<?php echo Router::webroot('js/tinymce'); ?>';
    tinymce.init({
        selector: "textarea.wysiwyg",
        theme: "modern",
        language : 'fr_FR',
        plugins: 
            "advlist autoresize autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor "
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true,
        templates: 
            {title: 'Test template 1', content: 'Test 1'},
            {title: 'Test template 2', content: 'Test 2'}
        ],
        convert_urls: false,
        file_browser_callback: fileBrowser
    });
    function fileBrowser(field_name, url, type, win){
        if(type=='file'){
          var explorer = '<?php echo Router::url('admin/posts/tinymce'); ?>';
        }else{
          var explorer = '<?php echo Router::url('admin/medias/index/'.$id); ?>';
        }
        tinyMCE.activeEditor.windowManager.open({
            file : explorer,
            title : 'Gallerie',
            width : 850,
            height : 425,
            resizable : 'yes',
        },{
            window : win,
            input : field_name
        });
        window.inputSrc = field_name
        return false;
    }
</script>

Dans la vue admin_index de medias et n'oublie pas d'ajouter jquery :

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Image</th>
            <th>Titre</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <?php foreach ($images as $k => $v): ?>
                <tr>
                    <td><img src="<?php echo Router::webroot('img/'.$v->file); ?>" alt="<?php echo $v->name; ?>"></td>
                    <td><?php echo $v->name; ?></td>
                    <td>
                        <a onclick="return confirm(Vouvez vous vraiment supprimer cette image');" href="<?php echo Router::url('admin/medias/delete/'.$v->id); ?>">Supprimer</a>
                    </td>
                </tr>
            <?php endforeach ?>
        </tr>
    </tbody>
</table>
<div class="page-header">
    <h1>Ajouter une image</h1>
</div>
<form id="test" class="form-horizontal" action="<?php echo Router::url('admin/medias/index/'.$post_id); ?>" method="post" enctype="multipart/form-data">
    <?php echo $this->Form->input('file','Image',array('type' => 'file')); ?>
    <?php echo $this->Form->input('name','Titre'); ?>
    <div class="form-actions">
        <input type="submit" class="btn btn-primary" name="" value="Envoyer">
    </div>
</form>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
var parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
$(function() {
    $('img').click(function(e){
        e.preventDefault();
        imgSrc = $(this).attr('src');
        imgAlt = $(this).attr('alt');
        divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
        divInputSplit = divInput.split("_");
        divTitle = "mce_"+(parseInt(divInputSplit[1],10) +1);
        $("input#"+parentWin.inputSrc,parent.document).val(imgSrc);
        $("input#"+divTitle,parent.document).val(imgAlt);
        $(".mce-close",parent.document).last().trigger("click");
    });
});
</script>

Cordialement

ste
Auteur

Bonjour, merci beaucoup pour les codes, je vais essayer tout ça et vous tiens au courant. :)

ok merci bahamut
ça m'a bien aidé

mais comment as tu géré ton fichier admin_tinyce.php?

je n'arrive à récupérer le lien sélectionné !

la nuit porte conseil !
voici le code pour les liens : admin_tinyce.php

<table class="table">
     <thead>
         <tr>
             <th>Lien</th>
         </tr>
     </thead>
     <tbody>
         <?php
         foreach($posts as $k => $v){
             echo '<tr>';
             echo '<td><a href="'.Router::url($v->type.'s/view/id:'.$v->id.'/slug:'.$v->slug).'">'.ucfirst($v->type).' : '.$v->name.'<a></td>';
             echo '</tr>';
         }
        ?>
     </tbody>
</table>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
var parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
$(function() {
    $('a').click(function(e){
        e.preventDefault();
        aSrc = $(this).attr('href');
        divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
        divInputSplit = divInput.split("_");
        divTitle = "mce_"+(parseInt(divInputSplit[1],10) +1);
        $("input#"+parentWin.inputSrc,parent.document).val(aSrc);
        $(".mce-close",parent.document).last().trigger("click");
    });
});
</script>

Salut,

Désolé de ré-ouvrir ce topic, mais je voulais juste vous remercier pour le code qui m'a bien servi pour mes sites et m'a fait gagner un temps précieux :)

Je poste mon code des fois que ça puisse aider aussi d'autres personnes :

// Dans tinymce.init({ file_browser_callback appel ma page contenant mon gestionnaire de fichiers
file_browser_callback: function(field_name, url, type, win) {
      if (type=='file') { var titre = 'fichiers'; } else  { var titre = 'media'; }
      tinyMCE.activeEditor.windowManager.open({title:'Galerie '+titre,data:field_name,classes:'filemanager',file:'fichiers.php?type='+type,filetype:type,width:900,height:630,inline:1}, {window : win, input : field_name});
      window.inputSrc = field_name
      return false;
    }

et

//  Dans ma page de gestionnaire de fichiers je récupére les clics sur les images qui contient la class 'fichier' (pour les pdf, doc...) et 'image'  (pour les png, jpg, gif). J'en profite pour mettre automatiquement sur l'image une description si le champ est vide, ainsi que la largeur et le margin
var parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
$(function() {
  $('img.fichier').click(function(e){
    e.preventDefault();
    aSrc = $(this).attr('alt');
    divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
    $("input#"+parentWin.inputSrc,parent.document).val(aSrc);
    $(".mce-close",parent.document).last().trigger("click");
  });

  $('img.image').click(function(e){
    e.preventDefault();
    aSrc = $(this).attr('alt');
    divInput = $("input#"+parentWin.inputSrc,parent.document).parent().attr('id');
    divInputSplit = divInput.split("_");
    divTitle = "mceu_"+(parseInt(divInputSplit[1],10) +1);
    divWidth = "mceu_"+(parseInt(divInputSplit[1],10) +3);
    divMargin = "mceu_"+(parseInt(divInputSplit[1],10) +12);
    $("input#"+parentWin.inputSrc,parent.document).val(aSrc);
    if ($("input#"+divTitle,parent.document).val()=='') { $("input#"+divTitle,parent.document).val('La description que je souhaite'); }
    if ($("input#"+divWidth,parent.document).val()=='') { $("input#"+divWidth,parent.document).val('210'); }
    if ($("input#"+divMargin,parent.document).val()=='') { $("input#"+divMargin,parent.document).val('4'); }
    $(".mce-close",parent.document).last().trigger("click");
  });
});