Ajout groupe de bouton éditeur de message

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajout groupe de bouton éditeur de message

Message par jsp d'octeville Dim 7 Déc 2014 - 19:20

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://cisocteville.meilleurforum.com/

Description du problème

Bonjour,

Je souhaiterais rajouter à l'éditeur de message un groupe de boutons supplémentaires avec des boutons programmés avec certaines balises et une écriture pré-enregistré.

Par exemple, en cliquant sur un bouton, les message suivant s'écrirait directement :

Code:
[b][color=orange][222] Statut : Sur Les Lieux[/color][/b]

Je souhaiterais programmer plusieurs boutons de ce type mais je ne sais pas comment m'y prendre.

Merci d'avance.


Dernière édition par jsp d'octeville le Dim 14 Déc 2014 - 22:31, édité 1 fois
jsp d'octeville

jsp d'octeville
***

Messages : 148
Inscrit(e) le : 01/03/2009

Voir le profil de l'utilisateur http://cisocteville.meilleurforum.com/
jsp d'octeville a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par demeter1 Dim 7 Déc 2014 - 19:55

Bonsoir,
JS à cocher sur toutes les pages

Code:
$(document).ready(function(){
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/17/71/75/73/revu-f11.png)">a</div></a>').insertBefore('.sceditor-button-size').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][222] Statut : Sur Les Lieux","[/color][/b]");
        });
      });
});

https://i.servimg.com/u/f56/17/71/75/73/revu-f11.png est l'icône du bouton

Code:
.insertBefore('.sceditor-button-size').
Placement du bouton après le bouton size

PS / le lien de votre forum n'est pas valide
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

Voir le profil de l'utilisateur https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par jsp d'octeville Dim 7 Déc 2014 - 22:10

Voici le lien : www.ccis-octeville.com

Merci pour le code, comment faire pour créer un groupe de boutons indépendant comme il y a déjà les 6 groupes existants sur l'éditeur.

Cela permettrait d'avoir un 7ème groupe avec juste mes boutons programmés.
jsp d'octeville

jsp d'octeville
***

Messages : 148
Inscrit(e) le : 01/03/2009

Voir le profil de l'utilisateur http://cisocteville.meilleurforum.com/
jsp d'octeville a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par demeter1 Dim 7 Déc 2014 - 22:21

Vu qu'il est nécessaire de fournir un positionnement aux nouveaux boutons, ils ne peuvent que se rajouter dans un groupe existant. Il y a peu être une astuce pour créer un nouveau groupe mais j'ignore lequel.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

Voir le profil de l'utilisateur https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par jsp d'octeville Lun 8 Déc 2014 - 20:57

D'accord merci.

Je crois que cela est possible mais je n'ai plus les codages.
jsp d'octeville

jsp d'octeville
***

Messages : 148
Inscrit(e) le : 01/03/2009

Voir le profil de l'utilisateur http://cisocteville.meilleurforum.com/
jsp d'octeville a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par jsp d'octeville Ven 12 Déc 2014 - 16:20

Up SVP
jsp d'octeville

jsp d'octeville
***

Messages : 148
Inscrit(e) le : 01/03/2009

Voir le profil de l'utilisateur http://cisocteville.meilleurforum.com/
jsp d'octeville a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par Invité Ven 12 Déc 2014 - 17:59

Salut jsp d'octeville,
as tu les six groupes de préparés ?
Textes lors du clic et images des boutons 16 px X 16 px?
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par jsp d'octeville Ven 12 Déc 2014 - 20:48

Bonsoir,

Mon groupe de boutons serait composé de 8 boutons programmés avec le message suivant :

Bouton 1 :
Code:
[b][color=orange][222 : OP-Ouest] Statut : Départ[/color][/b]
Bouton 2 :
Code:
[b][color=orange][222 : OP-Ouest] Statut : Sur Les Lieux[/color][/b]
Bouton 3 :
Code:
[b][color=orange][222 : OP-Ouest] Statut : Demande de Parole[/color][/b]
Bouton 4 :
Code:
[b][color=orange][222 : OP-Ouest] Statut : Transport CH[/color][/b]
Bouton 5 :
Code:
[b][color=orange][222 : OP-Ouest] Statut : Disponible Radio[/color][/b]
Bouton 6 :
Code:
[b][color=orange][222 : OP-Ouest] Statut : Retour Indisponible[/color][/b]
Bouton 7 :
Code:
[b][color=orange][216 : SSU 76B] Statut : Demande de Parole[/color][/b]
Bouton 8 :
Code:
[b][color=orange][266 : FREQ 3/4] Message :[/color][/b]

Je n'ai pas encore défini d'image pour chaque bouton mais je pourrais modifier l'URL de l'image par la suite.
jsp d'octeville

