Compteur de visites gratuit
CAForum infos
Ajouter imgur à l'éditeur de la réponse rapide Imgser10
Derniers sujets
» » Pas autorisé à poster pendant 7 jours?
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Aujourd'hui à 16:30 par Diane M

» » Le coucou du jour
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Aujourd'hui à 13:03 par David1195

» » Joyeux anniv Splash
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Aujourd'hui à 13:00 par David1195

» » Avatar de profil arrondit dans les messages
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Aujourd'hui à 12:55 par David1195

» » Vider le cache navigateur
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Mar 21 Mai 2019 - 13:39 par David1195

» » Différencier le mode texte et le mode WYSIWYG à l'éditeur
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Lun 20 Mai 2019 - 17:08 par Splash

» » Masquer la Google Map aux invités et la réserver aux membres en la publiant en iframe dans un forum dédié
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Lun 20 Mai 2019 - 15:30 par Splash

» » Les dernières informations de Forumactif
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Lun 20 Mai 2019 - 10:57 par Splash

» » [phpBB2] Que je clic sur n'importe quoi, cela m'amène toujours à la même page???
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Ven 17 Mai 2019 - 16:06 par Splash

» » Interdire aux modérateurs la suppression de messages
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Mar 14 Mai 2019 - 17:38 par Mathis

» » [JavaScript] Comment activer JavaScript dans votre navigateur
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Lun 13 Mai 2019 - 15:37 par Splash

» » Mon ordinateur est long à télécharger...
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Dim 12 Mai 2019 - 14:34 par Splash

» » Difficulté à s'inscrire sur mon forum
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Dim 12 Mai 2019 - 14:31 par Splash

» » Problème accès CSS
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Dim 12 Mai 2019 - 14:28 par Splash

» » Personnaliser la navbar en CSS
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Jeu 9 Mai 2019 - 9:26 par David1195

» » Personnaliser la navbar en CSS
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Jeu 9 Mai 2019 - 9:21 par David1195

» » Installer le traducteur Google
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Jeu 9 Mai 2019 - 0:35 par HeroxAquariophile

» » [phpBB2] Le mot inscription n'apparaît pas sur la bande à l'accueil...
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Mar 7 Mai 2019 - 20:29 par Splash

» » Les différents groupes d'un forum
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Mar 7 Mai 2019 - 9:00 par Splash

» » Réduire la hauteur des catégories
Ajouter imgur à l'éditeur de la réponse rapide Clock-10Lun 29 Avr 2019 - 19:37 par caerran

Ajouter imgur à l'éditeur de la réponse rapide

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

Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Mer 27 Fév 2019 - 6:18

  • MP
  • Zoom
Hi,

Voici une petite astuce pour ajouter un bouton, à la réponse rapide, pour l'hébergeur imgur

Direction le javascript

Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript


Mettre ce script Sur les sujets :
Code:
;window['FormData'] && $(function(){$(function(){
 
  var imgur_client_id = 'Client-ID';
 
  var current = 0, uploaded, xhrs, file_selector, button = $('<a class="sceditor-button imgur-button" unselectable="on" title="Héberger une image"><div unselectable="on">Héberger avec imgur</div></a>').insertBefore('.sceditor-button-servimg').click(function(){
    if(current) return finish();
    if(!file_selector) file_selector = $('<input type="file" multiple/ accept="image/*">').css({position:'absolute', top:-100}).appendTo('body').change(function (e) {
      var files = e.target.files, fd, len;
      uploaded = [], xhrs = [];
      for (var i = 0, len = files.length; i < len; i += 1) {
        if (files[i].type.indexOf('image/') && files[i].type !== 'application/pdf') continue;
        current++;
        fd = new FormData();
        fd.append('image', files[i]);
        (function(xhr){
          var num = i, xhr = jQuery.ajaxSettings.xhr();
          xhrs.push(xhr);
          xhr.open('POST', 'https://api.imgur.com/3/image');
          xhr.setRequestHeader('Authorization', 'Client-ID '+imgur_client_id);
          xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4) return;
            current--;
            if (xhr.status === 200) {
              var res = JSON.parse(xhr.responseText);
              uploaded[num] = res.data.link;
            }
            if(!current) finish();
          };
          xhr.send(fd);
        })();
      }
      if(current) button.css({background:'url(https://i.imgur.com/EMsOJtZ.gif) no-repeat'});
    });
    file_selector.click();
    return false;
  }).children();
  var finish = function(){
    for(var i=0; i < xhrs.length; i++) {
        if(xhrs[i].readyState == 4) continue;
        xhrs[i].onreadystatechange = function(){};
        xhrs[i].abort();
    }
    for(var i=0; i < uploaded.length; i++) {
      if(uploaded[i] === undefined) continue;
      $('body').find('.sceditor-button-image').click().end().find('.sceditor-insertimage').find('#image').val(uploaded[i]).end().find('input.button').click();
      $('#text_editor_textarea').sceditor('instance').insertText('\n');
    }
    button.removeAttr('style');
    current = 0;
    file_selector.wrap('<form>').closest('form').get(0).reset();
    file_selector.unwrap();
    return false;
  };
})});

Renseignez votre Client ID ici :
Code:
var imgur_client_id = 'Client-ID';

Pour l'obtention de votre Client ID, voir ce topic : https://lesforums.caforum.fr/t351-remplacer-servimg-par-imgur

Pour changer le texte de l'infobulle c'est ici :
Code:
<div unselectable="on">Héberger avec imgur</div>

Remplacer Héberger avec imgur par ce que vous voulez

Pensez à   Valider 2

Un peu de CSS pour mettre une image au bouton

Direction le CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS


Mettre ce code à la CSS :
Code:
a.imgur-button div {
  background:url(https://i.imgur.com/rFzEjxZ.png);
}

Pensez à   Valider 2


Le nouveau bouton imgur figure à l'éditeur de la réponse rapide

Ajouter imgur à l'éditeur de la réponse rapide Imgur11




:u1:
À bientôt
Bye



† Aucune aide ne sera donnée en privé
David1195

David1195

StaffModo
StaffModo

MessageDavid1195 le Mer 27 Fév 2019 - 12:26

  • MP
  • Zoom
Merci beaucoup !



Modérateur des forums



chrisnvidia

chrisnvidia

Membre
Membre

Messagechrisnvidia le Mer 27 Fév 2019 - 16:38

  • MP
  • Zoom
Merci beaucoup !
LilaCH

LilaCH

Membre
Membre

MessageLilaCH le Dim 3 Mar 2019 - 9:03

  • MP
  • Zoom
Merci beaucoup !

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