[PHPBB2] Tutoriel @tag | Ange Tuteur

Salut Phil j'espère que tu va bien , je viens te voir aujourd'hui puisque j'ai un souci pour l'installation d'un tuto
qui me donne un mal de tête :P donc je viens te voir en espérant que tu puisse m'aider .

il semblerais que plusieurs est le même problème c'est à dire un message d'erreur lorsque j'applique le tag "@" et je peux voir
tu la installé ici et il fonctionne .
Tuto : https://www.milouze14.com/t30501-toutes-versions-auto-suggestion-des-membres-sur-les-tags?highlight=auto

Donc la question que je me pose vraiment est celle-ci , est-ce que cette astuce est possible sur PHPBB2 ?
ou c'est un pluggin exclusif à edge ? Merci de ta réponse et de ton aide .

Hello Franck,

je vais bien merci,hum les vacances se terminent .

Donc la question que je me pose vraiment est celle-ci , est-ce que cette astuce est possible sur PHPBB2 ?

Oui elle est valide mais sur des templates d'origine.

il semblerais que plusieurs est le même problème c'est à dire un message d'erreur lorsque j'applique le tag "@" et je peux voir tu la installé ici et il fonctionne .

Hum quelle genre d'erreur s'il te plait ?

As tu modifié ce template memberlist_body
Affichage/Templates/Général/memberlist_body

Salut Phil merci pour ta réponse , et oui les vacances ce termine et l'été aussi .

Mon message d'erreur le voici : https://i.servimg.com/u/f84/16/67/19/10/milhou11.png

Donc en gros peut importe le nom que je vais entré le même message d'erreur apparait
il ne trouve aucun membres sur mon forum .

Hello Franck,

Milouze14 a écrit:Hello Franck,
as tu modifié ce template memberlist_body
Affichage/Templates/Général/memberlist_body

et pour le template ?

Code:

<br>
<form action="{S_MODE_ACTION}" method="get">
 
<table id="M14_Members"cellspacing="0" cellpadding="5" border="0" align="center" width="100%">
 <tr>
 <th  nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
 </tr>
 <tr>
 <td>
 <table id="M14_Members"cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
 <tr>
<td width="100%">Pseudo du membre!
  <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}"placeholder="Tapez ici le Pseudo ici" />     
 {L_SELECT_SORT_METHOD} {S_MODE_SELECT}     
 {L_ORDER} {S_ORDER_SELECT}     
 {S_HIDDEN_SID}
 <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}"/></td>
 </tr>
 </table>
 </td>
 </tr>
</table>

</form>

<div id="M14_Members_bloc">
<table id="M14_Members" width="100%" border="0" cellspacing="1" cellpadding="0"style="border:none !important;">
 
 <!-- BEGIN memberrow -->
 <tr>

<script>
$(function(){
$('.nav b').attr('title','Onglet actif');
$('a[href^="/memberlist"]').attr('title','Aller à cette page');
$('img[alt="Suivant"]').closest('a').attr('title','Page suivante');
$('img[alt="Précédent"]').closest('a').attr('title','Page précédente');
$('img.i_icon_pm').replaceWith('Envoyer un M.P');
$('a[title="Visiter le site web du posteur"] img').replaceWith('Site Web');
$('a[onmousedown^="createPagination"]').remove();
$('.M14_Members a.M14_User ').attr('title','Afficher son profil').click(function(){
$(this).next().slideDown();
$('p').click(function(){
  $(this).closest('div').slideUp();
  });
});});
</script>
<script>
$(function(){if(_userdata["user_id"] == -1)
$(function(){
$('#M14_gen.gen ,#M14_gen.gensmall').remove();
$('.M14_Members').find('a').removeAttr('title');
$('.M14_Members').attr('title','Vous devez être connecté ou enregistrez vous pour accéder aux fonctions ');
$('.M14_members_login , #M14_gen_Invite').show();
$('.M14_members_login a[href="/login"]').attr('title','Connectez vous');
$('.M14_members_login a[href="/register"]').attr('title','Enregistrez vous');
$('a[target="_blank"]').removeAttr('href');
})});
</script>


<div class="M14_Members">
 
<a class="M14_User">{memberrow.USERNAME}</a>
  <div style="display:none;">
<p style="float:right;"title="Fermer">X</p>   
  <span class="avatar mini">{memberrow.AVATAR_IMG}</span><br />
<!-- BEGIN switch_td_group -->
<span class="gen">{memberrow.GROUPS}</span><br />
<!-- END switch_td_group -->
<span class="gen">{memberrow.INTERESTS}</span><br />
<span class="gensmall">Date d'inscription</span><br />
<span id="M14_gen"class="gensmall">{memberrow.JOINED}</span>
<span id="M14_gen_Invite"class="gensmall"style="display:none;color:darkred !important;">Non disponible</span><br />
<span class="gensmall">Dernière visite</span><br />
<span id="M14_gen"class="gensmall">{memberrow.LASTVISIT}</span>
<span id="M14_gen_Invite"class="gensmall"style="display:none;color:darkred !important;">Non disponible</span><br  />
<span class="gen">Message(s)</span><br />
<span id="M14_gen"class="gen">{memberrow.POSTS}</span>
<span id="M14_gen_Invite"class="gensmall"style="display:none;color:darkred !important;">Non disponible</span><br />
{memberrow.PM_IMG} <br />
    <a href="{memberrow.U_VIEWPROFILE}"title="Voir le profil">Voir son profil</a><br />
{memberrow.WWW_IMG}&nbsp;<br />   
    <span class="M14_members_login"style="display:none;">
      <a href="/login">Connectez vous</a> <br />
      <a href="/register">Enregistrez vous</a>
</span>
</div>  </div></tr>
 <!-- END memberrow -->
 <!-- BEGIN switch_no_user -->
 <tr>
<td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center">
  <span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
 </tr>
 <!-- END switch_no_user -->
</table>
<br />
<!-- BEGIN switch_pagination -->
<table id="M14_Members"width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="nav">{PAGE_NUMBER}</span></td>
 <td align="right"><span class="nav">{PAGINATION}</span></td>
       
 </tr>
</table>
<br />
<!-- END switch_pagination -->
 
</div>

Voilà pour le template , il est en effet modifier quelque peu .

Hum,
tu peux tester avec le script d'Ange Tuteur modifié:

Code:

