MyBB.support, le portail francophone de MyBB
Modifier l'éditeur de texte - Version imprimable

+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : Plug-ins et modules pour MyBB (https://mybb.support/forum-32.html)
+--- Forum : Support (https://mybb.support/forum-15.html)
+--- Sujet : Modifier l'éditeur de texte (/thread-4430.html)



Modifier l'éditeur de texte - seechi - 12-07-2011

Bonjour à toutes et à tous !

Alors voilà, j'aimerais modifier l'éditeur de texte (Nouvelle discussion et nouvelle réponse), mais je n'y arrive pas, j'ai tenté de modifier le template de newthread mais rien n'y fait, il n'y a rien dedans tout est géré ailleurs.

Ayant trouvé un ID j'ai tenté d'insérer un nouvel élément avec Javascript, mais ça ne fonctionne pas non plus.

Ce que je cherche : ajouter un élement après le sélecteur de couleur du texte, dans lequel se trouverait un lien ouvrant un pop-up, pour héberger des images.

Voilà, si quelqu'un saurait comment faire je lui serais reconnaissant, bonne soirée à vous !


RE: Modifier l'éditeur de texte - spyto - 12-07-2011

Le bouton pour insérer une image existe déjà... Shy

Pour rajouter un bouton à la barre d’outils de l"éditeur, voir ce tuto :
http://www.mybb.fr/thread-903.html


RE: Modifier l'éditeur de texte - Saphir - 12-07-2011

Oui, mais il demande pour que le bouton ouvre une popup à l'url d'un hébergeur d'images, et ça m'intéresserait aussi... :p


RE: Modifier l'éditeur de texte - seechi - 13-07-2011

Je vous remercie, en m'inspirant du tuto j'ai pu faire ce que je voulais.

J'utilise MyBB 1.6.3, et ce que je voulais était d'avoir un bouton pour ouvrir un pop-up, guidant vers l'app portable de mon hébergeur.
Ca tombe bien car obligation d'insérer des balises au moment du clic donc j'ai mis les [img].

Pour ceux que ça intéresse, il faut trifouiller jscripts/editor.js à la ligne 209
Code :
this.createToolbar('topformatting', {
            container: 'top',
            items: [
                {type: 'dropdown', name: 'font', insert: 'font', title: this.options.lang.font, options: this.fonts},
                {type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},
                {type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors},
                {type: 'button', name: 'bildberg', insert: 'img'}
            ]
        });

Comme vous le voyez j'ai pour ma part insérer un bouton nommé bildberg, qui donnera lieu à un <span id="editor_item_bildberg"></span> et qui au clic insérera dans le texterea "[img]".

En revanche, pour le reste j'ai triché, afin d'avoir l'icône et ouvrir le pop-up, j'ai rajouté ceci :
Code :
var bildberg_open = true;
        document.getElementById('editor_item_bildberg').addEventListener('click', function() {
                                                                                           if(bildberg_open) {
                                                                                            window.open('http://bildberg.eu/apps.php','BildBerg_Portable_Apps','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=320, height=320');
                                                                                           bildberg_open = false;
                                                                                           } else {
                                                                                            bildberg_open = true;
                                                                                           }
                                                                                           return false;
                                                                                           }, false);
        
        document.getElementById('editor_item_bildberg').className="toolbar_button toolbar_normal";
        
        document.getElementById('editor_item_bildberg').setAttribute('title', 'Uploader une image');
        document.getElementById('editor_item_bildberg').innerHTML='<img alt="BildBerg" src="jscripts/editor_themes/default/images/bildberg_add.png" width="16" height="16" />';

Voilà voilà, je pense que c'est une petite base qui pourra vous aider pour rajouter vos propres boutons sur MyBB 1.6 Smile

Merci à vous, bonne soirée

PS : si vous voulez avoir le code complet pour pouvoir ouvrir mon pop-up avec une icône qui ne bug pas voici le code à mettre :
Code :
setElementState: function(element, state) {
        if(element.id != "editor_item_bildberg") element.addClassName('toolbar_'+state);
//Ligne 391 après avoir collé le code au dessus
/* L'icône est téléchargeable ici http://icones.pro/image-ajouter-image-png.html en 16x16.
A placer dans jscripts/editor_themes/images.
Une position relative avec top:2px; ainsi qu'un background:none; ont rajoutés dans jscripts/editor_themes/default/stylesheet.css */



 Utilitaire de traduction fourni par Regentronique