jsp d'octeville
***

Messages : 148
Inscrit(e) le : 01/03/2009

Voir le profil de l'utilisateur http://cisocteville.meilleurforum.com/
jsp d'octeville a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par demeter1 Ven 12 Déc 2014 - 20:53

et pourquoi ne pas faire un bouton avec une liste déroulante ???
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

Voir le profil de l'utilisateur https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par Invité Sam 13 Déc 2014 - 6:54

Salut jsp d'octeville et Stéphane Wink ,

supprimes éventuellement le javascript donné par demeter1 (que je salue).

Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.

Colles tout ce contenu:
Code:

//Le bloc regroupant les boutons
$(document).ready(function(){
$(function(){
$('<div id="M14_All">
<div class="M14_btn1"></div>
<div class="M14_btn2"></div>
<div class="M14_btn3"></div>
<div class="M14_btn4"></div>
<div class="M14_btn5"></div>
<div class="M14_btn6"></div>
<div class="M14_btn7"></div>
<div class="M14_btn8"></div>
</div>').insertAfter('.sceditor-group:last');
});});

//Bouton  Départ
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/17/71/75/73/revu-f11.png)">a</div></a>').appendTo('#M14_All .M14_btn1').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText(" [b][color=orange][222 : OP-Ouest] Statut : Départ[/color][/b]");
});
});
});

//Bouton Sur Les Lieux
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn2').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][222 : OP-Ouest] Statut : Sur Les Lieux[/color][/b]");
});
});
});
//Bouton Demande de Parole
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn3').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][222 : OP-Ouest] Statut : Demande de Parole[/color][/b]");
});
});
});
//Bouton Transport CH
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn4').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][222 : OP-Ouest] Statut : Transport CH[/color][/b]");
});
});
});
//Bouton Disponible Radio
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn5').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][222 : OP-Ouest] Statut : Disponible Radio[/color][/b]");
});
});
});
//Bouton Retour Indisponible
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn6').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][222 : OP-Ouest] Statut : Retour Indisponible[/color][/b]");
});
});
});
//Bouton
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn7').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][216 : SSU 76B] Statut : Demande de Parole[/color][/b]");
});
});
});
//Bouton Message
$(document).ready(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i39.servimg.com/u/f39/11/26/21/37/calend11.png)">a</div></a>').appendTo('#M14_All .M14_btn8').click(function(){
$('#text_editor_textarea').sceditor("instance").insertText("[b][color=orange][266 : FREQ 3/4] Message :[/color][/b]");
});
});
});


Il faudra donc les liens des images .

Penses à cliquer sur le boutonAjout groupe de bouton éditeur de message Boutonvalider

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style


Je me suis basé sur un style avec 8 boutons avec chacun respectivement une
image avec les dimensions suivantes:
16px sur 16px


Colles ceci:
Code:

/*Le bloc des boutons*/

#M14_All
{
    background-color: #ccc !important;/*la couleur de fond*/
    border: 1px solid #ccc !important;/*les bordures*/
    -webkit-border-radius: 3px !important;/*les arrondis*/
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    display: inline-block!important;/* ne pas toucher*/
    margin: 1px 5px 1px 0px !important;/* ne pas toucher*/
    padding: 1px !important;/* ne pas toucher*/
    width: 220px !important;/*la largeur du bloc */
}
/*Les boutons*/
.M14_btn1 .sceditor-button , .M14_btn2 .sceditor-button ,.M14_btn3 .sceditor-button ,
.M14_btn4 .sceditor-button , .M14_btn5  .sceditor-button ,.M14_btn6 .sceditor-button ,
.M14_btn7 .sceditor-button , .M14_btn8 .sceditor-button
{
    background-clip: padding-box !important;/* ne pas toucher*/
    -webkit-border-radius: 3px !important;/*les arrondis*/
    -moz-border-radius: 3px !important;
    border-radius: 3px !important;
    cursor: pointer !important;/*style du curseur*/
    float: left !important;/* ne pas toucher*/
    height: 20px !important;/* ne pas toucher*/
    padding: 3px 5px !important;/* ne pas toucher*/
    text-indent: -9999px !important;/* ne pas toucher*/
    width: 16px !important;/* ne pas toucher*/
}


Penses à cliquer sur le boutonAjout groupe de bouton éditeur de message Boutonvalider

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout groupe de bouton éditeur de message

Message par jsp d'octeville Dim 14 Déc 2014 - 22:27

C'est parfait !

Merci beaucoup !
jsp d'octeville

jsp d'octeville
***

Messages : 148
Inscrit(e) le : 01/03/2009

Voir le profil de l'utilisateur http://cisocteville.meilleurforum.com/
jsp d'octeville a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum