raccourcis clavier pour bbcode
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
raccourcis clavier pour bbcode
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 bbcodeexemple couleur rouge ....
Re: raccourcis clavier pour bbcode
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.
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.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: raccourcis clavier pour bbcode
ça m'intéresseIl existe sinon des moyens de créer de nouvelles balises bbcode et de les ajouter à l'éditeur en utilisant du javascript.
mais dans l'éditeur du forum ??? et comment faire ???
Re: raccourcis clavier pour bbcode
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 :
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 :
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.
- 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]');
});
})});
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;
}
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.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: raccourcis clavier pour bbcode
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)
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)
Re: raccourcis clavier pour bbcode
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
Seul petit truc si je ne surligne rien le curseur ne se trouve pas entre les balises
Encore merci
Re: raccourcis clavier pour bbcode
Pour faire apparaitre les balises classiques, c'est effectivement plus simple, remplacez le code javascript par le suivant :
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.
- 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.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: raccourcis clavier pour bbcode
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 ???
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 ???
Re: raccourcis clavier pour bbcode
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.
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.
MlleAlys- Membre actif
- Messages : 5806
Inscrit(e) le : 12/09/2012
Re: raccourcis clavier pour bbcode
Encore merci
Sujets similaires
» raccourcis clavier pour remplir des champs textes
» Problème raccourcis clavier/affichage du forum
» [BBcode] Une nouvelle balise BBcode [deezer] pour intégrer un lecteur
» Enlever les Boutons pour le BBCode
» BBcode pour une vidéo facebook
» Problème raccourcis clavier/affichage du forum
» [BBcode] Une nouvelle balise BBcode [deezer] pour intégrer un lecteur
» Enlever les Boutons pour le BBCode
» BBcode pour une vidéo facebook
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum