AwesomeBB : script pour citer un texte spécifique

[Invité]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://jeuxvideo-club.forumactif.com/

Description du problème

Bonjour,

Je ne sais pas si je peux poster cette demande.

Je sais qu'il existe une citation rapide où on doit citer un texte et appuyer sur un bouton : https://forum.forumactif.com/t357285-citation-rapide Je l'ai d'ailleurs installé sur mon forum

Mis en faisant une recherche sur le net, j'ai trouvé un vieux script chez votre confrère anglais Forumotion qui m'a l'air plus pratique : https://help.forumotion.com/t153344-tutorial-cite-specific-text . Je voulais savoir s'il est possible de le rendre compatible avec AwesomeBB ?  

Merci d'avance

[Invité]

Je relance

[chattigre]

Bonjour,

Quelle est la différence avec le script Anglais qui vous intéresse particulièrement ? Le fonctionnement reste très similaire à l'astuce de ce forum non ?

Bonne journée

[Invité]

Bonjour,

Quelle est la différence avec le script Anglais qui vous intéresse particulièrement ? Le fonctionnement reste très similaire à l'astuce de ce forum non ?

Bonne journée

Je trouve ça plus pratique, surtout sur mobile

[Invité]

Je relance

[chattigre]

Bonsoir,

Il est plus pratique, d'accord, mais à quel niveau ? ^^
Quelle est la différence entre la version anglaise et française, dans le fonctionnement, qui vous intéresse ?

Bonne journée

[Invité]

Bonsoir,

Il est plus pratique, d'accord, mais à quel niveau ? ^^
Quelle est la différence entre la version anglaise et française, dans le fonctionnement, qui vous intéresse ?

Bonne journée

Avec la version française :

Je sélectionne le texte avec mon petit doigt et je dois aller cliquer sur ... puis sur le bouton citation rapide. Et en plus, ça me pose problème car vu qu'on tape deux fois, la sélection disparaît.

Avec la version anglaise :

Je sélectionne le texte avec mon petit doigt et je clique direct sur le bouton. C'est une méthode que j'ai vu sur d'autres forums autre que ceux de FA et je trouve ça plus efficace

[chattigre]

Bonjour,

Je vois.
Le script anglais n'étant pas compliqué à adapter, j'ai regardé rapidement... Essayez ceci :

Code:

        /*
         *  Application: Cite specific text
         *  Date: 2016-09-08
         *  Version: 1.109052018
         *  Copyright (c) Daemon <help.forumotion.com>
         *  This work is free. You can redistribute it and/or modify it
         */
        (function() {
            quote = {
                initialize: function() {
                    $(function() {
                        if (!$.sceditor && _userdata.session_logged_in < 1) return;
                        quote.setupQuote();
                    });
                },
                setupQuote: function() {
                    $("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #f7f7f7;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '</style>'
                    );
                 
                    var el = $("<div>", {
                        class: "quote-box"
                    }).append(
                    '<div>' +
                    '    <input type="button" onclick="quote.quoteText()" value="Quote">' +
                    '    <input type="button" onclick="quote.mention()" value="@Mention">' +
                    '    <input type="button" onclick="quote.hideQuote()" value="×">' +
                    '</div>' +
                    '<span class="quote-stem"></span>'
                    );
         
                    $(el).appendTo("body");
         
                    var selectedTxt, author;
                    // VERSION AWESOMEBB
                    $(document).on("mouseup", ".post .post-content", function(e) {
                        var arr = {
                            'user': [],
                            'text': []
                        };
                        // VERSION AWESOMEBB
                        author = $(this).parents(".post-body").find(".post-aside .post-author-name a").text(),
                        selectedTxt = quote.getSelectionText();
                        if(selectedTxt) {
                            $(".quote-box").show().css({top: e.pageY + "px", left: e.pageX + "px"});
                            arr.user.push(author);
                            arr.text.push(selectedTxt);
                            sessionStorage.setItem("quote-box", JSON.stringify(arr));
                        } else {
                            quote.hideQuote();
                        }
                    });
                },
                quoteText: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("textarea").sceditor("instance").insert("[quote='" + stored.user + "']" + stored.text + "[/quote]");
                        quote.hideQuote();
                    }
                },
                mention: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("textarea").sceditor("instance").insert("@" + stored.user);
                        quote.hideQuote();
                    }
                },
                getSelectionText: function() {
                    var text;
                    if (window.getSelection) {
                        text = window.getSelection().toString();
                    } else if (document.selection && document.selection.type != "Control") {
                        text = document.selection.createRange().text;
                    }
                    return text;
                },
                hideQuote: function() {
                    $(".quote-box").hide();
                }
            };
            quote.initialize()
        })();

