[résolu] Ajouter des styles dans la barre d'outil de l'éditeur

3 participants

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

Résolu [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Lun 14 Oct 2013 - 22:01

Bonjour,
quelqu'un saurait il comment je pourrais rajouter dans la barre d'outil de l'éditeur un bouton listant un certain nombre de styles simples issus d'une combinaisons de balises de mise en forme ("gras-rouge-italique-14 pt" par exemple) ?
(je ne parle pas de style css)

Cela implique

  1. de savoir rajouter un bouton
  2. de définir les styles dans un script par l'empilement des balises souhaitées
    Code:
    Par exemple

    Style1.open=[b][color=red][i][size=14]
    Style1.close=[/size][/i][/color][/b]

    La syntaxe correcte restant de la responsabilité du scripteur.
  3. de les appliquer sur la sélection en utilisant les balises concernées

Le menu pourrait ressembler à celui du sélecteur de couleurs simplifié.
Je ne sais si c'est le bon endroit pour poster.
Ici ou dans les suggestions (avec sondage).
Si vous pensez que cela n'est pas la bonne place, merci de déplacer le sujet.


Dernière édition par Jama le Lun 21 Oct 2013 - 9:59, édité 1 fois
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par demeter1 Lun 14 Oct 2013 - 23:23

Bonsoir Jana,

Milouze m'a apporté son aide sur une demande similaire. A voir si cela fonctionne sous phpbb3

https://forum.forumactif.com/t352607-rajout-de-boutons-personnalise-avec-liste-deroulante-sur-le-nouvel-editeur
demeter1

demeter1
Membre actif

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

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

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 6:50

Merci Demeter de votre réponse.
Je suis allé voir la solution de Milouze que vous évoquez..
Mallheureusement, comme vous le soulignez, votre forum est en phpBB2, et le mien en phpBB3 où les templates ne sont pas accessibles.
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mar 15 Oct 2013 - 7:54

Bonjour,
Peut être que ceci fonctionne en V3

Code:
$(function(){$(function(){
        
         $('<a class="sceditor-button" unselectable="on" title="JAMA"><div unselectable="on" style="background-image:url(http://i34.servimg.com/u/f34/11/40/46/60/aaaatt10.gif); margin: 3px 0;">Réponse JAMA</div></a>').insertBefore('.sceditor-button.sceditor-button-bold').click(function(){
            $("#text_editor_textarea").sceditor("instance").insertText("[b][color=red][i][size=14]","[/size][/i][/color][/b]");
          });
        
       })});
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 7:57

AenigmA a écrit:Bonjour,
Peut être que ceci fonctionne en V3

Code:
$(function(){$(function(){
        
         $('<a class="sceditor-button" unselectable="on" title="JAMA"><div unselectable="on" style="background-image:url(http://i34.servimg.com/u/f34/11/40/46/60/aaaatt10.gif); margin: 3px 0;">Réponse JAMA</div></a>').insertBefore('.sceditor-button.sceditor-button-bold').click(function(){
            $("#text_editor_textarea").sceditor("instance").insertText("[b][color=red][i][size=14]","[/size][/i][/color][/b]");
          });
        
       })});
Merci Aenigma.
Comment l'utiliser ?
A mettre en CSS ?


Dernière édition par Jama le Mar 15 Oct 2013 - 8:03, édité 1 fois
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mar 15 Oct 2013 - 8:00

C'est du javascript Smile
Sur toutes les pages et valide. Tu verras le bouton en début de barre d'outils (si ça fonctionne ...)
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 8:05

AenigmA a écrit:C'est du javascript Smile
Sur toutes les pages et valide. Tu verras le bouton en début de barre d'outils (si ça fonctionne ...)
A priori sans effet
Merci quand même
J'essaie de comprendre le code pour voir où ça coince.
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mar 15 Oct 2013 - 8:15

Tu as mal copié collé
On voit plein de signe cabalistique lol        Â
Efface le et mets le sur une autre page sinon plus tard tu ne t'y retrouveras plus
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 8:25

AenigmA a écrit:Tu as mal copié collé
On voit plein de signe cabalistique lol        Â
Efface le et mets le sur une autre page sinon plus tard tu ne t'y retrouveras plus
Moi, je n'ai rien de tout ça. Où vois tu ces "hiéroglyphes" ???
Et que veux tu dire par une autre page ?
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 8:28

Merci beaucoup.
ça, y est.
Un commentaire mal foutu (:* au lieu de /*, les joies de la touche shift Smile)
J'analyse ton code histoire d'avancer.
Mettre dans un pop up associé une liste de ces styles prédéfinis est ma prochaine étape.
Je clorais le sujet quand j'aurais trouvé la solution totale.
Par contre, est il possible de trouver quelque part le modèle de sceditor-button et autres éléments de la barre de l'éditeur ?
eg sceditor-button.sceditor-button-bold
ital ? underlined ? color ? ...
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mar 15 Oct 2013 - 8:55

Tu veux dire quoi par modèle ?
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 9:01

La srtucture.
Je presume que les noms de classes et proprietes des objets de la barre sont definis quelque part.
Sceditor
Sceditor-button
Sceditor-button-bold

Impossible a utiliser si on ne les connait pas.
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 9:03

DOUBLON, DSL
à supprimer sans problème

La srtucture.
Je presume que les noms de classes et proprietes des objets de la barre sont definis quelque part.
Sceditor
Sceditor-button
Sceditor-button-bold

Impossible a utiliser si on ne les connait pas.


Dernière édition par Jama le Mar 15 Oct 2013 - 13:37, édité 1 fois
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mar 15 Oct 2013 - 9:04

Avec Chrome, click droit sur le bouton concerné, inspecter l'élément. Smile
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 9:07

Doublon
Je presume que cela doit ressembler a

Sceditor
>> sceditor groupe
>>>> bouton 1 ...
>>>>>> image
>>>>>>etc...
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 9:08

AenigmA a écrit:Avec Chrome, click droit sur le bouton concerné, inspecter l'élément. Smile
Que je suis bete
Mais c'est bien sur.
Merci
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 9:26

Je jetterai un coup d'oeil dès que je retrouverai un clavier.
Sur smartphone, lol
Wink
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 13:37

ça avance bien.
J'ai réussi à aligner mes boutons à l'endroit voulu.

Code:
$(function(){$(function(){

          $('<a class="sceditor-button" unselectable="on" title="Tiroir"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/15/71/85/69/tiroir10.gif); margin: 3px 0;">Réponse JAMA</div></a>').insertBefore('.sceditor-button.sceditor-button-size').click(function(){
            $("#text_editor_textarea").sceditor("instance").insertText("[color=#660099]","[/color]");
          });
         $('<a class="sceditor-button" unselectable="on" title="Trouvé"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/15/71/85/69/red10.gif); margin: 3px 0;">Réponse JAMA</div></a>').insertBefore('.sceditor-button.sceditor-button-size').click(function(){
            $("#text_editor_textarea").sceditor("instance").insertText("[b][color=red]","[/color][/b]");
          });
 $('<a class="sceditor-button" unselectable="on" title="chaud"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/15/71/85/69/blue10.gif); margin: 3px 0;">Réponse JAMA</div></a>').insertBefore('.sceditor-button.sceditor-button-size').click(function(){
            $("#text_editor_textarea").sceditor("instance").insertText("[b][color=blue]","[/color][/b]");
          });
 $('<a class="sceditor-button" unselectable="on" title="tiède"><div unselectable="on" style="background-image:url(http://i56.servimg.com/u/f56/15/71/85/69/cyan10.gif); margin: 3px 0;">Réponse JAMA</div></a>').insertBefore('.sceditor-button.sceditor-button-size').click(function(){
            $("#text_editor_textarea").sceditor("instance").insertText("[b][color=cyan]","[/color][/b]");
          });
      
       })});
Néanmoins, je continue à chercher le moyen pour isoler ces boutons
dans un groupe
ou
dans un menu pop-up comme la liste des polices par exemple.

Merci à Aenigma de m'avoir permis d'avancer. Wink
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mar 15 Oct 2013 - 18:16

Je croyais que tu avais essayé la méthode de Milouze que cite Demeter plus haut, mais là je vois que non. Elle doit fonctionner en V3. Pas besoin d'accès aux templates sur le dernier script donné, javascript et css seulement.
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mar 15 Oct 2013 - 20:30

Un peu débordé

celui là, en script à adapter ?
Code:
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Xata</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Xata]","[/Xata]");
});
})
});
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Hydra</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Hydra]","[/Hydra]");
});
})
});
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Présentation</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre3 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Presentation]","[/Presentation]");
});
})
});
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Charte</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre4 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Charte]","[/Charte]");
});
})
});
 
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Titre</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre5 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Titre]","[/Titre]");
});
})
});
 
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Verrou</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre6 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Verrou]","[/Verrou]");
});
})
});
 
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="LE TITRE AU SURVOL DU BOUTON">
<div unselectable="on" style="background-image:none !important"></div>
<span>Modération</span>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre7 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[Moderation]","[/Moderation]");
});
})
});
 
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par demeter1 Mer 16 Oct 2013 - 1:30

Jama a écrit:Merci Demeter de votre réponse.
Je suis allé voir la solution de Milouze que vous évoquez..
Mallheureusement, comme vous le soulignez, votre forum est en phpBB2, et le mien en phpBB3 où les templates ne sont pas accessibles.
Vous devriez relire le topic. Une solution a été donnée pour ne passer que par du javascript et du css. Siffleur 

demeter1

demeter1
Membre actif

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

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

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mer 16 Oct 2013 - 6:25

avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mer 16 Oct 2013 - 7:12

Ben oui il te parle ça, mets bien une image au début à l'emplacement "LE LIEN DE L IMAGE" et n'oublie pas le css un peu plus haut. Je viens d'essayer et ça fonctionne en V3
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mer 16 Oct 2013 - 7:19

Merci Demeter et aenigma, et aussi a milouze,
Le css en question,
Celui mentionné là ?
https://forum.forumactif.com/t352607p60-rajout-de-boutons-personnalise-avec-liste-deroulante-sur-le-nouvel-editeur#3046657

J'essaierai tout à l'heure.
Bon sang dur de se remettre au codage.
Wink
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par AenigmA Mer 16 Oct 2013 - 7:21

Il y a qu'un css donc oui hihi
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mer 16 Oct 2013 - 7:52

OK
Je poursuis mon petit chemin
ça rentre peu à peu

Wink Wink Wink

Merci
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mer 16 Oct 2013 - 8:24

ça avance.
Faut que je comprenne pourquoi il y a un décalage des libellés, la première ligne du menu est blanche.
Doit y avoir un CR de trop quelque part.
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Mer 16 Oct 2013 - 13:09

Je crois en être venu à bout. Wink

Le script

Code:
$(function(){
 
 $('body').append("<div id='M14_bloc_deroulant'>
<ul>
<li>
<a href='#'><img src='http://i56.servimg.com/u/f56/15/71/85/69/painte10.png'/></a>
<ul class='fallback'>
  <li class='M14_soustitre1'></li>
  <li class='M14_soustitre2'></li>
  <li class='M14_soustitre3'></li>
  <li class='M14_soustitre4'></li>
  <li class='M14_soustitre5'></li>
  <li class='M14_soustitre6'></li>
</ul>
</li>
</ul>
</div>");
});
 
 
 
 
$(function(){  
$(function(){
$('#M14_bloc_deroulant').insertAfter('.sceditor-button-color');
 
      
       })});
 
$(function () {
$('#M14_bloc_deroulant li ul').hide().removeClass('fallback');
$('#M14_bloc_deroulant li').hover(function () {
$('ul', this).stop().slideToggle(400);
 });
 });
 
 
 




$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Trouvé, Colore les mots sélectionnés en rouge">
<div unselectable="on" style="background:red !important"></div>
<div unselectable="on" style="background-image:none !important"></div>

</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre1 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[color=red]","[/color]");
});
})
});

$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Très Chaud, Colore les mots sélectionnés en bleu foncé">
<div unselectable="on" style="background:darkblue !important"></div>
<div unselectable="on" style="background-image:none !important"></div>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre2 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[color=blue]","[/color]");
});
})
});

$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Chaud, Colore les mots sélectionnés en bleu">
<div unselectable="on" style="background:blue !important"></div>
<div unselectable="on" style="background-image:none !important"></div>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre3 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[color=blue]","[/color]");
});
})
});


$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Tiède, colore les mots sélectionnés en cyan">
<div unselectable="on" style="background:cyan !important"></div>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre4 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("[color=deepskyblue]","[/color]");
});
})
});


$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Tiroir, colore la définition en indigo et met la bonne police">
<div unselectable="on" style="background:indigo !important"></div>
<div unselectable="on" style="background-image:none !important"></div>
</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre5 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insertText("[size=14][font=Comic Sans MS][color=#660099]","[/color][/font][/size] " );
});
})
});
 
$(function(){
$(function(){
$('<a class="sceditor-button" unselectable="on" title="Explication">
<div unselectable="on" style="background:green !important"></div>
<div unselectable="on" style="background-image:none !important"></div>

</a>')
.appendTo('#M14_bloc_deroulant li.M14_soustitre6 ').click(function()
{
$('#text_editor_textarea').sceditor("instance")
.insert("   [Color=red][b]","[/b][/color] [i][Color=green] car tapez ici votre explication[/color][/i] (Qui) ");
});
})
});
Le code css
Code:

/* Menu deroulant_couleur_charade*/

 
#M14_bloc_deroulant {background:transparent;float:right;height:20px;margin-top:5px;margin-left:5px; margin-right:5px}
#M14_bloc_deroulant ul {text-align:center;}
#M14_bloc_deroulant ul li {display:inline;}
 
#M14_bloc_deroulant ul li a {display:block;}
#M14_bloc_deroulant ul li ul
{
position:absolute;
background:#FFF;
width:20px;
padding:2px 2px 2px 2px;
border:1px solid #666;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
#M14_bloc_deroulant ul li ul li.M14_soustitre1 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre2 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre3 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre4 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre5 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre6 ,
#M14_bloc_deroulant ul li ul li.M14_soustitre7
{
margin:0;
padding:0;
width:80px;
height:20px;
float:left;
 
}
 
#M14_bloc_deroulant ul li ul li a.sceditor-button
{display:inline;padding:2px ;color:#444;font-size:12px;text-decoration:none!important;}
#M14_bloc_deroulant ul li ul li:hover a.sceditor-button {background:transparent;}
#M14_bloc_deroulant ul li ul.fallback {display:none;padding:2px;}
#M14_bloc_deroulant ul li:hover ul.fallback {display:block;}
#M14_bloc_deroulant a.sceditor-button:hover {box-shadow:none!important;}

/* Fin menu deroulant */
J'attends les résultats à l'utilisation.
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur

Message par Jama Lun 21 Oct 2013 - 9:55

Cela semble au point.
Je clos le sujet
avatar

Jama
****

Masculin
Messages : 355
Inscrit(e) le : 04/06/2011

http://charades-et-rebus.forumgratuit.org
Jama 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