Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[TOUTES VERSIONS] Ajouter l'avatar sur l'éditeur et encore plus...


5 participants

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

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 25 Mar 2018 - 6:50

Hello les ami(e)s,

le script a été développé par mon ami Ange Tuteur que je salue au passage hinhin .

http://fmdesign.forumotion.com/t415-emotiuser-become-your-own-personal-emoticon#3322

Il consiste a déposer l'avatar du membre sur l'éditeur.

Un petit merci est toujours agréable les ami(e)s  impeccable .

Mais le script ne s'arrête pas là heuu .

Si vous cliquez sur ce fameux avatar, il déroulera un petit menu typique à l'éditeur (donc pour l'instant vous n'êtes pas perdu clin oeil  ).
Dans ce petit menu, l'identifiant du membre sera automatiquement inséré.

[TOUTES VERSIONS] Ajouter l'avatar sur l'éditeur et encore plus... 1145

Au clic sur le bouton "Insérer":


Vous aurez la possibilité dans le script d'afficher le code en bbcode( par défaut)  ou en html .
Il suffira mettre 1 pour du html
Code:
       
// 0 = BBCode
// 1 = HTML
tagType :0,

L'aperçu pour le Bbcode:

[TOUTES VERSIONS] Ajouter l'avatar sur l'éditeur et encore plus... 2bbcod10

L'aperçu pour le html
[TOUTES VERSIONS] Ajouter l'avatar sur l'éditeur et encore plus... 2html10

Une fois le message publié :

[TOUTES VERSIONS] Ajouter l'avatar sur l'éditeur et encore plus... 412

Hum, c'est pas très chouette, on va ajouter un peu de style:

Si vous maitrisez le script, vous pouvez modifier son apparence ici:
Code:
<style type="text/css">.emotiuser, .emotiuser * { display:inline-block; } .emotiuser_icon { width:30px;height:30px; vertical-align:middle; margin:3px; } .sceditor-button-emotiuser div { background:none !important; }</style>

Sinon,

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposez ceci:
Code:

.emotiuser_icon
{
border:1px solid black;
padding:3px;
border-radius: 30px;
}



L'aperçu:

[TOUTES VERSIONS] Ajouter l'avatar sur l'éditeur et encore plus... 319


Allez le script maintenant super .


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mettre un titre explicite.
Cochez sur toutes les pages.


Déposez ceci:
Code:

(function() {
          'EmotiUser - Become your own personal emoticon !';
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/';
        
          window.EmotiUser = {
            default_icon : 'http://2img.net/i/fa/invision/pp-blank-thumb-38px.png', // default avatar
            cacheTime : 1*60*60*1000, // amount of time the avatar is  ( 1 hour )
          
            // tagType influences the type of tags used
            // 0 = BBCode
            // 1 = HTML
            tagType :0,
          
            // markup format
            tag : [
              '[table class="emotiuser"][tr][td]:u{UID}:[/td][/tr][/table]',
              '<span class="emotiuser">:u{UID}:</span>'
            ],
        
            parse : function() {
              if (!EmotiUser.tags) {
                EmotiUser.tags = $('.emotiuser');
                EmotiUser.index = -1;
              }
        
              var tag = EmotiUser.tags[++EmotiUser.index];
              if (tag) {
                var txt = $(tag).text(),
                    tag_id = txt.replace(/:u(\d+):/, '$1'),
                    storage = window.localStorage;
                  
                if (storage && storage['emotiuser_' + tag_id] && storage['emotiuser_' + tag_id + '_exp'] > +new Date - EmotiUser.cacheTime) {
                  var icon = document.createElement('IMG'),
                      data = JSON.parse(storage['emotiuser_' + tag_id]);
                    
                  icon.className = 'emotiuser_icon';
                  icon.src = data.src;
                  icon.alt = data.alt;
                  icon.title = data.title;
                
                  tag.parentNode.insertBefore(icon, tag);
                  tag.parentNode.removeChild(tag);
                  EmotiUser.parse();
                } else {
                  $.get('/ajax/index.php?f=m&user_id=' + tag_id, function(d) {
                    var icon = $('.tooltip-content > img', d)[0],
                        name = $('.tooltip-title', d).text() || d;
                
                    if (!icon) {
                      icon = document.createElement('IMG');
                      icon.src = EmotiUser.default_icon;
                    }
                  
                    icon.className = 'emotiuser_icon';
                    icon.title = name;
                    icon.alt = txt;
                
                    if (storage && window.JSON) {
                      storage['emotiuser_' + tag_id] = JSON.stringify({
                        src : icon.src,
                        alt : icon.alt,
                        title : icon.title
                      });
                      storage['emotiuser_' + tag_id + '_exp'] = +new Date;
                    }
                  
                    tag.parentNode.insertBefore(icon, tag);
                    tag.parentNode.removeChild(tag);
                    EmotiUser.parse();
                  });
                }
              } else {
                delete EmotiUser.tags;
                delete EmotiUser.index;
              }
            }
          };
        
  document.write('<style type="text/css">.emotiuser, .emotiuser * { display:inline-block; } .emotiuser_icon { width:30px;height:30px; vertical-align:middle; margin:3px; } .sceditor-button-emotiuser div { background:none !important; }</style>');
        
          $(function(){
            EmotiUser.parse();
          
            if ($.sceditor && toolbar) {
              $.sceditor.command.set('emotiuser', {
                dropDown : function(editor, caller, callback) {
                  var content = document.createElement('DIV'),
                      input = document.createElement('INPUT'),
                      submit = document.createElement('INPUT');
        
                  input.type = 'text';
                  input.value = _userdata.user_id;
                  input.id = 'emotiuser_number';
        
                  submit.type = 'button';
                  submit.className = 'button';
                  submit.value = 'Insérer';
                  submit.onclick = function() {
                    var id = +$('#emotiuser_number', this.parentNode)[0].value;
                    if (typeof id === 'number' && id > 0) {
                      callback(id);
                      editor.closeDropDown(true);
                    } else {
                      alert('Please insert a valid user id');
                    }
                  };
        
                  content.innerHTML = '<div><label for="emotiuser_number">Identifiant du membre</label></div>';
                  content.firstChild.appendChild(input);
                  content.appendChild(submit);
        
                  editor.createDropDown(caller, 'emotiuser', content);
                },
        
                exec : function(c) {
                  var e = this;
                  $.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
                    e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
                  });
                },
        
                txtExec : function(c) {
                  var e = this;
                  $.sceditor.command.get('emotiuser').dropDown(e, c, function(content) {
                    e.insertText(EmotiUser.tag[EmotiUser.tagType].replace(/\{UID\}/, content));
                  });
                },
              
                tooltip : 'EmotiUser'
              });
            
              toolbar = toolbar.replace(/date/, 'emotiuser,date');
            
              $(function() {
                var button = $('.sceditor-button-emotiuser div')[0];
                if (button) {
                  $(button).append(_userdata.avatar.replace(/<img/, '<img style="height:16px;width:16px;"'));
                  button.style.textIndent = '0px';
                }
              });
            }
          });
        }());



Pensez a cliquer sur le bouton Valider


Dernière édition par Milouze14 le Sam 7 Déc 2024 - 7:56, édité 5 fois
avatar
dédé54
http://le-piegeage.1fr1.net/

Messagedédé54 Dim 25 Mar 2018 - 8:49

Merci beaucoup , j'abandonne car je risque de faire des boulettes , moi je ne voulais que l'avatar comme cellui que je vois quand j’écris en réponse rapide ...Merci les amis ...dédé
avatar
dédé54
http://le-piegeage.1fr1.net/

Messagedédé54 Dim 25 Mar 2018 - 12:01

Désolé Philippe ce n'est pas pour moi je n'y arriverais pas tans pis pas grave ....
Bon dimanche à tous ....dédé
chrisnvidia
chrisnvidia
https://sos-pc.forumactif.org/

Messagechrisnvidia Dim 25 Mar 2018 - 18:52

Merci Philippe

Mais je n'ai pas réussi non plus oups1
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 25 Mar 2018 - 19:37

Hello Chris,

merci d'être plus explicite et..

-Staff du Forum Milouze14-


Pour toute information merci de contacter un Membre du Staff
Taraserie
Taraserie
http://rdvdesseries.forumsactifs.com/

MessageTaraserie Mer 24 Oct 2018 - 10:53

Merci du partage
Lilas
Lilas
http://lefofodemacopine.forumactif.com

MessageLilas Sam 24 Nov 2018 - 19:18

Salut forum,

Perplexe la madame...

Les Aperçus se sont fait la malle ou ils sont cachés ???

Tourlou,

Ha ha ha
Lilas
Lilas
http://lefofodemacopine.forumactif.com

MessageLilas Sam 24 Nov 2018 - 23:53

:u1679: que dit cette petite chose... ?

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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