Je vous laisse tester, si ça ne fonctionne pas je regarderai pour une adaptation plus en détails demain...

Cordialement

[Invité]

Ca a l'air de bien fonctionner

J'ai juste deux petits problèmes !

Esthétiquement, ça ne rend pas pareil que l'image posté par le membre anglais



Et quand on fait plusieurs citations, les quotes se suivent. j'aimerais un saut de ligne



Merci beaucoup pour ton aide

[chattigre]

Bonjour,

Pour les boutons, c'est une simple question de style CSS du forum

J'ai essayé de reproduire à peu près la mise en forme de la capture du forum anglophone, mais impossible de reproduire exactement ^^
On peut aussi adapter selon ce que vous voulez pour votre forum.

Pour le souci de saut de ligne, c'est assez compliqué à gérer avec SCEditor qui n'aime pas les lignes vides en mode "visuel" / WYSIWYG... En revanche j'ai prévu un ajout de lignes, qui sera parfaitement fonctionnel si vous utilisez le mode "source" de l'éditeur.
Dans tous les cas pour écrire entre les citations un petit passage en mode source peut s'avérer nécessaire si vous en avez plusieurs à la suite... Je ne pourrai pas grand chose pour ça...

Essayez cette nouvelle version du JS :

Code:

        /*
         *  Application: Cite specific text
         *  Date: 2016-09-08
         *  Version: 1.109052018
         *  Copyright (c) Daemon <help.forumotion.com>
         *  This work is free. You can redistribute it and/or modify it
         */
        (function() {
            quote = {
                initialize: function() {
                    $(function() {
                        if (!$.sceditor && _userdata.session_logged_in < 1) return;
                        quote.setupQuote();
                    });
                },
                setupQuote: function() {
                    $("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #f7f7f7;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '.quote-box input {'+
                    '  background: #423737;'+
                    '  color: white;'+
                    '  padding: 3px;'+
                    '  border: 1px solid #ccc;'+
                    '  border-radius: 3px;'+
                    '  box-shadow: 0px 1px 1px 0px #000;'+
                    '}'+
                    '</style>'
                    );
                 
                    var el = $("<div>", {
                        class: "quote-box"
                    }).append(
                    '<div>' +
                    '    <input type="button" onclick="quote.quoteText()" value="Quote">' +
                    '    <input type="button" onclick="quote.mention()" value="@Mention">' +
                    '    <input type="button" onclick="quote.hideQuote()" value="×">' +
                    '</div>' +
                    '<span class="quote-stem"></span>'
                    );
         
                    $(el).appendTo("body");
         
                    var selectedTxt, author;
                    // VERSION AWESOMEBB
                    $(document).on("mouseup", ".post .post-content", function(e) {
                        var arr = {
                            'user': [],
                            'text': []
                        };
                        // VERSION AWESOMEBB
                        author = $(this).parents(".post-body").find(".post-aside .post-author-name a").text(),
                        selectedTxt = quote.getSelectionText();
                        if(selectedTxt) {
                            $(".quote-box").show().css({top: e.pageY + "px", left: e.pageX + "px"});
                            arr.user.push(author);
                            arr.text.push(selectedTxt);
                            sessionStorage.setItem("quote-box", JSON.stringify(arr));
                        } else {
                            quote.hideQuote();
                        }
                    });
                },
                quoteText: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        if($("#text_editor_textarea").sceditor('instance').getWysiwygEditorValue() != "") {
                            rn = "\n\n";
                        }
                        else {
                            rn = '';
                        }
                        $("#text_editor_textarea").sceditor("instance").insert(rn+"[quote='" + stored.user + "']" + stored.text + "[/quote]");
                        quote.hideQuote();
                    }
                },
                mention: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("#text_editor_textarea").sceditor("instance").insert("@" + stored.user);
                        quote.hideQuote();
                    }
                },
                getSelectionText: function() {
                    var text;
                    if (window.getSelection) {
                        text = window.getSelection().toString();
                    } else if (document.selection && document.selection.type != "Control") {
                        text = document.selection.createRange().text;
                    }
                    return text;
                },
                hideQuote: function() {
                    $(".quote-box").hide();
                }
            };
            quote.initialize()
        })();

