Questo tutorial ti aiuterà ad aggiungere un pulsante per scegliere lo sfondo del messaggio Hrf5w1iall'editor che ti permette di scegliere lo sfondo di un post.
Installazione CSSAndiamo verso Pannello di amministrazione ► Visualizzazione ► CSSs e immagini ► Foglio di stile CSS e aggiungiamo il seguente codice al nostro foglio di stile:
- Codice:
div.sceditor-container iframe, div.sceditor-container textarea { background:transparent } .postbg { background-position:0 0; background-repeat:repeat; }
Installazione JavascriptAndiamo versoPannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript, assicuriamoci che la gestione sia attivata e creiamo un nuovo codice con queste impostazioni:
- Titolo: a tua scelta
- Dove: in tutte le pagine
- Codice:
- Codice:
$(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; } if(n.nodeValue.substr(0,8) != "[postbg=") { return; } var m = n.nodeValue.match(/^\[postbg=([^\]]*)\]/); if(!m) return; $(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 && n.nextSibling.nodeType == 1 && n.nextSibling.tagName == "BR") { $(n.nextSibling).remove() } }); if($("#text_editor_textarea").length && $.sceditor) { var bglist = "https://i.imgur.com/20aRJFn.png,https://i.imgur.com/DcTM2Ng.jpg,https://i.imgur.com/tkC3deY.jpg,https://i.imgur.com/pfTcnqF.png,https://i.imgur.com/dAQtdaR.gif,https://i.imgur.com/48CU2Qx.png,https://i.imgur.com/lRuwoVi.png,https://i.imgur.com/EHp45H1.png,https://i.imgur.com/8bhbqFF.png,https://i.imgur.com/tb80sYG.png,https://i.imgur.com/6LPhzcp.png,https://i.imgur.com/DkRuYf1.png,https://i.imgur.com/57F0z86.jpg,https://i.imgur.com/PZyMuXF.png".split(","); var bgnum = -1; var val = $("#text_editor_textarea").val(); if(val.substr(0,8) == "[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="Background del messaggio"><div unselectable="on" style="background:url(https://i.imgur.com/Hrf5w1i.gif);opacity:1">Background of 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 }) } }) }) } });
ModificheE' possibile modificare le immagini di sfondo disponibili cambiando questa parte del codice javascript:
- Codice:
https://i.imgur.com/20aRJFn.png,https://i.imgur.com/DcTM2Ng.jpg,https://i.imgur.com/tkC3deY.jpg,https://i.imgur.com/pfTcnqF.png,https://i.imgur.com/dAQtdaR.gif,https://i.imgur.com/48CU2Qx.png,https://i.imgur.com/lRuwoVi.png,https://i.imgur.com/EHp45H1.png,https://i.imgur.com/8bhbqFF.png,https://i.imgur.com/tb80sYG.png,https://i.imgur.com/6LPhzcp.png,https://i.imgur.com/DkRuYf1.png,https://i.imgur.com/57F0z86.jpg,https://i.imgur.com/PZyMuXF.png
È necessario che gli indirizzi dell'immagine siano separati da virgole.
Trucchi- È possibile avere un'immagine di sfondo che non è nello script, inserendola all'inizio del messaggio:
- Codice:
[postbg=URL_immagine] basta sostituire URL_immagine con l'URL della tua immagine.
- Facendo clic sul pulsante si passa automaticamente all'immagine successiva nell'elenco. Premendo il pulsante mentre si tiene premuto il tasto CTRL, si rimuove l'immagine di sfondo e si torna all'inizio dell'elenco.
|