Ajout de nouveaux boutons dans "réponse rapide"

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Salutations à tous et toutes !

Je me permets de vous voir à propos d'une demande ultérieure, légèrement améliorée.
En effet, faisant beaucoup de RP écrit, il se trouve qu'on finit par tourner en rond lorsqu'on écrit par manque parfois de variété dans les mots.

J'ai fait mes recherches sur Forumactif pour ajouter un dictionnaire de synonyme à ma réponse rapide.

J'ai trouvé ce lien : https://forum.forumactif.com/t352944-ajout-de-boutons-dans-l-editeur-de-messages

Qui a donné ce code  Grâce à Omuey ! :

Code:

function clicediteur(lienediteur)
{
window.open(lienediteur);
}
 
 
 
$(function(){$(function(){
 
  $('<a class="sceditor-button sceditor-button-dico" unselectable="on" title="Dictionnaire"><div unselectable="on" style="background-image:url(http://2img.net/i/fa//i/smiles/star3.png)">Dictionnaire</div></a>').insertAfter('.sceditor-button-time').click(function(){
    $('#text_editor_textarea').sceditor("instance").onclick=clicediteur("http://dictionnaire.reverso.net/");
  });
 
})});
 
 
$(function(){$(function(){
 
  $('<a class="sceditor-button sceditor-button-syno" unselectable="on" title="Synonymes"><div unselectable="on" style="background-image:url(http://2img.net/i/fa//i/smiles/star3.png)">Synonymes</div></a>').insertAfter('.sceditor-button-dico').click(function(){
    $('#text_editor_textarea').sceditor("instance").onclick=clicediteur("http://www.synonymes.com/");
  });
 
})});
 
 
$(function(){$(function(){
 
  $('<a class="sceditor-button sceditor-button-patron" unselectable="on" title="BonPatron"><div unselectable="on" style="background-image:url(http://2img.net/i/fa//i/smiles/star3.png)">BonPatron</div></a>').insertAfter('.sceditor-button-syno').click(function(){
    $('#text_editor_textarea').sceditor("instance").onclick=clicediteur("http://bonpatron.com/");
  });
 
})});

Cela rajoute 3 icônes en lien vers un dictionnaire des synonymes, un conjugueur, et surtout un vers le Bonpatron (un correcteur d'orthographe qui rappelle juste les règles en cause dans des erreurs détectées). J'ai trouvé cette idée de l'auteur du sujet magnifique.

Aussi j'ai tenté de prendre "l'ID" et l'insérer dans un code que l'on m'avait fait ci-joint : https://forum.forumactif.com/t408275-lancer-de-des-ajouter-dans-la-reponse-rapide

Code:

$(document).ready(function() {
  toolbar = 'bold,italic,underline,strike|left,center,right,justify|quote,code,faspoiler,fahide,table|servimg,image,,link,embed,youtube|headers,size,color,font,removeformat|faroll|,pastetext,source,lienediteur';
});

J'ai ajouté ce qui me semblait correct "lienediteur" mais il se trouve que ça ne marche pas

J'ai tenté aussi avec leur ID .sceditor  et... non, rien du tout.
Bien entendu j'ai laissé le code que j'ai trouvé actif, pour faire un "appel".

Quelqu'un saurait-il m'expliquer la démarche afin que je puisse la répéter à l'infini en cas de nouvel agencement de cette barre de réponse rapide ?

Merci à vous !

[Toryudo]

Bonjour !
Alors en effet, c'est un peu plus compliqué que ça...
Je vais m'appuyer sur un tuto qui a été écrit pour ajouter des fonctionnalités dans la barre d'outils de façon la plus propre possible, et qui va vous expliquer comment ça fonctionne précisément :
https://forum.forumactif.com/t377883-ajouter-un-bouton-font-awesome-sur-l-editeur

Le script pour ajouter le bouton est le suivant :

Code:

    $(function(){
      if (!$.sceditor) return;
      var defaultSize = 18, // taille par défaut des icônes
          autoClose = 1, // ferme automatiquement la popup après la sélection d'une icône si activé
   
          // Liste d'icônes
          fa = ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
          A = '', O = A;
   
      // si la taille est supérieur à 0, on formate une taille par défaut pour les icônes
      if (defaultSize) {
        A += '[size=' + defaultSize + ']';
        O += '[/size]';
      }
   
      // crée un bouton sur l'éditeur et une fenêtre de sélection
      $.sceditor.command.set('fontawesome', {
   
        dropDown : function(editor, caller, callback) {
          var a, b = '', c = document.createElement('DIV'), i = 0, j = fa.length;

          for (; i<j; i++) b += '<i class="fa">' + fa[i] + '</i>';
          c.innerHTML = b;
          for (a = c.getElementsByTagName('I'), i = 0, j = a.length; i<j; i++) {
            a[i].onclick = function() {
              callback(this.innerHTML);
              autoClose && editor.closeDropDown(true);
            };
          }
          editor.createDropDown(caller, 'fontawesome', c);
        },

        // wysiwyg
        exec : function(c) {
          var e = this;
          $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
            e.insert(' [font=FontAwesome]' + A + icon + O + '[/font]&nbsp;', '', true, true, true);
          });
        },

        // mode source
        txtExec : function(c) {
          var e = this;
          $.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
            e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', '');
          });
        },
        tooltip : 'Font Awesome Icons'
      });
   
      toolbar = toolbar.replace(/date,/,'fontawesome,date,'); // ajoute le bouton à la barre d'outils
    });

Tout ce qui se trouve à l'intérieur de $.sceditor.command.set('fontawesome', {}); sert à définir comment va fonctionner le bouton auquel on donne l'ID fontawesome, et la dernière ligne, toolbar = toolbar.replace(/date,/,'fontawesome,date,'); permet d'ajouter ce bouton fontawesome définit précédemment à la toolbar.

Dans votre cas, la seule possibilité d'utiliser lienediteur dans la variable toolbar serait de définir son fonctionnement dans du code qui ressemble à celui du tuto (mais qui fera autre chose donc), c'est-à-dire de la forme $.sceditor.command.set('lienediteur', { /* beaucoup de choses ici */ });. Ça permet de faire beaucoup de choses, mais pour les cas plus simples comme un simple lien vers un autre site... est-ce que c'est utile de faire "si compliqué", telle est la question !

Qu'est-ce que vous en pensez ?

[Kaehlyth]

C'est vrai que ça a l'air lourd et compliqué pour essayer de rendre le forum le plus accessible possible.

Il y arrive déjà très, très, bien tout seul depuis quelques mois.

Essayer de rajouter des codes lourds pour 3 liens semble aller contre cette idée de faire "léger" même si on sait que tout ce qui est avatar est une base de données géante mais chut .

Je vais donc refuser cette fois votre aide si la seule possibilité de rajouter des icônes "nouvelles" dans la réponse rapide doit passer par tout un bougibougla complexe.

Merci de m'avoir expliqué l'étape par étape et de me faire me rendre compte que parfois, une idée sympa, c'est aussi savoir passer par d'autres fonctionnalités existantes ! (Comme les règles sur les sujets).

Merci à vous !