Bonne journée
Cordialement

[Invité]

Bonjour,

Pour les boutons, c'est une simple question de style CSS du forum

---

Bonne journée
Cordialement

Tout d'abord merci.

Le CSS me va très bien. J'aimerais juste le texte en gras

J'ai deux questions :

S'il n'est pas possible de faire un saut de ligne, est-il possible de faire deux ajouts de ligne, ça compenserait ?

Sur mobile, le script ne fonctionne pas (l'autre script citation rapide non plus : https://forum.forumactif.com/t357285-citation-rapide ). Est-ce dû au script ou au moteur de forum ?

[chattigre]

Bonjour,

Sur mobile, c'est dû à des contraintes techniques propres aux écrans tactiles. Il vaut mieux laisser ainsi pour éviter une surcharge technique.

Pour le saut de ligne, j'ai essayé, ça ne change rien ^^
Et là c'est propre au moteur de l'éditeur, on n'y pourra rien

Pour le texte en gras :

Code:

        /*
         *  Application: Cite specific text
         *  Date: 2016-09-08
         *  Version: 1.109052018
         *  Copyright (c) Daemon <help.forumotion.com>
         *  This work is free. You can redistribute it and/or modify it
         */
        (function() {
            quote = {
                initialize: function() {
                    $(function() {
                        if (!$.sceditor && _userdata.session_logged_in < 1) return;
                        quote.setupQuote();
                    });
                },
                setupQuote: function() {
                    $("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #f7f7f7;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '.quote-box input {'+
                    '  background: #423737;'+
                    '  color: white;'+
                    '  font-weight: bold;'+
                    '  padding: 3px;'+
                    '  border: 1px solid #ccc;'+
                    '  border-radius: 3px;'+
                    '  box-shadow: 0px 1px 1px 0px #000;'+
                    '}'+
                    '</style>'
                    );
                 
                    var el = $("<div>", {
                        class: "quote-box"
                    }).append(
                    '<div>' +
                    '    <input type="button" onclick="quote.quoteText()" value="Quote">' +
                    '    <input type="button" onclick="quote.mention()" value="@Mention">' +
                    '    <input type="button" onclick="quote.hideQuote()" value="×">' +
                    '</div>' +
                    '<span class="quote-stem"></span>'
                    );
         
                    $(el).appendTo("body");
         
                    var selectedTxt, author;
                    // VERSION AWESOMEBB
                    $(document).on("mouseup", ".post .post-content", function(e) {
                        var arr = {
                            'user': [],
                            'text': []
                        };
                        // VERSION AWESOMEBB
                        author = $(this).parents(".post-body").find(".post-aside .post-author-name a").text(),
                        selectedTxt = quote.getSelectionText();
                        if(selectedTxt) {
                            $(".quote-box").show().css({top: e.pageY + "px", left: e.pageX + "px"});
                            arr.user.push(author);
                            arr.text.push(selectedTxt);
                            sessionStorage.setItem("quote-box", JSON.stringify(arr));
                        } else {
                            quote.hideQuote();
                        }
                    });
                },
                quoteText: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        if($("#text_editor_textarea").sceditor('instance').getWysiwygEditorValue() != "") {
                            rn = "\n\n";
                        }
                        else {
                            rn = '';
                        }
                        $("#text_editor_textarea").sceditor("instance").insert(rn+"[quote='" + stored.user + "']" + stored.text + "[/quote]");
                        quote.hideQuote();
                    }
                },
                mention: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("#text_editor_textarea").sceditor("instance").insert("@" + stored.user);
                        quote.hideQuote();
                    }
                },
                getSelectionText: function() {
                    var text;
                    if (window.getSelection) {
                        text = window.getSelection().toString();
                    } else if (document.selection && document.selection.type != "Control") {
                        text = document.selection.createRange().text;
                    }
                    return text;
                },
                hideQuote: function() {
                    $(".quote-box").hide();
                }
            };
            quote.initialize()
        })();

