Ajout groupe de bouton éditeur de message

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 le 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
***

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

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 le 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]");
        });
      });
});

http://i56.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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le 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
***

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

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 le 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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le 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
***

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

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 le Ven 12 Déc 2014 - 16:20

Up SVP

jsp d'octeville
***

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

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 Milouze14 le 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++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 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 le 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
***

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

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 le Ven 12 Déc 2014 - 20:53

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

demeter1
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

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

Message par Milouze14 le 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 bouton

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 bouton

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4565
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 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 le Dim 14 Déc 2014 - 22:27

C'est parfait !

Merci beaucoup !

jsp d'octeville
***

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

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


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