Ajouter un menu déroulant dans l'éditeur de message

[IzumiRK]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://indare-division.forumactif.com/

Description du problème

Bonjour ! =)

Après avoir fait plusieurs recherches, je n'ai pas réussi à trouver ce dont j'ai besoin donc je viens poster une petite demande d'aide. Désolée si ça a déjà été répondu ailleurs.

Je sais comment ajouter un bouton dans l'éditeur de messages (je l'ai déjà fait), mais j'aimerais savoir s'il y a un code pour faire la même chose avec une liste déroulante ? En gros, sur mon forum, tout le monde a une couleur de paroles et je me disais que ce serait plus simple d'avoir une liste où il suffit de sélectionner le prénom de la personne pour que ça mette automatiquement les balises couleurs. Le problème c'est que tous les codes que j'ai trouvé pour ajouter un bouton à l'éditeur n'expliquent pas comment faire un liste déroulante.

Et comme j'explique probablement très mal, l'idée c'est :

[ Bouton ]
↓
Nom1
Nom2
Nom3

Un peu comme la balise de choix de taille ou de police d'écriture.

Merci =)

[IzumiRK]

Petit up ↑

[IzumiRK]

Je ré-up par ici ~

[Kardo]

Bonjour !

Voici un petit script commenté en exemple :

Code:

$(function(){
    if ($.sceditor) {
      // Création de la commande "colorPseudos"
      $.sceditor.command.set("colorPseudos", {
          // Création du menu déroulant
          _dropDown: function(editor, caller, callback) {
            // Le dropdown correspond au contenu de $content
              var $content = $("<div />");
              var colors = [
                  '#FFFFFF',
                  '#000000',
                  '#FF0000',
                  '#00FF00',
                  '#0000FF',
                  '#FFFF00',
                  '#00FFFF',
                  '#FF00FF',
              ];
      

              for (var i of colors) {
                $('<p data-colorpseudos="'+i+'" style="color:'+i+';">' + i + '</p>')
                      .click(function(e) {
                          callback($(this).data('colorpseudos'));
                          editor.closeDropDown(true);
                          e.preventDefault();
                      })
                      .appendTo($content);
              }
              // On crée le dropdown a partir de notre $content  
              editor.createDropDown(caller, "colorPseudos", $content);
          },
          exec: function(caller) {
              var editor = this;
              $.sceditor.command.get('colorPseudos')._dropDown(
                  editor,
                  caller,
                  function(color) {
                      editor.wysiwygEditorInsertHtml('<font color="'+color+'">','</font>');
                  });
      
          },
          txtExec: function(caller) {
              var editor = this;
              $.sceditor.command.get('colorPseudos')._dropDown(
                  editor,
                  caller,
                  function(color) {
                      editor.insertText("[color="+color+"]","[/color]");
                  });
      
          },
          tooltip: "Pick a color"
      });
      // On ajoute le bouton dans la barre d'outils (après date dans ce cas)          
      toolbar = toolbar.replace(/date,/,'date,colorPseudos,')
    }
});

En espérant que ça soit assez clair

Edit : Le CSS pour avoir une icône :

Code:

.sceditor-button-colorPseudos div{
  background:url(https://i.imgur.com/nGuaYB7.png) !important;
}

[IzumiRK]

OOoh merci =3 J'y connais pas grand chose en javascript mais je crois que je saisis un peu comment ça fonctionne. Du coup le nom de la couleur là-dedans est récupéré pour le bbcode, c'est ça ?

Code:

var colors = [
                  '#FFFFFF',
                  '#000000',
                  '#FF0000',
                  '#00FF00',
                  '#0000FF',
                  '#FFFF00',
                  '#00FFFF',
                  '#FF00FF',
              ];

Est-ce que c'est possible d'attribuer un nom pour que ça s'affiche différemment dans le menu ? Par exemple que ça affiche "blanc" au lieu de "#FFFFFF", mais que le bb code prenne quand même le nom de la couleur ? Mes notions de js se limitent aux formulaires alors je sais pas exactement comment ça se ferait techniquement, mais j'imagine qu'il doit y avoir moyen d'attribuer un nom à chaque valeur ?

[Kardo]

Je pensais que vous aviez un peu plus de notions
J'ai ajouté des commentaires pour que ça soit plus clair, j'ai aussi fourni un exemple pour les couleurs avec un nom.
Après libre à vous d'ajouter des couleurs ou des classes pour personnaliser le menu déroulant

Code:

// Lorsque la page est prête
$(function(){
    // Si il y a un éditeur sur la page
    if ($.sceditor) {
        // Création de la commande "colorPseudos"
        $.sceditor.command.set("colorPseudos", {
            // Création du menu déroulant
            _dropDown: function(editor, caller, callback) {
                // Le dropdown correspond au contenu de $content

                // On fait une liste des couleurs à utiliser
                var colors = {
                    'Blanc': '#FFFFFF',
                    'Gris' : '#999999',
                    'Noir': '#000000',
                    'Rouge': '#FF0000',
                    'Vert': '#00FF00',
                    'Bleu': '#0000FF',
                    'Jaune': '#FFFF00',
                    'Cyan': '#00FFFF',
                    'Magenta': '#FF00FF',
                };

                // On crée une <div> qui va contenir le menu déroulant
                var $content = $("<div />");

                // On ajoute les couleurs dans cette div
                // On fait une boucle sur les couleurs
                for (var i in colors) {
                    // i correspond à la clé du tableau (la couleur)
                    // colors[i] correspond à la valeur (le code hexa)

                    // On crée une balise <p> par couleur
                    $('<p data-colorpseudos="'+colors[i]+'" style="color:'+colors[i]+';">' + i + '</p>')
                        .click(function(e) {
                            // Lorsque l'on clique sur la couleur on execute la fonction de callback
                            callback($(this).data('colorpseudos'));
                            // puis on ferme le dropDown
                            editor.closeDropDown(true);
                            e.preventDefault();
                        })
                        // On ajoute cette balise <p> à notre div principale
                        .appendTo($content);
                }
                // On ajoute ce menu déroulant dans l'éditeur
                editor.createDropDown(caller, "colorPseudos", $content);
            },
            // Fonction de callback utilisée en mode visuel (réponse du click sur la couleur)
            exec: function(caller) {
                var editor = this;
                $.sceditor.command.get('colorPseudos')._dropDown(
                    editor,
                    caller,
                    function(color) {
                        //On insère nos balises html autour du texte sélectionné
                        editor.wysiwygEditorInsertHtml('<font color="'+color+'">','</font>');
                    });

            },
            // Fonction de callback utilisée en mode source (réponse du click sur la couleur)
            txtExec: function(caller) {
                var editor = this;
                $.sceditor.command.get('colorPseudos')._dropDown(
                    editor,
                    caller,
                    function(color) {
                        //On insère nos balises bbcode autour du texte sélectionné
                        editor.insertText("[color="+color+"]","[/color]");
                    });

            },
            // Titre au survol du bouton
            tooltip: "Pick a color"
        });
        // On ajoute le bouton dans la barre d'outils (après date dans ce cas)
        toolbar = toolbar.replace(/date,/,'date,colorPseudos,')
    }
});

[IzumiRK]

En même temps j'avais pas précisé, donc c'est un peu ma faute x)

En tout cas ça marche nickel, merci beaucoup ! o/ Ca va simplifier la vie de tous mes membres ^w^
Je vais aller jouer en peu avec le css, cette partie-là devrait être dans mes cordes.