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

fabienc
Proposition de tutoriels

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

6 réponses

Ewil79
Réponse acceptée

Merci Fabien pour ton post Cependant cela fonctionne mieux avec le DOM-2 au niveau de la page Moi j'ai un code de ce type si ça peu aider. [code]<script>
var query = document.querySelectorAll('.select a');

for(var i = 0, c = query.length; i<c ; i++){

query*.addEventListener('click',function(e){
    top.tinymce.activeEditor.windowManager.getParams().oninsert(e.currentTarget);
    return false;
},false);

}

</script>[/code] Avec ça on récupère toutes les url des éléments cliqué, quel qu'il soit :)

asse60

ok pour les images
mais commetn as tu géré tes liens?

zkiller

Ces vrais qu'une MAJ serait pas mal avec les nouvelles technologies.

Glaived

Cf : Mise à jour du concept, Développer votre site en MVC

De ce que je sais, Grafikart serais plutot pour dans l'idée, reste à voir quand il le feras, et ça..

rizerzero

Ah oui super tinymce a désormais une lib d'images intégré ça fait plaisir ça , bon moi je pense pas qu'il refera tout le MVC en fin sauf si c'est un HMVC , mais si non l'ajout de la lib media va lui plaire j'en suis sur et peut être un tuto a la clé Allez !! GG Allez

fabienc
Auteur

Salut,

Merci pour cette aide
je suis passé sur cakephp et j'utilise le plugin Media de Grafikart.
je ne pense pas en avoir besoin, mais dans le doute !!

Fabien