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

Hello les ami(e)s,

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

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   .

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

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  ).
Dans ce petit menu, l'identifiant du membre sera automatiquement inséré.



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:



L'aperçu pour le html


Une fois le message publié :



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:




Allez le script maintenant .


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

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é

Désolé Philippe ce n'est pas pour moi je n'y arriverais pas tans pis pas grave ....
Bon dimanche à tous ....dédé

Merci Philippe

Mais je n'ai pas réussi non plus

Hello Chris,

merci d'être plus explicite et..

-Staff du Forum Milouze14- Ce forum n'a pas pour vocation d'apporter d'autre explication sur le tutoriel présent. Si ce dernier n'est pas assez explicite: Le forum d'entraide est prévu à cet effet. Pour toute information merci de contacter un Membre du Staff

Merci du partage

Salut forum,

Perplexe la madame...

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

Tourlou,

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