Alla luce di un thread precedente (https://www.gdr-online.com/readforum.asp?id=232129 ) riguardo i comandi BBCODE/formattazione è emerso un certo interesse per l'implementazione di un editor di testo un po' più funzionale dell'offerta corrente di GDRCD. Volevo quindi lasciare 'ai posteri' i vari passaggi che ho seguito per installare l'editor WYSIBB: http://wysibb.com/getting-started/ Qualche premessa prima di cominciare:- ATTENZIONE: Ricordate di inserire correttamente gli apostrofi (sostituiti qui su GDR-ONLINE CON ') dopo aver copiato il codice, altrimenti non funzionerà nulla!- ATTENZIONE: Per evitare che il forum di GDR ONLINE interpreti i tag bbcode anche all'interno delle aree riservate al codice ho inserito degli *: ricordate di rimuoverli all'interno del vostro codice!- AMBIENTE DI LAVORO: GDRCD 5.4 / Altervista / Versione MySQL: 5.6- SONO UNA NABBA: Non faccio lo sviluppatore di professione e le soluzioni che trovo sono molto probabilmente le worst practice possibili. Un po' a vostro rischio e pericolo, purtroppo.- EDITOR CUSTOMIZZATO A SECONDA DELL'APPLICAZIONE: L'impostazione di default dell'editor prevede un unico caricamento all'interno dell'header del nostro sito, applicando quindi le stesse impostazioni/comandi a tutti gli elementi in cui vogliamo che il nostro editor appaia. Personalmente ho preferito invece customizzare certi comandi dell'editor a seconda della situazione (nei messaggi ho voluto solo i comandi per grassetto, italics, sottolineato, per il forum ho lasciato tutti i comandi come l'inserimento immagini, link, etc.). All'interno di questo tutorial istruzioni/passaggi prevedono questo tipo di approccio piuttosto che il singolo caricamento per lasciare i comandi dell'editor uguali in tutti i contesti in cui è applicato.PRIMO STEP: FILE DI CONFIGURAZIONEScarichiamo i file da includere al nostro progetto da http://wysibb.com/ .All'interno del nostro spazio Altervista, carichiamo i file in maniera tale da ottenere la seguente disposizione:
/* TRADUZIONE IN LINGUA ITALIANA DEI CONTENUTI DELLA TOOLBAR DELL'EDITOR WYSIBB */if (typeof (WBBLANG)=="undefined") {WBBLANG = {};}WBBLANG['it'] = { bold: "Grassetto", italic: "Italic", underline: "Sottolineato", strike: "Barrato", link: "Link", img: "Inserisci immagine", sup: "Superscript", sub: "Subscript", justifyleft: "Align left", justifycenter: "Align center", justifyright: "Align right", table: "Insert table", bullist: "• Unordered list", numlist: "1. Ordered list", quote: "Quote", offtop: "Offtop", code: "Code", spoiler: "Spoiler", fontcolor: "Font color", fontsize: "Font size", fontfamily: "Font family", fs_verysmall: "Very small (10px)", fs_small: "Small (13px)", fs_normal: "Normal (16px)", fs_big: "Big (18px)", fs_verybig: "Very big (32px)", fs_verybig2: "test (48px)", smilebox: "Insert emoticon", video: "Insert YouTube", removeFormat:"Remove Format", modal_link_title: "Insert link", modal_link_text: "Display text", modal_link_url: "URL", modal_email_text: "Display email", modal_email_url: "Email", modal_link_tab1: "Insert URL", modal_img_title: "Insert image", modal_img_tab1: "Insert URL", modal_img_tab2: "Upload image", modal_imgsrc_text: "Enter image URL", modal_img_btn: "Choose file", add_attach: "Add Attachment", modal_video_text: "Enter the URL of the video", close: "Close", save: "Save", cancel: "Cancel", remove: "Delete", validation_err: "The entered data is invalid", error_onupload: "Error during file upload", fileupload_text1: "Drop file here", fileupload_text2: "or", loading: "Loading", auto: "Auto", views: "Views", downloads: "Downloads", //smiles sm1: "Smile", sm2: "Laughter", sm3: "Wink", sm4: "Thank you", sm5: "Scold", sm6: "Shock", sm7: "Angry", sm8: "Pain", sm9: "Sick"};
<!-- JQUERY --> <script src="https://jquery.min.js"></script> <script src="//jquery.min.js"></script>
<!-- EDITOR WYSIBB -- > <!-- Load WysiBB JS and Theme --> <script src="plugins/wysibb/jquery.wysibb.js"></script> <link rel="stylesheet" href="plugins/wysibb/theme/default/wbbtheme.css" /> <script src="plugins/wysibb/lang/it.js"></script>
<!-- Init WysiBB BBCode editor --><script>$(document).ready(function() {var wbbOpt = { lang: "it", buttons: "bold,italic,underline,strike,|,bullist,numlist,|,fontcolor,fontsize,fontfamily,|,justifyleft,justifycenter,justifyright,|,img,quote,link", allButtons: { myquote: { title: 'Insert myquote', buttonText: 'myquote', transform: { '<div class="myquote">{SELTEXT}</div>':'[myquote]{SELTEXT}[/myquote]' } } }}$("#editor").wysibb(wbbOpt);}); </script>
"bold,italic,underline, strike,sup,sub,|,img,video,link,|,bullist, numlist,|,fontcolor,fontsize, fontfamily,|, justifyleft, justifycenter, justifyright,|, quote,code,table,removeFormat"
$(document).ready(function() {var wbbOpt = { lang: "it", buttons: "bold,italic,underline, |,img,link,|,code,myquote", (...)
id="editor"
<textarea id="editor" name="*******" /> ************* </textarea>
"#\[url\]($regexpUrl)+\[/url\]#is" => "<a href=\"\\1\" target=\"_blank\" title=\"\\1\">\\1</a>",
"#\[url=($regexpUrl)+\](.*)\[/url\]#is" => "<a href=\"\\1\" target=\"_blank\" title=\"\\1\">\\7</a>",
function baseformat($str){ $bbtag = array( array( "\n", '[*hr]', '[*b]~[/b*]', '[*i]~[/i*]', '[*u]~[/u*]', '[*s]~[/s*]', '[*center]~[/center*]', '[*right]~[/right*]', '[*left]~[/left*]', '[*quote]~[/quote*]' ), array( '<br />', '<hr />', '<strong>~</strong>', '<em>~</em>', '<ins>~</ins>', '<del>~</del>', '<p align="center">~</p>', '<p align="right">~</p>', '<p align="left">~</p>', '<span class="quote">~</span>' ) );
function baseformat($str){ $bbtag = array( array( "\n", '[*hr]', '[*b]~[/b*]', '[*i]~[/i*]', '[*u]~[/u*]', '[*s]~[/s*]', '[*center]~[/center*]', '[*right]~[/right*]', '[*left]~[/left*]', '[*quote]~[/quote*]', '[*list]~[/list*]', '[*list=1]~[/list*]', '[*]~[/*]' ), array( '<br />', '<hr />', '<strong>~</strong>', '<em>~</em>', '<ins>~</ins>', '<del>~</del>', '<p class="editor-center">~</p>', '<p class="editor-right">~</p>', '<p class="editor-left">~</p>', '<span class="quote">~</span>', '<ul>~</ul>', '<ol>~</ol>', '<li>~</li>' ) );
ul { list-style-type: circle !important; display: block; list-style-type: disc; margin-top: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }
allButtons: { myquote: { title: 'Insert myquote', buttonText: 'myquote', transform: { '<div class="myquote">{SELTEXT}</div>':'[myquote]{SELTEXT}[/myquote]' } }
span.quote{ padding-left: 5px; border-left: 2px solid red;}
<?php if($quote) { $query="SELECT messaggio, autore FROM messaggioaraldo WHERE id_messaggio=".$quote; $result=gdrcd_query($query); echo gdrcd_filter('out',"[quote=".$result['autore']."]".$result['messaggio']."[/quote*]"); }?>
<?php if($quote){ $query="SELECT messaggio, autore FROM messaggioaraldo WHERE id_messaggio=".$quote; $result=gdrcd_query($query); echo gdrcd_filter('out',"[*quote]".$result['messaggio']."[/quote*]"); echo 'Scritto da:[b*]'.gdrcd_filter('out', $result['autore']).'[/b*]'; } ?>
$PARAMETERS['settings']['forum_bbcode']['type'] = 'bbd';// bbd : viene abilitato l'uso del plugin "BBDecoder" per la funzionalità del bbcode// native : viene usato la scarna formattazione bbcode di base del gdrcd# NOTA: nel forum o si sceglie il bbd o la funzione nativa di GDRCD5.1. Non è possibile includere html filtrato.
<?php /** * Html, bbcode o entrambi ? * @author Blancks */ if ($PARAMETERS['mode']['user_bbcode'] == 'ON') { if ($PARAMETERS['settings']['user_bbcode']['type'] == 'bbd' && $PARAMETERS['settings']['bbd']['free_html'] == 'ON') { echo bbdecoder(gdrcd_html_filter($descr_map_full['descrizione_mappa']), true); } elseif ($PARAMETERS['settings']['user_bbcode']['type'] == 'bbd') { echo bbdecoder(gdrcd_filter('out', $descr_map_full['descrizione_mappa']), true); } else { echo gdrcd_bbcoder(gdrcd_filter('out', $descr_map_full['descrizione_mappa'])); } } else { echo gdrcd_html_filter($descr_map_full['descrizione_mappa']); }?>
$row['messaggio']
$record['testo']
//select options fs_verysmall: { title: CURLANG.fs_verysmall, buttonText: "fs1", excmd: 'fontSize', exvalue: "1", transform: { '<font size="1">{SELTEXT}</font>':'[size=50]{SELTEXT}[/size]' } }, fs_small: { title: CURLANG.fs_small, buttonText: "fs2", excmd: 'fontSize', exvalue: "2", transform: { '<font size="2">{SELTEXT}</font>':'[size=85]{SELTEXT}[/size]' } }, fs_normal: { title: CURLANG.fs_normal, buttonText: "fs3", excmd: 'fontSize', exvalue: "3", transform: { '<font size="3">{SELTEXT}</font>':'[size=100]{SELTEXT}[/size]' } }, fs_big: { title: CURLANG.fs_big, buttonText: "fs4", excmd: 'fontSize', exvalue: "4", transform: { '<font size="4">{SELTEXT}</font>':'[size=150]{SELTEXT}[/size]' } }, fs_verybig: { title: CURLANG.fs_verybig, buttonText: "fs5", excmd: 'fontSize', exvalue: "6", transform: { '<font size="6">{SELTEXT}</font>':'[size=200]{SELTEXT}[/size]' } },
//select options fs_verysmall: { title: CURLANG.fs_verysmall, buttonText: "fs1", excmd: 'fontSize', exvalue: "1", transform: { '<font size="1">{SELTEXT}</font>':'[size=10]{SELTEXT}[/size]' } }, fs_small: { title: CURLANG.fs_small, buttonText: "fs2", excmd: 'fontSize', exvalue: "2", transform: { '<font size="2">{SELTEXT}</font>':'[size=13]{SELTEXT}[/size]' } }, fs_normal: { title: CURLANG.fs_normal, buttonText: "fs3", excmd: 'fontSize', exvalue: "3", transform: { '<font size="3">{SELTEXT}</font>':'[size=16]{SELTEXT}[/size]' } }, fs_big: { title: CURLANG.fs_big, buttonText: "fs4", excmd: 'fontSize', exvalue: "4", transform: { '<font size="4">{SELTEXT}</font>':'[size=18]{SELTEXT}[/size]' } }, fs_verybig: { title: CURLANG.fs_verybig, buttonText: "fs5", excmd: 'fontSize', exvalue: "6", transform: { '<font size="6">{SELTEXT}</font>':'[size=32]{SELTEXT}[/size]' } },
blissful nooblirance[ GDRCD 5.4 / Altervista / Versione MySQL: 5.6 ]
Pagine → 1
06/05/2018 01:08:22
wow, grazie mille
07/05/2018 12:28:30
Bel lavoro! Metto qui alcune annotazioni :3- Al codice del terzo step occorre aggiungere l'inizio del codice che si vede nello stamp:
<!-- Init WysiBB BBCode editor --><script>
https://www.gdr-online.com/images/barra/icon_center.gif
07/05/2018 12:50:09
Ottimo lavoro davvero! 👍
07/05/2018 18:01:45
Ehy, grazie a tutti per le parole gentili - prima di prendermi i ringraziamenti vorrei però essere sicura che tutto funzioni. Qualcuno ha provato a realizzare il tutorial?Appena ho un attimo di respiro aggiungo qualche info ulteriore per creare una funzionalità simile allo SPOILER che si trova normalmente in giro per i forum e dare un'occhiata alle rettifiche che mi avete lasciato.A presto!
08/05/2018 08:01:13
Ci ho provato io, solo che la barra di tutti i comandi esce a lato della textarea e non sopra.Oggi controllo i css
08/05/2018 20:04:02
playergdr ha scritto: Ci ho provato io, solo che la barra di tutti i comandi esce a lato della textarea e non sopra.Oggi controllo i css
/* MOBILE DEFAULT STYLES*/.wysibb .wysibb-toolbar{float:left;
11/05/2018 01:51:14
Eccomi, anf, allora ..
kyuren ha scritto: Bel lavoro! Metto qui alcune annotazioni :3- Al codice del terzo step occorre aggiungere l'inizio del codice che si vede nello stamp:<!-- Init WysiBB BBCode editor --><script>
kyuren ha scritto: Inoltre non dovrebbe essere necessario aggiungere lo script in fondo a tutte le pagine che lo prevedono, l'ho messo solo nel footer assieme al resto del codice del punto precedente e funziona ovunque.
- EDITOR CUSTOMIZZATO A SECONDA DELL'APPLICAZIONE: L'impostazione di default dell'editor prevede un unico caricamento all'interno dell'header del nostro sito, applicando quindi le stesse impostazioni/comandi a tutti gli elementi in cui vogliamo che il nostro editor appaia. Personalmente ho preferito invece customizzare certi comandi dell'editor a seconda della situazione (nei messaggi ho voluto solo i comandi per grassetto, italics, sottolineato, per il forum ho lasciato tutti i comandi come l'inserimento immagini, link, etc.). All'interno di questo tutorial istruzioni/passaggi prevedono questo tipo di approccio piuttosto che il singolo caricamento per lasciare i comandi dell'editor uguali in tutti i contesti in cui è applicato.
kyuren ha scritto: - Nel punto finale della modifica a jquery.wysibb.js c'è questa parte di codice che credo proprio sia in più, sul finale:https://www.gdr-online.com/images/barra/icon_center.gif
/* DESKTOP AND TAVBLETS STYLES */@media (min-width: 992px)
/* DESKTOP AND TAVBLETS STYLES */@media (min-width: 600px) {
PRIMA:DOPO (cursore mantenuto sul testo):
myspoiler: { title: 'Spoiler', buttonHTML: '', buttonText: 'Spoiler', transform: { '<div class="myspoilertitle">SPOILER</div> <div class="myspoilerbox"><div class="myspoilercontent">{SELTEXT}</div> </div>':'[myspoiler]{SELTEXT}[/myspoiler]' } }
<script> $(document).ready(function() {var wbbOpt = { lang: "it", buttons: "bold,italic,underline, strike,myspoiler,|,bullist, numlist,|,fontcolor,fontsize, fontfamily,|, justifyleft, justifycenter,justifyright,|,img,quote,link", allButtons: { myquote: { title: 'Insert myquote', buttonText: 'myquote', transform: { '<div class="myquote">{SELTEXT}</div>':'[myquote]{SELTEXT}[/myquote]' } }, myspoiler: { title: 'Spoiler', buttonHTML: '', buttonText: 'Spoiler', transform: { '<div class="myspoilertitle">SPOILER</div> <div class="myspoilerbox"><div class="myspoilercontent">{SELTEXT}</div> </div>':'[myspoiler]{SELTEXT}[/myspoiler]' } } }}$("#editor").wysibb(wbbOpt);}); </script>
function baseformat($str){ $bbtag = array( array( "\n", '[hr]', '[*b]~[/b*]', '[*i]~[/i*]', '[*u]~[/u*]', '[*s]~[/s*]', '[*center]~[/center*]', '[*right]~[/right*]', '[*left]~[/left*]', '[*quote]~[/quote*]', '[*list]~[/list*]', '[*list=1]~[/list*]', '[*]~[/*]', '[myspoiler]~[/myspoiler]' ), array( '<br />', '<hr />', '<strong>~</strong>', '<em>~</em>', '<ins>~</ins>', '<del>~</del>', '<p class="editor-center">~</p>', '<p class="editor-right">~</p>', '<p class="editor-left">~</p>', '<span class="quote">~</span>', '<ul>~</ul>', '<ol>~</ol>', '<li>~</li>', '<div class="myspoilertitle">SPOILER</div> <div class="myspoilerbox"><div class="myspoilercontent">~</div></div>' ) );
/** STILI PER LA FUNZIONALITA' SPOILER **/.myspoilertitle{font-weight: bold;}.myspoilerbox{border: 1px solid red;}.myspoilercontent{filter:blur(3px);-webkit-transition: 400ms ease 100ms;-moz-transition: 400ms ease 100ms;transition: 400ms ease 100ms;}.myspoilercontent:hover {filter:blur(0px);}
11/05/2018 09:36:37
sadly-noob ha scritto: Se lo carichi un'unica volta i comandi dell'editor saranno sempre gli stessi ovunque - che non è assolutamente un problema, ho voluto impostare il tutorial così per lasciare un'opzione di customizzazione in più .. Credo. Er.
11/11/2020 09:46:00
Help! T_TLe sto provando tutte e non ne vengo a capo. Piccola premessa, gdrcd 5.5 è leggermente differente rispetto alla versione 5.4La parte di codice che gestiva la creazione dei messaggi privati e dei post in forum è stata scorporata. Anche così, per quanto io abbia provato a inserire il codice un po' ovunque, non c'è verso di richiamare l'editor. Forse sbaglio io qualcosa in partenza. In particolare, non ho capito il suggerimento riguardo gli apostrofi. Cito.
sadly-noob ha scritto: - ATTENZIONE: Ricordate di inserire correttamente gli apostrofi (sostituiti qui su GDR-ONLINE CON ') dopo aver copiato il codice, altrimenti non funzionerà nulla!
Leggendra.it - il primo e unico gdr pbc fantasy rinascimentalehttps://www.leggendra.it
Discussione seguita da: » fargus » kyuren » dramsstaff » darkestoftimes » cookie » rt1978 » haruka » moonspell