Bouton censure des mots dans l'éditeur

[photoclic]

Bonjour à tous,

Serait-il possible de créer un nouveau bouton dans l'éditeur sur les sujets et qui présenterait la liste des mots censurés que l'on a créée dans Général-Censure-Censure des mots.

Cela pourrait se présenter de 2 façons:
Façon simplifiée:
Une image du tableau est préenregistrée sous forme d'image.
Au passage de la souris sur ce nouveau bouton, l'image apparait et disparait quand la souris quitte le bouton.

Façon plus sophistiquée:
Au passage de la souris sur ce nouveau bouton, un menu déroulant présente les mots censurés et leurs remplacements.
Le mot choisi avec la souris se met directement dans l'éditeur.

Merci pour votre aide.

[photoclic]

Petit up.

[Toryudo]

Bonjour !
Vous voulez afficher quelque part les mots que vous ne voulez pas voir affichés ? C'est pas banal
J'imagine déjà voir une liste de grossièretés toutes plus imaginatives les unes que les autres (et le mot de remplacement tout mignon juste en face).

Alors, les deux façons seraient envisageables, il faut juste se rendre compte qu'un script ne pourra pas aller chercher les mots que vous avez censurés dans la panneau d'administration : il faudra mettre à jour manuellement des variables avec les mots censurés et leur remplacement. Est-ce que ça vous conviendrait ou est-ce que vous pensez que ce sera trop de travail, trop de difficulté ? En fonction, je vous proposerai un script, je vous laisse voir !

[photoclic]

Bonsoir Toryudo,

J'aime ce que vous avez imaginé
Une mise à jour manuelle des variables me va bien.

Merci pour votre aide.

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. Pensez à faire un UP au moins une fois par semaine si vous ne voulez pas voir votre sujet déplacé à la corbeille.

[photoclic]

Merci Sacha pour le replacement du sujet.

[Toryudo]

Alors, on pourrait imaginer quelque chose comme ça.
Le code Javascript à placer "Sur toutes les pages" :

Code:

const motsCensure = {
  'mot censuré 1': 'remplacement 1',
  'mot censuré 2': 'remplacement 2',
  'mot censuré 3': 'remplacement 3',
  'mot censuré 4': 'remplacement 4',
  'mot censuré 5': 'remplacement 5',
  'mot censuré 6': 'remplacement 6',
  'mot censuré 7': 'remplacement 7',
  'mot censuré 8': 'remplacement 8',
  'mot censuré 9': 'remplacement 9',
};

$(document).ready(function() {
  if ($.sceditor){
    $.sceditor.command.set('censure', {
      dropDown: function(editor, caller, callback) {
        const table = document.createElement('table');
        for (const mot in motsCensure){
          const tr = document.createElement('tr');
          const tdMot = document.createElement('td');
          const tdRemplacement = document.createElement('td');
    
          tdMot.innerHTML = mot;
          tdMot.addEventListener('click', () => {
            editor.insert(mot);
            editor.closeDropDown(true);
          });
          tdRemplacement.innerHTML = motsCensure[mot];
          tdRemplacement.addEventListener('click', () => {
            editor.insert(motsCensure[mot]);
            editor.closeDropDown(true);
          });
          tr.appendChild(tdMot);
          tr.appendChild(tdRemplacement);
          table.appendChild(tr);
        }
        editor.createDropDown(caller, 'censure', table);
      },
      exec: function(caller) {
        $.sceditor.command.get('censure').dropDown(this, caller);
      },
      txtExec: function(caller) {
        $.sceditor.command.get('censure').dropDown(this, caller);
      },
      tooltip: 'Inserer un mot censuré';
    });
    toolbar = toolbar.replace(/quote,/, 'censure,quote,');
  }
});

Et le code CSS pour que ce soit plus propre :

Code:

.sceditor-button.sceditor-button-censure div {
  background-image: url('https://www.growmarket.gr/components/com_virtuemart/assets/images/vmgeneral/warning.png');
}
.sceditor-censure {
  max-height: 200px;
  overflow-y: scroll;
}
.sceditor-censure table, .sceditor-censure tr, .sceditor-censure td {
  border: 1px solid;
}
.sceditor-dropdown.sceditor-censure td {
  text-align: left;
  padding: 2px;
}
.sceditor-dropdown.sceditor-censure td:hover {
  cursor: pointer;
  background: #AAA;
}

Par défaut, c'est l’icône (PS : je n'ai pas les droits dessus, c'est juste pour l'exemple), vous pouvez le changer en prenant une autre image. Il faut remplacer le lien https://www.growmarket.gr/components/com_virtuemart/assets/images/vmgeneral/warning.png présent dans le CSS par autre chose !
Est-ce que c'est pas mal ou est-ce que vous imaginiez la chose différemment ?

[photoclic]

Bonsoir Toryudo,

Un grand merci pour ton script et ta rapidité.
ça fonctionne à merveille.
Juste des couleurs dans le css que je vais ajuster.

Pour l'emplacement du bouton, serait-il possible de la positionner juste avant mon bouton smiley?

[Toryudo]

Je vais dire oui et non !
Oui parce que c'est possible, et non parce qu'il n'y a un bouton smiley que sur la réponse rapide.
Du coup, le voilà après le "suppression de format", c'est presque pareil :

Code:

const motsCensure = {
  'mot censuré 1': 'remplacement 1',
  'mot censuré 2': 'remplacement 2',
  'mot censuré 3': 'remplacement 3',
  'mot censuré 4': 'remplacement 4',
  'mot censuré 5': 'remplacement 5',
  'mot censuré 6': 'remplacement 6',
  'mot censuré 7': 'remplacement 7',
  'mot censuré 8': 'remplacement 8',
  'mot censuré 9': 'remplacement 9',
};

$(document).ready(function() {
  if ($.sceditor){
    $.sceditor.command.set('censure', {
      dropDown: function(editor, caller, callback) {
        const table = document.createElement('table');
        for (const mot in motsCensure){
          const tr = document.createElement('tr');
          const tdMot = document.createElement('td');
          const tdRemplacement = document.createElement('td');
   
          tdMot.innerHTML = mot;
          tdMot.addEventListener('click', () => {
            editor.insert(mot);
            editor.closeDropDown(true);
          });
          tdRemplacement.innerHTML = motsCensure[mot];
          tdRemplacement.addEventListener('click', () => {
            editor.insert(motsCensure[mot]);
            editor.closeDropDown(true);
          });
          tr.appendChild(tdMot);
          tr.appendChild(tdRemplacement);
          table.appendChild(tr);
        }
        editor.createDropDown(caller, 'censure', table);
      },
      exec: function(caller) {
        $.sceditor.command.get('censure').dropDown(this, caller);
      },
      txtExec: function(caller) {
        $.sceditor.command.get('censure').dropDown(this, caller);
      },
      tooltip: 'Inserer un mot censuré';
    });
    toolbar = toolbar.replace('removeformat|', 'removeformat|censure,');
  }
});

[photoclic]

C'est parfait Toryudo.

Un grand merci.

Et tel que ton script est fait, il donne d'autres possibilités en fonction des besoins indépendamment des mots censurés.
Un chouette développement.