!window.fa_mentionner && !/\/privmsg|\/profile\?mode=editprofile&page_profil=signature/.test(window.location.href) && $(function(){$(function(){
              'SCEDITOR @HANDLE AUTO-SUGGEST';
              'DEVELOPED BY ANGE TUTEUR';
              'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
              'ORIGIN : http://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157';
              var container = $('.sceditor-container')[0],
                  text_editor = document.getElementById('text_editor_textarea'),
                  frame,
                  instance;
              if (container && text_editor) {
                frame = $('iframe', container);
                instance = $(text_editor).sceditor('instance');
                window.fa_mentionner = {
                  suggest_delay : 100, // delay before suggestions show up (100ms)
                  // language presets
                  lang : {
                    placeholder : 'Recherche...',
                    not_found : 'Utilisateur non trouvé'
                  },
                  // colors of the suggestion popup
                  color : {
                          font : '#333',
                    hover_font : '#FFF',
                    error_font : '#F00',
                          background : '#FFF',
                    hover_background : '#69C',
                    border : '#CCC',
                    shadow : 'rgba(0, 0, 0, 0.176)'
                  },
                  // sceditor instance and rangeHelper
                  instance : instance,
                  rangeHelper : instance.getRangeHelper(),
                  // cached nodes for listening and modifications
                  frame : frame[0],
                  body : frame.contents().find('body')[0],
                  textarea : $('textarea', container)[0],
                  // faux textarea and suggestion list
                  faux_textarea : $('<div id="faux_text_editor" />')[0], // helps us mirror the cursor position in source mode
                  list : $('<div id="fa_mention_suggestions" style="position:absolute;" />')[0],
                  // version specific selectors
                  selectors : $('.bodyline')[0] ? ['a.gen[href^="/u"]', '.avatar.mini a'] :
                              document.getElementById('ipbwrapper') ? ['.membername', '.mini-avatar'] :
                              null,
                  // adjusts the scroll position of the faux textarea so the caret stays in line
                  adjustScroll : function() {
                    fa_mentionner.faux_textarea.scrollTop = fa_mentionner.textarea.scrollTop;
                  },
                  // updates the content in the faux textarea
                  updateFauxTextarea : function(active, key) {
                    if (key == 16) { // 16 = SHIFT
                      return; // return when specific keys are pressed
                    }
                    // clear suggestion queue when suggestions aren't active
                    if (active != true) {
                      fa_mentionner.clearSuggestions();
                    } else {
                      return; // return when interactive keys are pressed while suggesting ; up, down, enter
                    }
                    // use another method if in WYSIWYG mode
                    if (!fa_mentionner.instance.inSourceMode()) {
                      key != 32 ? fa_mentionner.searchWYSIWYG() : fa_mentionner.clearSuggestions();
                      return;
                    }
                    var val = fa_mentionner.instance.val(),
                        range = 0,
                        selection,
                        faux_caret,
                        username;
                    // get the position of the caret
                    if (document.selection) {
                      selection = document.selection.createRange();
                      selection.moveStart('character', -fa_mentionner.textarea.length);
                      range = selection.text.length;
                    } else if (fa_mentionner.textarea.selectionStart || fa_mentionner.textarea.selectionStart == 0) {
                      range = fa_mentionner.textarea.selectionStart;
                    }
                    // set the position of the caret
                    val = val.slice(0, range) + '{FAUX_CARET}' + val.slice(range, val.length);
                    // parse and sanitize the faux textarea content
                    $(fa_mentionner.faux_textarea).html(
                      val.replace(/</g, '<')
                        .replace(/>/g, '>')
                        .replace(/@"(.*?)"|@(.*?)(?:\s|\r|\n|$)/g, function(M, $1, $2) {
                          var lastChar = M.substr(-1),
                              name = ($1 || $2 || '').replace(/\{FAUX_CARET\}|"/g, '');
                          return '<a href="#' + name + '">' + (/\s|\r|\n/.test(M) ? M.slice(0, M.length - 1) + '</a>' + lastChar : M + '</a>');
                        })
                        .replace(/\{FAUX_CARET\}/, '<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>')
                    );
                    faux_caret = document.getElementById('faux_caret');
                    // mentions are parsed as <a>nchors, so when the faux caret is inside one we'll show some suggestions
                    if (faux_caret && faux_caret.parentNode.tagName == 'A') {
                      fa_mentionner.value = val;
                      fa_mentionner.delay = window.setTimeout(function() {
                        fa_mentionner.suggest(faux_caret.parentNode.href.replace(/.*?#(.*)/, '$1'), $(faux_caret).offset());
                      }, fa_mentionner.suggest_delay);
                    }
                    fa_mentionner.adjustScroll();
                  },
                  // search for active mentions in wysiwyg mode
                  searchWYSIWYG : function() {
                    var selected = fa_mentionner.rangeHelper.cloneSelected(),
                        mentions = selected.startContainer.data && selected.startContainer.data.match(/(@".*?")|(@.*?)(?:\s|\r|\n|$)/g),
                        offset,
                        offset_marker,
                        hit,
                        i;
                        console.log(mentions);
                    if (mentions && mentions[0]) {
                      // clean up whitespace
                      for (i in mentions) {
                        mentions[i] = mentions[i].replace(/\s$/g, '');
                      }
                      // search for the mention that's currently being modified
                      for (i in mentions) {
                        if (!fa_mentionner.wysiwyg_mentions || (mentions[i] != fa_mentionner.wysiwyg_mentions[i])) {
                          hit = true;
                          fa_mentionner.delay = window.setTimeout(function() {
                            fa_mentionner.rangeHelper.insertMarkers(); // insert markers to help get the caret offset
                            offset = $(fa_mentionner.frame).offset();
                            offset_marker = $('#sceditor-end-marker', fa_mentionner.body).show().offset();
                            // add the marker offsets to the iframe offsets
                            offset.left += offset_marker.left;
                            offset.top += offset_marker.top - fa_mentionner.body.scrollTop;
                            fa_mentionner.suggest(mentions[i].slice(1).replace(/^"|"$/g, ''), offset, true);
                            fa_mentionner.wysiwyg_active = mentions[i]; // save the active mention for later use in finish()
                          }, fa_mentionner.suggest_delay);
                          break;
                        }
                      }
                      // hide the suggestion list if there's no newly modified mentions
                      if (!hit) {
                        fa_mentionner.list.style.display = 'none';
                        fa_mentionner.focused = null;
                      }
                      fa_mentionner.wysiwyg_mentions = mentions; // update the list of mentions
                    }
                  },
                  // suggest a list of users based on the passed username
                  suggest : function(username, offset, wysiwyg) {
                    // insert the suggestion list to show that it's searching
                    fa_mentionner.list.innerHTML = '<span class="fam-info">' + fa_mentionner.lang.placeholder + '</span>';
                    $(fa_mentionner.list).css({
                      left : offset.left + 'px',
                      top : offset.top + 'px',
                      display : 'block',
                      overflowY : 'auto'
                    });
                    document.body.appendChild(fa_mentionner.list);
                    // send a query request to the memeberlist to find users who match the typed username
                    fa_mentionner.request = $.get('/memberlist?change_version=prosilver=' + username, function(d) {
                      fa_mentionner.request = null;
                      var suggestion = $(fa_mentionner.selectors ? fa_mentionner.selectors[0] : '.avatar-mini a', d),
                          ava = fa_mentionner.selectors ? $(fa_mentionner.selectors[1], d) : null,
                          i = 0,
                          j = suggestion.length,
                          name;
                      fa_mentionner.list.innerHTML = '';
                      if (j) {
                        for (; i < j; i++) {
                          name = $(suggestion[i]).text().replace(/^\s+|\s+$/g, '');
                          fa_mentionner.list.insertAdjacentHTML('beforeend',
                            '<a href="javascript:fa_mentionner.finish(\'' + name.replace(/'/g, '\\\'') + '\', ' + wysiwyg + ');" class="fa_mention_suggestion">'+
                              '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).find('img').attr('src') + '"/>'+
                              '<span class="fa_suggested_name">' + name + '</span>'+
                            '</a>'
                          );
                        }
                        // change overflowY property when it exceeds 7 suggestions -- prevents unsightly scroll bug
                        fa_mentionner.list.style.overflowY = j > 7 ? 'scroll' : 'auto';
                        // update the focused suggestion and scroll it into view
                        fa_mentionner.list.firstChild.className += ' fam-focus';
                        fa_mentionner.focused = fa_mentionner.list.firstChild;
                        fa_mentionner.scrollSuggestions();
                      } else {
                        fa_mentionner.list.innerHTML = '<span class="fam-info" style="color:' + fa_mentionner.color.error_font + ';">' + fa_mentionner.lang.not_found + '</span>';
                      }
                    });
                  },
                  // kill the suggestion timeout while typing persists
                  clearSuggestions : function() {
                    if (fa_mentionner.delay) {
                      window.clearTimeout(fa_mentionner.delay);
                      fa_mentionner.delay = null;
                      fa_mentionner.list.style.display = 'none';
                      fa_mentionner.focused = null;
                    }
                    if (fa_mentionner.request) {
                      fa_mentionner.request.abort();
                      fa_mentionner.request = null;
                    }
                  },
                  // finish the username
                  finish : function(username, wysiwyg) {
                    var mention, index, i;
                    // hide and clear suggestions
                    fa_mentionner.clearSuggestions();
                    fa_mentionner.focused = null;
                    fa_mentionner.list.style.display = 'none';
                    if (!wysiwyg) {
                      fa_mentionner.value = fa_mentionner.value.replace(/(?:@".[^"]*?\{FAUX_CARET\}.*?"|@\{FAUX_CARET\}.*?(\s|\n|\r|$)|@.[^"\s]*?\{FAUX_CARET\}.*?(\s|\n|\r|$))/, function(M, $1, $2) {
                        mention = '@"' + username + '"';
                        return '{MENTION_POSITION}' + ( $1 ? $1 : $2 ? $2 : '' );
                      });
                      // get the index where the mention should be
                      index = fa_mentionner.value.indexOf('{MENTION_POSITION}');
                      fa_mentionner.value = fa_mentionner.value.replace('{MENTION_POSITION}', '');
                      // save current scroll position for application after the value has been updated
                      fa_mentionner.scrollIndex = fa_mentionner.textarea.scrollTop;
                      // update the textarea with the completed mention
                      fa_mentionner.instance.val('');
                      fa_mentionner.instance.insert(fa_mentionner.value.slice(0, index) + mention, fa_mentionner.value.slice(index, fa_mentionner.value.length));
                      // restore the scroll position for the textareas
                      fa_mentionner.textarea.scrollTop = fa_mentionner.scrollIndex;
                      fa_mentionner.adjustScroll();
                      // update the fake textarea
                      fa_mentionner.updateFauxTextarea();
                    } else {
                      // save the caret range in WYSIWYG so we can restore it after replacing the HTML
                      fa_mentionner.rangeHelper.saveRange();
                      fa_mentionner.body.innerHTML = fa_mentionner.body.innerHTML.replace(new RegExp(fa_mentionner.wysiwyg_active.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(<span.*?id="sceditor-end-marker".*?>)'), '@"' + username + '"$1');
                      fa_mentionner.body.focus();
                      fa_mentionner.rangeHelper.restoreRange();
                      // update the wysiwyg mention array so no new suggestions appear
                      for (i in fa_mentionner.wysiwyg_mentions) {
                        if (fa_mentionner.wysiwyg_mentions[i] == fa_mentionner.wysiwyg_active) {
                          fa_mentionner.wysiwyg_mentions[i] = '@"' + username + '"';
                          break;
                        }
                      }
                    }
                  },
                  // scroll the selected suggestion into view
                  scrollSuggestions : function() {
                    $(fa_mentionner.list).scrollTop(
                      (
                        $(fa_mentionner.focused).offset().top -
                        $(fa_mentionner.list).offset().top +
                        $(fa_mentionner.list).scrollTop()
                      ) -
                      (26 * 3) // 26 = the height of the suggestions, so display 3 suggestions above while scrolling
                    );
                  }
                };
                // get computed styles for the textarea and apply them to the faux textarea
                for (var css = window.getComputedStyle(fa_mentionner.textarea, null), i = 0, j = css.length, str = ''; i < j; i++) {
                  str += css[i] + ':'  + css.getPropertyValue(css[i]) + ';';
                }
                // add styles to the head
                $('head').append('<style type="text/css">'+
                  '#faux_text_editor {' + str + '}'+
                  '#faux_text_editor { position:absolute; left:0; bottom:0; z-index:-1; visibility:hidden; display:block; overflow-y:auto; }'+
                  '#fa_mention_suggestions { color:' + fa_mentionner.color.font + '; font-size:10px; font-family:arial, verdana, sans-serif; background:' + fa_mentionner.color.background + '; border:1px solid ' + fa_mentionner.color.border + '; margin-top:20px; z-index:999; max-height:182px; overflow-x:hidden; box-shadow:0 6px 12px ' + fa_mentionner.color.shadow + '; }'+
                  'a.fa_mention_suggestion, .fam-info { color:' + fa_mentionner.color.font + '; height:26px; line-height:26px; padding:0 3px; display:block; white-space:nowrap; cursor:pointer; }'+
                  'a.fa_mention_suggestion.fam-focus { color:' + fa_mentionner.color.hover_font + '; background:' + fa_mentionner.color.hover_background + '; }'+
                  '.fa_suggested_avatar { height:20px; width:20px; vertical-align:middle; margin-right:3px; }'+
                '</style>');
                // insert faux textarea into document
                fa_mentionner.textarea.parentNode.insertBefore(fa_mentionner.faux_textarea, fa_mentionner.textarea);
                // apply event handlers
                fa_mentionner.textarea.onclick = fa_mentionner.updateFauxTextarea;
                fa_mentionner.textarea.onscroll = fa_mentionner.adjustScroll;
                // update the faux textarea on keyup
                fa_mentionner.instance.keyUp(function(e) {
                  if (fa_mentionner.focused && e && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) {
                    fa_mentionner.updateFauxTextarea(true, e.keyCode);
                    return false;
                  } else {
                    fa_mentionner.updateFauxTextarea(false, e.keyCode);
                  }
                });
                // key events for the suggested mentions
                $([document, fa_mentionner.body]).on('keydown', function(e) {
                  var that = e.target;
                  if (fa_mentionner.focused && e && e.keyCode && (that.tagName == 'TEXTAREA' || that.tagName == 'BODY')) {
                    // move selection down
                    if (e.keyCode == 40) {
                      var next = fa_mentionner.focused.nextSibling;
                      if (next) {
                        $(fa_mentionner.focused).removeClass('fam-focus');
                        next.className += ' fam-focus';
                        fa_mentionner.focused = next;
                        fa_mentionner.scrollSuggestions();
                      }
                      return false;
                    }
                    // move selection up
                    if (e.keyCode == 38) {
                      var prev = fa_mentionner.focused.previousSibling;
                      if (prev) {
                        $(fa_mentionner.focused).removeClass('fam-focus');
                        prev.className += ' fam-focus';
                        fa_mentionner.focused = prev;
                        fa_mentionner.scrollSuggestions();
                      }
                      return false;
                    }
                    // apply selection
                    if (e.keyCode == 13) {
                      fa_mentionner.focused.click();
                      return false;
                    }
                  }
                });
                // update focused suggestion on hover
                $(document).on('mouseover', function(e) {
                  var that = e.target;
                  if (/fa_mention_suggestion/.test(that.className)) {
                    $(fa_mentionner.focused).removeClass('fam-focus');
                    that.className += ' fam-focus';
                    fa_mentionner.focused = that;
                  }
                });
              }
            })});


Resalut Phillipe , je viens tout juste de faire le test et maintenant tout fonctionne
alors je te remerci encore une fois de ton aide c'est très apprécié .

Si ont ne se reparle pas d'ici là , bonne fin d'été !!!

Hello Franck,
de rien et bonne fin d'été à toi aussi .

-Staff du Forum Milouze14- Hello  Sujet résolu et déplacé dans le forum adéquat. Pour toute information,merci de contacter un Membre du Staff