Bonne journée
Cordialement

[Invité]

Après plusieurs tests, le fait qu'il n'y ait pas de saut à la ligne est quand même bien gênant

D'autant plus que l'autre script citation rapide présent sur FA permet lui un saut de ligne.... Cela veut dire que ça doit être possible de corriger, non ?

En attendant, merci pour ton aide, encore

[Invité]

Je relance.

Le script fonctionne mais le saut à la ligne manque.

Avant de marquer le sujet comme résolu, je voudrais savoir s'il y a une solution pour corriger ça ?

Je demande parce que ce script (https://forum.forumactif.com/t357285-citation-rapide) permet un saut de ligne donc je me dis que ça doit être possible ? Non ?

[chattigre]

Bonjour,

Alors, pour tout vous dire, le script de ce forum utilise une manière assez peu orthodoxe d'ajouter la citation dans l'éditeur, en ajoutant manuellement le texte dans la textarea et en modifiant le contenu de l'iframe du mode visuel en conséquence, plutôt que de faire appel à la fonction dédiée .insert() de SCEditor...

Donc une version avec cette fonction de l'éditeur est plus "propre", mais si ça vous pose vraiment un gros problème, voilà qui devrait pouvoir le résoudre...

Code:

        /*
         *  Application: Cite specific text
         *  Date: 2016-09-08
         *  Version: 1.109052018
         *  Copyright (c) Daemon <help.forumotion.com>
         *  This work is free. You can redistribute it and/or modify it
         */
        (function() {
            quote = {
                initialize: function() {
                    $(function() {
                        if (!$.sceditor && _userdata.session_logged_in < 1) return;
                        quote.setupQuote();
                    });
                },
                setupQuote: function() {
                    $("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #f7f7f7;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '.quote-box input {'+
                    '  background: #423737;'+
                    '  color: white;'+
                    '  font-weight: bold;'+
                    '  padding: 3px;'+
                    '  border: 1px solid #ccc;'+
                    '  border-radius: 3px;'+
                    '  box-shadow: 0px 1px 1px 0px #000;'+
                    '}'+
                    '</style>'
                    );
                 
                    var el = $("<div>", {
                        class: "quote-box"
                    }).append(
                    '<div>' +
                    '    <input type="button" onclick="quote.quoteText()" value="Quote">' +
                    '    <input type="button" onclick="quote.mention()" value="@Mention">' +
                    '    <input type="button" onclick="quote.hideQuote()" value="×">' +
                    '</div>' +
                    '<span class="quote-stem"></span>'
                    );
         
                    $(el).appendTo("body");
         
                    var selectedTxt, author;
                    // VERSION AWESOMEBB
                    $(document).on("mouseup", ".post .post-content", function(e) {
                        var arr = {
                            'user': [],
                            'text': []
                        };
                        // VERSION AWESOMEBB
                        author = $(this).parents(".post-body").find(".post-aside .post-author-name a").text(),
                        selectedTxt = quote.getSelectionText();
                        if(selectedTxt) {
                            $(".quote-box").show().css({top: e.pageY + "px", left: e.pageX + "px"});
                            arr.user.push(author);
                            arr.text.push(selectedTxt);
                            sessionStorage.setItem("quote-box", JSON.stringify(arr));
                        } else {
                            quote.hideQuote();
                        }
                    });
                },
                quoteText: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("div.sceditor-toolbar + iframe").contents().find("body").append('<blockquote><cite>' + stored.user + '</cite>' + stored.text + '</blockquote> <br />');
                        $('.sceditor-container textarea')[0].value += '[quote="' + stored.user + '"]' + stored.text + '[/quote]' + "\n";
                        quote.hideQuote();
                    }
                },
                mention: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("#text_editor_textarea").sceditor("instance").insert("@" + stored.user);
                        quote.hideQuote();
                    }
                },
                getSelectionText: function() {
                    var text;
                    if (window.getSelection) {
                        text = window.getSelection().toString();
                    } else if (document.selection && document.selection.type != "Control") {
                        text = document.selection.createRange().text;
                    }
                    return text;
                },
                hideQuote: function() {
                    $(".quote-box").hide();
                }
            };
            quote.initialize()
        })();


