Mise à jour du tuto : Développer un site : Jour 6, Editeur WYSIWYG.

Bonjour et merci pour tous ces tutos.

Je me les passe en boucle pour être sûr de tout comprendre.
Je suis tombé hier sur le tuto "démerdez-vous tout seul" et j'ai plutôt apprécié.
En effet, en cherchant sur google on commence à comprendre ce que l'on fait.

Du coup j'ai intégré tinymce 4.
J'ai un peu lutté, mais j'y suis finalement arrivé.

Je me suis aidé de la doc présente sur le site tinymce, mais également sur son forum.

En effet, dans le tuto jour 6, "Tu" nous mâches tout le boulot. L'intégration est donc très simple puisque nous suivons bêtement ce que tu fais.
Pour la version 4, les choses sont un peu différentes, car la doc n'est pas si explicite que ça !

Pour ceux que ça intéresse, voici les infos que j'ai glané à droite à gauche pour effectuer cette intégration, en mixant le tout avec le tuto jour 6.

<script type="text/javascript">
            tinymce.init({
                selector: "textarea.wysiwyg",
                plugins: 
                    "advlist autolink lists link image charmap print preview anchor",
                    "searchreplace visualblocks code fullscreen",
                    "insertdatetime media table contextmenu paste"
                ],
                relative_urls: false,
                image_advtab: true, // permet d'avoir l'onglet avancé pour les images
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                file_browser_callback: function(field_name, url, type, win) {
                    if (type == "file") {
                        var explorer = '<?php echo Router::url('admin/posts/lister'); ?>'
                    } else if (type == "image") {
                        var explorer = '<?php echo Router::url('admin/medias/index/') . $cle; ?>'
                    }
                    // on peut gérer un type de modal en fonction du type de la fenetre qui est appelée
                    tinymce.activeEditor.windowManager.open({
                        title: "Banque de fichiers",
                        url: explorer,
                        width: 800,
                        height: 600
                    }, {
                        oninsert: function(url) {
                            win.document.getElementById(field_name).value = url;
                            top.tinymce.activeEditor.windowManager.close();
                        }
                    });
                    // cf voir documentation page : http://www.tinymce.com/wiki.php/api4:class.tinymce.WindowManager
                    return false;
                }
            });

        </script>

Et voici ce que j'ai mis sur mes boutons d'action pour ouvrir et fermer les dialogbox. (Bon à adapter à vos images)

<a href="#" onclick="top.tinymce.activeEditor.windowManager.getParams().oninsert('<?php echo Router::webroot('img/posts/') . $v->file; ?>');"><img src="<?php echo Router::webroot('img/posts/') . $v->file; ?>" height="60"></a>

J'avoue, je n'ai pas trouvé tout seul ce bout de code pour la fonction top.tinymce.activeEditor.windowManager.getParams().oninsert(url).
D'ailleurs, je n'ai même pas vérifié si ça fonctionnait sans le getParams() car je n'envoie aucun paramètre (à tester)

Voici les sources : http://www.tinymce.com/forum/viewtopic.php?id=30861

Du coup, comme dans le tuto jour 6, tout fonctionne correctement pour l'inclusion d'images ou de liens.

Je pense qu'il serait intéressant d'avoir une mise à jour du tuto pour intégrer tinyMCE 4.x (Enfin si "Tu" as le temps)

Encore merci pour tout ce travail.

Cordialement,

Fabien