raccourcis clavier pour bbcode

[Marco6205]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://bridge-embrunais.forumactif.com/

Description du problème

existe t'il des raccourcis clavier pour l'éditeur bbcode

exemple couleur rouge ....

[MlleAlys]

Bonjour,

Voilà ceux que je connais sur chrome : sélectionner le texte voulu puis :
ctrl+b = gras
ctrl+i = italique
ctrl+u = souligné
Malheureusement pas pour le rouge...

Il existe sinon des moyens de créer de nouvelles balises bbcode et de les ajouter à l'éditeur en utilisant du javascript.

[Marco6205]

Il existe sinon des moyens de créer de nouvelles balises bbcode et de les ajouter à l'éditeur en utilisant du javascript.

ça m'intéresse
mais dans l'éditeur du forum ??? et comment faire ???

[MlleAlys]

Je ne suis pas une spécialiste, mais en recherchant plus sujets sur ce problème, j'ai pu faire le code javascript suivant :

- rendez-vous dans le panneau d'administration > modules > gestion des codes javascript
- vérifiez que l'option "activer la gestion des codes javascript" est cochée sur "OUI"
- créez un nouveau code
- donnez lui un titre (par exemple "balise rouge")
- cochez son placement "sur toutes les pages"
- dans la zone de saisie copiez/collez le code suivant :

Code:

jQuery(document).ready(function()  {
  
   var divs = document.getElementsByTagName('div');
   for (i=0; i<divs.length; i++){  
      /* Remplaçement balises */
      if(divs[i] != null && divs[i].className == 'postbody'){  
         /* Déclaration balise MJ */
         rouge = new String('[\[]rouge[^[]');
         rouge_deb = new RegExp(rouge, 'g');
         rouge_fin = new RegExp('[\[]/rouge[^[]', 'g');
              
         /* Pas d'interprétation dans balise code */
         var divsCode = divs[i].getElementsByTagName('div');
         for (n=0; n<divsCode.length; n++){  
            if(divsCode[n] != null && divsCode[n].className == 'cont_code'){  
               contenuCode = divsCode[n].innerHTML;  
               nouveaucontenuCode = contenuCode.replace(rouge_deb,'& amp;#91;rouge& amp;#93;').replace(rouge_fin,'& amp;#91;/rouge& amp;#93;');
               divsCode[n].innerHTML = nouveaucontenuCode;      
            }
         }
        
         /* Remplacement balise */
         contenu = divs[i].innerHTML;      
         nouveaucontenu = contenu.replace(rouge_deb,'<span class="sl_rouge">').replace(rouge_fin,'</span>');
         if(contenu != nouveaucontenu){
            divs[i].innerHTML = nouveaucontenu;
         }        
      }
   }
});



/*ajout du bouton dans éditeur*/
$(function(){$(function(){
  $('<a class="sceditor-button" unselectable="on" title="Rouge">
<div unselectable="on" style="background-image:url(https://zupimages.net/up/18/06/31vg.png);">Rouge</div></a>').insertAfter('.sceditor-button-strike').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText('[rouge]','[/rouge]');
});
 })});


-enregistrez

Ce code javascript permet d'ajouter un bouton à l'éditeur (une étoile rouge) qui ajoute la balise [rouge] dans la zone de saisie de message, et de traduire cette balise en html lors de l'affichage du message sur le forum.

- Rendez-vous dans affichage > couleurs > onglet feuille de style css
- dans la zone de saisie ajoutez le code css suivant :

Code:

/*mise en forme balise bbcode rouge*/
span.sl_rouge {
  font-weight: bold;
  color: red;
}

- enregistrez

Ce code css permet de colorer les éléments qui sont entre balise [rouge] en rouge et en gras. Cette mise en forme peut être modifiée si vous le souhaitez (retirer le gras, ajouter un soulignage, mettre en italique, d'une autre taille, etc...).

A noter qu'en mode WYSIWYG sur l'éditeur, ce seront les balises et non la mise en forme qui apparaitront dans le message. La mise en forme en rouge apparaitra à la place des balises dès que vous ferez "prévisualiser" ou que vous posterez le message.

[Marco6205]

Bonjour et d'abord Merci de m'aider.
Mes connaissances en java ne me permettent pas de décortiquer ton code pour tout en comprendre!

j'ai testé j'ai bien l'étoile rouge sur le bandeau.
en mode normal (pas source) , je surligne mon texte, clique sur l'étoile rouge -> les balises [rouge] encadre bien mon texte [/rouge](et son visible dans ce mode non source). Si je bascule en source pas de changement.
lorsque je fais prévisualiser ou envoyer, le texte apparaît sans les balises mais n'a pas changé de couleur.
autre petit point si je fais étoile sans surligne de texte le curseur se trouve en dehors des balises.

n'est il pas possible au lieu de mettre les balises [rouge] de mettre directement "["color=#ff0000"]""["/color"]" (mis des " pour visualiser les balises)

[Marco6205]

je ne sais si tu as déjà lu mais tout fonctionne bien comme tu l'a décris !!!!

Seul petit truc si je ne surligne rien le curseur ne se trouve pas entre les balises

Encore merci

[MlleAlys]

Pour faire apparaitre les balises classiques, c'est effectivement plus simple, remplacez le code javascript par le suivant :

Code:

$(function(){$(function(){
 $('<a class="sceditor-button" unselectable="on" title="Rouge">
<div unselectable="on" style="background-image:url(https://zupimages.net/up/18/06/31vg.png);">Rouge</div></a>').insertAfter('.sceditor-button-strike').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText('[color=red]','[/color]');
});
})});

Supprimez le code css qui avait été ajouté et qui n'est plus utile avec ce nouveau javascript.


Pour le curseur je ne sais pas, ça fonctionne bien chez moi.

[Marco6205]

impeccable

Je suis exigeant comment faire pour que le curseur se trouve entre les balises si il n'y a pas de texte sélectionné

et à quoi correspond le $ devant la fonction ???

[MlleAlys]

Pour le curseur aucune idée désolée (et comme dit plus haut sur mon forum test je n'ai pas observé ce problème), je passe la main si quelqu'un a une idée.

Pour ce qui est du $, c'est un caractère beaucoup utilisé en jQuery, qui est une bibliothèque permettant entre autres une syntaxe plus simple du javascript. Placé ici encadrant la fonction, le $ est un raccourci qui il me semble permet notamment d'appeler la fonction à la fin du chargement de la page.
Vous pouvez vous renseigner sur le javascript et le jquery pour en savoir plus.

[Marco6205]

Encore merci