Script de choix d'image de fond fait disparaître l'éditeur

[Mattatat]

Bonjour à tous, et merci pour votre temps.
J'ai cherché un peu partout et je n'ai pas trouvé. J'ai suivi l'astuce qui permets d'ajouter un bouton de choix d'image de fond dans un message, celle ci : https://forum.forumactif.com/t355590-bouton-de-choix-d-image-de-fond-pour-message.

Le bouton s'affiche, tout va bien, je peux sélectionner mon arrière plan dans mon message, je le poste, tout va bien. Puis lorsque je veux faire une réponse à ce message, l'éditeur à disparu. L'éditeur remarche sur un autre sujet, jusqu'à ce que l'on utilise ce bouton.

Avant :


Après :


Notez que je n'ai touché le script qu'uniquement pour mettre mes images, et j'ai tout remplacé pour être sur, même résultat.

Voici le script :

Code:

$(function() {
  $("div.postbody").each(function() {
    var n = this;
    if($(".post-entry", n).length) {
      n = $(".post-entry", n)[0]
    }else {
      if($(".content", n).length) {
        n = $(".content", n)[0]
      }
    }
    while(n.nodeType != 3 && n.hasChildNodes()) {
      n = n.childNodes[0]
    }
    if(n.nodeType != 3) {
      return val
    }
    if(n.nodeValue.substr(0,  != "[postbg=") {
      return val
    }
    var m = n.nodeValue.match(/^\[postbg=([^\[]*)\]/);
    $(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
    n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
    if(!n.nodeValue && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
      $(n.nextSibling).remove()
    }
  });
  if($("#text_editor_textarea").length && $.sceditor) {
    var bglist = "http://image.noelshack.com/fichiers/2013/44/1383232530-00000000000012151a-146.png,http://image.noelshack.com/fichiers/2014/16/1397758649-bg4.jpg,".split(",");
    var bgnum = -1;
    var val = $("#text_editor_textarea").val();
    if(val.substr(0,  == "[postbg=") {
      var m = val.match(/^\[postbg=([^\[]*)\]/);
      if(m) {
        var r = $.inArray(m[1], bglist);
        if(r != -1) {
          bgnum = r
        }else {
          bgnum = bglist.length - 1
        }
        $(function() {
          $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px");
          $(".sceditor-container").css("background-image", "url(" + m[1] + ")")
        });
        $("#text_editor_textarea").val(val.replace(/^\[postbg=[^\[]*\]/, ""))
      }
    }
    $(function() {
      if(!$("#text_editor_textarea").sceditor("instance")) {
        return
      }
      $('<a class="sceditor-button" unselectable="on" title="Fond de message"><div unselectable="on" style="background:url(http://i.imgur.com/Hrf5w1i.gif);opacity:1">Fond de message</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
        if(e.ctrlKey) {
          $(".sceditor-container").css("background-image", "");
          bgnum = -1
        }else {
          bgnum++;
          if(!bgnum) {
            $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px")
          }
          $(".sceditor-container").css("background-image", "url(" + bglist[bgnum % bglist.length] + ")")
        }
      })
    });
    $(function() {
      $('form[name="post"]').submit(function() {
        if(bgnum != -1) {
          $("#text_editor_textarea").val(function(i, val) {
            return"[postbg=" + bglist[bgnum % bglist.length] + "]" + val
          })
        }
      })
    })
  }
});

Et le Css mis dans la feuille de style.

Code:

div.sceditor-container iframe, div.sceditor-container textarea {
  background: transparent;
}
.postbg {
  background-position: 0 0; background-repeat: repeat;
}

Si vous avez la solution, ou besoin de plus d'informations, n'hésitez pas !
Merci à tous.

[kiwi14637]

Bonsoir,

Essayez ce JS :

Code:

        $(function() {
          $("div.postbody").each(function() {
            var n = this;
            if($(".post-entry", n).length) {
              n = $(".post-entry", n)[0]
            }else {
              if($(".content", n).length) {
                n = $(".content", n)[0]
              }
            }
            while(n.nodeType != 3 && n.hasChildNodes()) {
              n = n.childNodes[0]
            }
            if(n.nodeType != 3) {
              return val
            }
            if(n.nodeValue.substr(0,  != "[postbg=") {
              return val
            }
            var m = n.nodeValue.match(/^\[postbg=([^\[]*)\]/);
            $(this).closest("div.post-container,div.post,td.row1,td.row2,div.postmain").addClass("postbg").css("background-image", "url(" + m[1] + ")");
            n.nodeValue = n.nodeValue.replace(/^\[postbg=[^\[]*\]\n?/, "");
            if(!n.nodeValue && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") {
              $(n.nextSibling).remove()
            }
          });
          if($("#text_editor_textarea").length && $.sceditor) {
            var bglist = "http://image.noelshack.com/fichiers/2013/44/1383232530-00000000000012151a-146.png,http://image.noelshack.com/fichiers/2014/16/1397758649-bg4.jpg".split(",");
            var bgnum = -1;
            var val = $("#text_editor_textarea").val();
            if(val.substr(0,  == "[postbg=") {
              var m = val.match(/^\[postbg=([^\[]*)\]/);
              if(m) {
                var r = $.inArray(m[1], bglist);
                if(r != -1) {
                  bgnum = r
                }else {
                  bgnum = bglist.length - 1
                }
                $(function() {
                  $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px");
                  $(".sceditor-container").css("background-image", "url(" + m[1] + ")")
                });
                $("#text_editor_textarea").val(val.replace(/^\[postbg=[^\[]*\]/, ""))
              }
            }
            $(function() {
              if(!$("#text_editor_textarea").sceditor("instance")) {
                return
              }
              $('<a class="sceditor-button" unselectable="on" title="Fond de message"><div unselectable="on" style="background:url(http://i.imgur.com/Hrf5w1i.gif);opacity:1">Fond de message</div></a>').insertAfter(".sceditor-button-fahide").click(function(e) {
                if(e.ctrlKey) {
                  $(".sceditor-container").css("background-image", "");
                  bgnum = -1
                }else {
                  bgnum++;
                  if(!bgnum) {
                    $(".sceditor-container").css("background-position", "0 " + ($(".sceditor-toolbar").height() + 6) + "px")
                  }
                  $(".sceditor-container").css("background-image", "url(" + bglist[bgnum % bglist.length] + ")")
                }
              })
            });
            $(function() {
              $('form[name="post"]').submit(function() {
                if(bgnum != -1) {
                  $("#text_editor_textarea").val(function(i, val) {
                    return"[postbg=" + bglist[bgnum % bglist.length] + "]" + val
                  })
                }
              })
            })
          }
        });

Bonne soirée !

[Mattatat]

Merci pour cette réponse rapide.
Toutefois, le script ne marche toujours pas, même il ne marche plus du tout. Par contre, j'ai fait d'autres tests, et j'ai remarqué que l'éditeur ne disparaît pas lorsqu'à la fois je sélectionne l'arrière plan grâce au bouton ET que je mets le bbcode bgpost= dans le message. (Celui confié par l'auteur du script pour mettre un background différent, non contenu dans la liste). Outre l'esthétisme foireux, c'est pas très très pratique. Si quelqu'un à la solution ...

Merci encore.

[kiwi14637]

Bonjour,

J'ai essayé le code du tuto. La première fois, ça marche. Après, j'édite le code et ça ne marche plus du tout. L'éditeur disparaît et on voit le BBcode postbg en "brut".
En se déconnectant, le BBcode est transformé.
J'ai vidé le cache.

Je crois qu'il faudrait en parler à Ea.

Bonne journée !

PS : Dans la console Firebug, j'ai trouvé ceci :
TypeError: m is null


...ay(m[1],bglist);if(r!=-1){bgnum=r}else{bgnum=bglist.length-1}$(function(){$(".sc...

[Ea]

Bonjour,


J'ai réalisé une modification ( au code présent dans le tutoriel ) pour un problème arrivant dans certains cas ( par exemple laisser le message vide ).

Le message d'erreur ne semble pas indiquer cela mais il faudrait déjà essayé, j'ai ajouté un test sur la première variable 'm' également ( mais l'erreur semble pointer vers la deuxième variable 'm' qui était déjà testée ).

Cordialement.

[kiwi14637]

Bonjour Ea,

Le script marche pour moi !
Merci beaucoup !

Bonne journée !

[Mattatat]

Bonjour Ea, merci pour tout, tout fonctionne à merveille !