Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Bouton smiley dans l'éditeur de message identique à celui du message rapide

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

Bouton smiley dans l'éditeur de message identique à celui du message rapide Empty Bouton smiley dans l'éditeur de message identique à celui du message rapide

Message par foxies le Mer 14 Aoû 2019 - 13:34

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:
Bouton smiley dans l'éditeur de message identique à celui du message rapide OZ11Vim

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour

Existe-t-il un moyen d'inclure au niveau de l'éditeur un bouton "smileys" identique à celui qui existe déjà dans la structure des réponses rapides s'il vous plaît ? Smile
foxies

foxies
*****

Féminin
Messages : 594
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Bouton smiley dans l'éditeur de message identique à celui du message rapide Empty Re: Bouton smiley dans l'éditeur de message identique à celui du message rapide

Message par foxies le Ven 16 Aoû 2019 - 6:23

Up Smile
foxies

foxies
*****

Féminin
Messages : 594
Inscrit(e) le : 02/05/2010

http://hawkeyeriver.forumgratuit.org/
foxies a été remercié(e) par l'auteur de ce sujet.

Bouton smiley dans l'éditeur de message identique à celui du message rapide Empty Re: Bouton smiley dans l'éditeur de message identique à celui du message rapide

Message par Milouze14 le Ven 16 Aoû 2019 - 8:03

Hello foxies,

ce genre de script pourrait t’intéresser.
Le bouton sur l'éditeur sera placé à gauche du bouton B présent sur l'éditeur.

Il faudra renseigner le lien de l'image qui sera placée sur l'éditeur ici:
Code:
//L IMAGE DU BOUTON SUR L EDITEUR
var M14_img="https://illiweb.com/fa//i/smiles/icon_biggrin.png";

Le titre au survol ici:
Code:
//TEXTE DE L INFOBULLE
var M14_title="Smileys 2";

Les images seront placées dans cette div( j'ai placé des smileys existants pour les tests) :
Code:

<div id="M14_smileys"class="sceditor-dropdown"style="display:none;">
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_cheers.png"/>
</div>
Il faut laisser la class "M14_editorImg" présente sur chaque image.
Tu peux ajouter autant d'images que tu le souhaites:

Le squelette :
Code:
<img class="M14_editorImg"src="LIEN DE L IMAGE"/>
Il est impératif de laisser toutes les images dans cette div et que les ouverture/fermeture de balises soient correctes
Sous peine de voir le script inopérant.



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

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposer ceci:
Code:

$(function(){$(function(){
//L IMAGE DU BOUTON SUR L EDITEUR
var M14_img="https://illiweb.com/fa//i/smiles/icon_biggrin.png";
//TEXTE DE L INFOBULLE
var M14_title="Smileys 2";
$('<a class="sceditor-button M14_SmilieS" unselectable="on"><div  unselectable="on"class="M14_smileys"style="background-image:url('+M14_img+')"title="'+M14_title+'">'+M14_title+'</div></a>
<div id="M14_smileys"class="sceditor-dropdown"style="display:none;">
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/lol.gif"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_rr.png"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_flower.png"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_geek.png"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_basketball.gif"/>
<img class="M14_editorImg"src="https://illiweb.com/fa//i/smiles/icon_cheers.png"/>
</div>').insertBefore('a.sceditor-button-bold');$('.M14_smileys').click(function(){$('#M14_smileys').toggle();});
$('.M14_editorImg').each(function(){$(this).click(function(){var smilYes=$(this).attr('src');
$('#text_editor_textarea').sceditor("instance").insert('[img]'+smilYes+'[/img]\n');
});});})});



Penses à cliquer sur le bouton VALIDER

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

Ajoutes ceci:

Code:

/*CURSEUR SUR LE BOUTON*/
a.sceditor-button.M14_SmilieS{cursor:pointer;}
/*LE CONTENEUR DES SMILEYS*/
#M14_smileys.sceditor-dropdown
{
margin-top:30px;
width: 150px;
height:100px;
overflow-y: auto;
border:2px solid black;
}
/*CHAQUE IMAGE DANS LE CONTENEUR*/
img.M14_editorImg
{
max-width:16px;
max-height:16px;
float: left;
margin: 2px;
}
a.sceditor-button.M14_SmilieS.disabled div{opacity:1!important;}

Penses à cliquer sur le bouton Bouton smiley dans l'éditeur de message identique à celui du message rapide Sans_t10

a++




Milouze14

Milouze14
Membre actif

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

https://www.milouze14.com/
Milouze14 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