[résolu] Ajouter des styles dans la barre d'outil de l'éditeur
3 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
[résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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
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.
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
- de savoir rajouter un bouton
- 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.
- 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
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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
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
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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.
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.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Bonjour,
Peut être que ceci fonctionne en V3
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]");
});
})});
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Merci Aenigma.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]");
});
})});
Comment l'utiliser ?
A mettre en CSS ?
Dernière édition par Jama le Mar 15 Oct 2013 - 8:03, édité 1 fois
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
C'est du javascript
Sur toutes les pages et valide. Tu verras le bouton en début de barre d'outils (si ça fonctionne ...)
Sur toutes les pages et valide. Tu verras le bouton en début de barre d'outils (si ça fonctionne ...)
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
A priori sans effetAenigmA a écrit:C'est du javascript
Sur toutes les pages et valide. Tu verras le bouton en début de barre d'outils (si ça fonctionne ...)
Merci quand même
J'essaie de comprendre le code pour voir où ça coince.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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
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
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Moi, je n'ai rien de tout ça. Où vois tu ces "hiéroglyphes" ???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
Et que veux tu dire par une autre page ?
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Merci beaucoup.
ça, y est.
Un commentaire mal foutu (:* au lieu de /*, les joies de la touche shift )
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 ? ...
ça, y est.
Un commentaire mal foutu (:* au lieu de /*, les joies de la touche shift )
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 ? ...
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Tu veux dire quoi par modèle ?
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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.
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.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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.
à 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
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Avec Chrome, click droit sur le bouton concerné, inspecter l'élément.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Doublon
Je presume que cela doit ressembler a
Sceditor
>> sceditor groupe
>>>> bouton 1 ...
>>>>>> image
>>>>>>etc...
Je presume que cela doit ressembler a
Sceditor
>> sceditor groupe
>>>> bouton 1 ...
>>>>>> image
>>>>>>etc...
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Que je suis beteAenigmA a écrit:Avec Chrome, click droit sur le bouton concerné, inspecter l'élément.
Mais c'est bien sur.
Merci
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Je jetterai un coup d'oeil dès que je retrouverai un clavier.
Sur smartphone, lol
Sur smartphone, lol
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
ça avance bien.
J'ai réussi à aligner mes boutons à l'endroit voulu.
dans un groupe
ou
dans un menu pop-up comme la liste des polices par exemple.
Merci à Aenigma de m'avoir permis d'avancer.
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]");
});
})});
dans un groupe
ou
dans un menu pop-up comme la liste des polices par exemple.
Merci à Aenigma de m'avoir permis d'avancer.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Un peu débordé
celui là, en script à adapter ?
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]");
});
})
});
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Vous devriez relire le topic. Une solution a été donnée pour ne passer que par du javascript et du css.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.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
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.
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.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Il y a qu'un css donc oui hihi
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
OK
Je poursuis mon petit chemin
ça rentre peu à peu
Merci
Je poursuis mon petit chemin
ça rentre peu à peu
Merci
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
ç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.
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.
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Je crois en être venu à bout.
Le script
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) ");
});
})
});
- 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 */
Re: [résolu] Ajouter des styles dans la barre d'outil de l'éditeur
Cela semble au point.
Je clos le sujet
Je clos le sujet
Sujets similaires
» Ajouter un bouton Résolu sur les sujets
» comment ajouter le mode Résolu sur son forum?
» Comment ajouter un bouton résolu et en cours?
» [Résolu] Changer ou ajouter un hébergeur d'images
» Ajouter la barre de navigation et les notifications
» comment ajouter le mode Résolu sur son forum?
» Comment ajouter un bouton résolu et en cours?
» [Résolu] Changer ou ajouter un hébergeur d'images
» Ajouter la barre de navigation et les notifications
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