Bonjour,
Voila je suis entrain de suivre le tuto de GrafikArt "creer un site de A à Z" (Jour 6 WYSIWYG).

J'ai essayé d'adapter mon code pour que Tinymce 4 fonctionne, cependant je n'arrive pas a mes fins...
Je ne sais pas quel script utiliser pour que lors du clic sur une image affichée dans le tableau contenant les images déja uploadées, tinymce récupere la source de ce fichier.

Ce que je fais

Voici mon pichier situé dans admin_edit.php situé dans mon dossier posts

    <div class="jumbotron">
      <div class="page_header">
          <h1>Editer un article</h1>
      </div>
      <div class="breadcrumb">
        <form action="<?php echo Router::url('admin/posts/edit/'.$id) ?>" method="post">
        <?php echo $this->Form->input('name','Titre', array('class'=>'form-control')); ?>
        <?php echo $this->Form->input('slug','Url', array('class'=>'form-control')); ?>
        <?php echo $this->Form->input('id','hidden', array('class'=>'form-control')); ?>
        <?php echo $this->Form->input('content','Contenu', array('type'=>'textarea','class'=>'wysiwyg form-control', 'rows'=>5)); ?>
        <?php echo $this->Form->input('online','En ligne', array('type'=>'checkbox')); ?>
        <div class="breadcrumb">
            <input type="submit" class="btn btn-primary" value="Envoyer">
        </div>
      </div>
    </form>
    </div>

    <script src="<?php echo Router::webroot('js/tinymce/tinymce.min.js') ?>"></script>
        <!-- place in header of your html document -->
      <script>
        tinymce.init({
              selector: '.wysiwyg',
              theme : 'modern',

              plugins: [
              'advlist contextmenu autolink lists link image charmap print preview hr anchor pagebreak',
              'searchreplace wordcount visualblocks visualchars code fullscreen subscript superscript',
              'inlinepopups insertdatetime media nonbreaking save directionality spellchecker',
              'template paste textcolor colorpicker codesample textpattern imagetools fullscreen'
               ],

              toolbar1: 'insertfile undo redo | print preview  fullscreen | image media | link unlink anchor insertdatetime | codesample visualchars searchreplace',
              toolbar2: 'styleselect | forecolor backcolor | bold italic underline strikethrough subscript superscript | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
              image_advtab: true,
              insertdatetime_formats: ["%H:%M:%S", "%d/%m/%Y"],
              media_live_embeds: true,

              templates: [
              { title: 'Test template 1', content: 'Test 1' },
              { title: 'Test template 2', content: 'Test 2' }
              ],

              content_css: [
              '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
              '//www.tinymce.com/css/codepen.min.css'
              ],

              file_browser_callback: function(field_name, url, type, win) {
                      // Opens a new dialog with the file.htm file and the size 320x240
                      // It also adds a custom parameter this can be retrieved by using tinyMCEPopup.getWindowArg inside the dialog.
              tinyMCE.activeEditor.windowManager.open({
                  url : '<?php echo Router::url('admin/medias/index/'.$id) ?>',
                  title : 'Galerie',
                  width : 600,
                  height : 450
              }, 
              {
                  custom_param : 1
              });
                  return false;
              }
        });
    </script>

Ce que je veux

Je ne sais pas quoi mettre dans mon admin_index.php pour récupérer la source de l'image et la faire reconnaitre par tinymce

    <div class="table-responsive">
      <table class="table table-bordered">
        <thead>
            <tr>
                <th>Image</th>
                <th>Titre</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($images as $k => $v): ?>
                <tr>
                    <td>
                        <a href="#" onclick="FileBrowserDialogue.sendURL()">
                            <img src="<?php echo Router::webroot('img/'.$v->file); ?>" height="100">
                        </a>
                    </td>
                    <td><?php echo $v->name; ?></td>
                    <td>
                    <a onclick="return confirm('Voulez vous vraiment supprimer cette image');" href="<?php echo Router::url('admin/posts/delete/'.$v->id); ?>">Supprimer</a>
                    </td>
                </tr>
            <?php endforeach ?>
        </tbody>
      </table>
    </div>
      <div class="page-header">
        <h1>Ajouter une image</h1>
      </div>
    <div class="jumbotron">
        <form 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="actions">
            <input type="submit" value="Envoyer" class="btn btn-primary">
          </div>
        </form>
    </div>

    // ici devrait se trouver le script qui me permet de recuperer l'url du fichier source il me semble

Ce que j'obtiens



8 réponses


le lien vers les imgs de "ce que tu obtiens est Dead" :)

McDev
Auteur

j'ai compris ton problème, mes screenshot sont des .tiff (donc lisibles sous mac) je les converti de suite en .png :)

Ce que je veux

Je cherche toujours des solutions a mon probleme :) Svp
Merci a tous ceux qui pourront laisser juste un petit message pour simplement m'orienter ou carrément me donner une réponse pouvant m'aider.

As-tu essayé la propriété image_list du plugin image de tinyMCE ?

McDev
Auteur

Merci bcp d'essayer de m'aider, d'apres toi je dois la mettre dans admin_index.php ou admin_edit.php ?

Comment j'integre le script a ma page admin_edit.php ? afin de pouvoir recuperer l'url de mon image et l´injecter dans mon champ "source" de tinymce au clic sur l'image dans le filemanager ?

Dans le admin_edit.php
commence par modifier manuellement le tiniymce.init pour y rajouter la propriété image_list
tu y mets en dur un ou deux liens d'images
Si le résultat est ce que tu souhaites, alors passe au php pour renseigner dynamiquement la propriété

Bonjour mon frere je crois que tu devrais essayer de mettre ces script

<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>

sinon tu peut suivre ce lienTinyMCE 4 - fonction tinyMCEpopup inexistante ? pour plus des précision car Bahamut45 a reussi à rendre compatible le code avec Tinymce 4.

Merci Mn0073RF je trouvais plus ce topic ce matin avant de partir au taf ;)