Bonne journée
Cordialement

[Invité]

Merci beaucoup ! Je suis très content !

Juste pour savoir, la position du petit menu, c'est sur la partie CSS ?

[chattigre]

Bonjour,

Le CSS est intégré dans le JS (c'est pas forcément propre, mais ça fonctionne...) :

Code:

$("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #f7f7f7;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '.quote-box input {'+
                    '  background: #423737;'+
                    '  color: white;'+
                    '  font-weight: bold;'+
                    '  padding: 3px;'+
                    '  border: 1px solid #ccc;'+
                    '  border-radius: 3px;'+
                    '  box-shadow: 0px 1px 1px 0px #000;'+
                    '}'+
                    '</style>'
                    );

Vous voulez changer quoi quand vous parlez du positionnement ?

Bonne journée
Cordialement

[Invité]

Bonjour,

Le CSS est intégré dans le JS (c'est pas forcément propre, mais ça fonctionne...) :

Code:

$("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #f7f7f7;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '.quote-box input {'+
                    '  background: #423737;'+
                    '  color: white;'+
                    '  font-weight: bold;'+
                    '  padding: 3px;'+
                    '  border: 1px solid #ccc;'+
                    '  border-radius: 3px;'+
                    '  box-shadow: 0px 1px 1px 0px #000;'+
                    '}'+
                    '</style>'
                    );

Vous voulez changer quoi quand vous parlez du positionnement ?

Bonne journée
Cordialement

Rien de dramatique mais la pointe est à côté, j'aimerais qu'elle soit juste après la fin de la sélection en bas

Je vous met les codes car j'ai modifié les textes et deux couleurs (ça évitera que je recommence à chaque fois)

Code:

/*
        *  Application: Cite specific text
        *  Date: 2016-09-08
        *  Version: 1.109052018
        *  Copyright (c) Daemon <help.forumotion.com>
        *  This work is free. You can redistribute it and/or modify it
        */
        (function() {
            quote = {
                initialize: function() {
                    $(function() {
                        if (!$.sceditor && _userdata.session_logged_in < 1) return;
                        quote.setupQuote();
                    });
                },
                setupQuote: function() {
                    $("head").append(
                    '<style type="text/css">' +
                    '.quote-box {' +
                    '  z-index: 999;' +
                    '  margin-top: 16px;' +
                    '  position: absolute;' +
                    '  display: none;' +
                    '  background-color: rgba(70,70,70,0.6);' +
                    '  padding: 4px;' +
                    '  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7);' +
                    '  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.7 );' +
                    '  -moz-border-radius: 4px;' +
                    '  -webkit-border-radius: 4px;' +
                    '  border-radius: 4px;' +
                    '}' +
                    '.quote-box > div {' +
                    '  background-color: #FFFFFF;' +
                    '  padding: 5px;' +
                    '}' +
                    '.quote-box > input {' +
                    '  margin: 0 3px;' +
                    '  cursor: pointer;' +
                    '  border-radius: 3px;' +
                    '  -webkit-border-radius: 3px;' +
                    '  -moz-border-radius: 3px;' +
                    '}' +
                    '.quote-box > .quote-stem {' +
                    '  border-color: transparent transparent #000;' +
                    '  opacity: 0.3;' +
                    '  border-style: solid;' +
                    '  border-width: 15px;' +
                    '  display: block;' +
                    '  height: 0;' +
                    '  left: 5px;' +
                    '  position: absolute;' +
                    '  top: -30px;' +
                    '  width: 0;' +
                    '  z-index: 3;' +
                    '}' +
                    '.quote-box input {'+
                    '  background: #1D2C33;'+
                    '  color: white;'+
                    '  font-weight: bold;'+
                    '  padding: 3px;'+
                    '  border: 1px solid black;'+
                    '  border-radius: 3px;'+
                    '  box-shadow: 0px 1px 1px 0px #000;'+
                    '}'+
                    '</style>'
                    );
               
                    var el = $("<div>", {
                        class: "quote-box"
                    }).append(
                    '<div>' +
                    '    <input type="button" onclick="quote.quoteText()" value="Citer">' +
                    '    <input type="button" onclick="quote.mention()" value="Mentionner">' +
                    '    <input type="button" onclick="quote.hideQuote()" value="×">' +
                    '</div>' +
                    '<span class="quote-stem"></span>'
                    );
       
                    $(el).appendTo("body");
       
                    var selectedTxt, author;
                    // VERSION AWESOMEBB
                    $(document).on("mouseup", ".post .post-content", function(e) {
                        var arr = {
                            'user': [],
                            'text': []
                        };
                        // VERSION AWESOMEBB
                        author = $(this).parents(".post-body").find(".post-aside .post-author-name a").text(),
                        selectedTxt = quote.getSelectionText();
                        if(selectedTxt) {
                            $(".quote-box").show().css({top: e.pageY + "px", left: e.pageX + "px"});
                            arr.user.push(author);
                            arr.text.push(selectedTxt);
                            sessionStorage.setItem("quote-box", JSON.stringify(arr));
                        } else {
                            quote.hideQuote();
                        }
                    });
                },
                quoteText: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("div.sceditor-toolbar + iframe").contents().find("body").append('<blockquote><cite>' + stored.user + '</cite>' + stored.text + '</blockquote> <br />');
                        $('.sceditor-container textarea')[0].value += '[quote="' + stored.user + '"]' + stored.text + '[/quote]' + "\n";
                        quote.hideQuote();
                    }
                },
                mention: function() {
                    var stored = $.parseJSON(sessionStorage.getItem("quote-box"));
                    if(stored) {
                        $("#text_editor_textarea").sceditor("instance").insert("@" + stored.user);
                        quote.hideQuote();
                    }
                },
                getSelectionText: function() {
                    var text;
                    if (window.getSelection) {
                        text = window.getSelection().toString();
                    } else if (document.selection && document.selection.type != "Control") {
                        text = document.selection.createRange().text;
                    }
                    return text;
                },
                hideQuote: function() {
                    $(".quote-box").hide();
                }
            };
            quote.initialize()
        })();

[chattigre]

Bonjour,

La pointe se positionne là où vous avez votre curseur au moment du clic, pas par rapport à la taille de la sélection active

Donc la meilleure solution si vous préférez, ça reste de retirer la pointe...

Bonne journée
Cordialement

[Invité]

Bonjour,

La pointe se positionne là où vous avez votre curseur au moment du clic, pas par rapport à la taille de la sélection active

Donc la meilleure solution si vous préférez, ça reste de retirer la pointe...

Bonne journée
Cordialement

C'est bon ! Merci pour ton aide et ta patience !