[GDRCD 5.4 | TUTORIAL] Editor di testo Wysibb (forum, messaggi, ..)

[GDRCD 5.4 | TUTORIAL] Editor di testo Wysibb (forum, messaggi, ..) postato il 06/05/2018 00:12:32 nel forum programmazione, open source e hosting e modificato da gdr-online.com il 04/06/2019 15:36:29

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 CONFIGURAZIONE

Scarichiamo 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:

Aggiungiamo all'interno della cartella lang un nuovo file denominato it.js - questo file permette di assegnare agli elementi della toolbar dell'editor (grassetto, sottolineato, etc.) una traduzione in lingua specifica. Purtroppo non è presente la lingua italiana fra quelle messe a disposizione, quindi starà a noi tradurre i vari elementi della lista.

All'interno di questo file quindi inseriamo il seguente codice, dove andremo a sostituire i titoli fra "" con l'equivalente in lingua italiana - purtroppo al momento non ho ancora potuto completare la traduzione, spero al più presto di poter mettere a disposizione il file già tradotto:

/* 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"
};

SECONDO STEP: INCLUSIONI E PARAMETRI PER header.inc.php & footer.inc.php

Includiamo ora i vari file sistemati nel nostro spazio web dove necessario, così che il sistema carichi effettivamente il nostro editor.

1) Nel file header.inc.php: utilizziamo i files messi a disposizione direttamente tramite Google (non si trovano quindi sul nostro spazio web).

NOTA: Io sto utilizzando anche le finestre modali, per le quali era sempre richiesta l'inclusione di una versione di Jquery: volendo evitare problemi ho voluto includere entrambe le versioni, ma è estremamente probabile che sia sufficiente la più recente.

Immediatamente a seguito delle inclusioni per gli stili css, inserisco l'inclusione di jquery come segue:

<!-- JQUERY -->

<script src="https://jquery.min.js"></script>
<script src="//jquery.min.js"></script>

A video, il risultato dovrebbe essere il seguente:



2) Nel file footer.inc.php: includiamo qui i file che abbiamo caricato sul nostro spazio, in coda altri script già eventualmente presenti, come segue:

<!-- 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>

A video, il risultato dovrebbe essere il seguente:




TERZO STEP: INCLUDIAMO LO SCRIPT DELL'EDITOR NELLE PAGINE INTERESSATE (FORUM, MESSAGGI, ETC.)

A questo punto possiamo applicare l'editor dove desiderato.
Applichiamo lo script dell'editor in fondo al file in cui sono presenti gli elementi in cui vogliamo che appaia (forum.php.inc, messages_center.inc.php, etc.), come segue (questo esempio è stato inserito nel forum):

<!-- 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>

A video, il risultato dovrebbe essere il seguente:



NOTA: Potete stabilire quali comandi far apparire nell'editor modificando parte del codice dello script, prestando attenzione alla sintassi ed alle virgole - potete aggiungere o rimuovere comandi a piacimento, basandovi sulla documentazione dell'editor reperibile qui: http://wysibb.com/docs/p8.html ↗

LISTA COMANDI PREVISTI:

"bold,italic,underline, strike,sup,sub,|,img,video,link,|,bullist, numlist,|,fontcolor,fontsize, fontfamily,|, justifyleft, justifycenter, justifyright,|, quote,code,table,removeFormat"

ESEMPIO EDITOR CON COMANDI RIDOTTI:

$(document).ready(function() {
var wbbOpt = {

lang: "it",

buttons: "bold,italic,underline, |,img,link,|,code,myquote",

(...)

ATTENZIONE: LO SCRIPT VA CARICATO OGNI VOLTA IN CIASCUNO DEI FILE IN CUI SONO PRESENTI GLI ELEMENTI AI QUALI VOLETE APPLICARE L'EDITOR. Questo significa che se sul forum volete l'editor con tutti i comandi e sui messaggi l'editor con comandi limitati dovrete cariare lo script correttamente modificato in ciascuno dei file rispettivi (script dell'editor completo in fondo a forum.inc.php e script dell'editor ridotto in fondo a messages_center.inc.php.



QUARTO STEP: APPLICHIAMO L'EDITOR AGLI ELEMENTI DESIDERATI

A questo punto dobbiamo assegnare ai vari elementi per cui ci interessa avere l'editor l'identificativo necessario al codice per applicarlo.

Aggiungiamo quindi la seguente dicitura a tutte le textarea in cui vogliamo sfruttare l'editor:

id="editor"

Il codice completo della textarea è il seguente:

<textarea id="editor" name="*******" /> ************* </textarea>

Dovrete quindi cercare all'interno dei vostri file (forum.php.inc, messages_center.inc.php, etc.) le varie textarea a cui applicare questo tag.

Una volta salvate le modifiche suggerisco un sano CTRL+SHIFT+R per aggiornare la pagina & svuotare la cache.
Dovreste poter vedere ora il vostro editor applicato alla textarea desiderata!




QUINTO STEP: ADEGUAMENTO FILTRI BBDECODER

.. Pensavate fosse finita E INVECE NO.
Se tutto è andato liscio abbiamo il nostro editor pronto all'uso, rimangono tuttavia alcuni accorgimenti da prendere per la corretta visualizzazione del testo modificato con l'editor una volta visualizzato normalmente.

Il nostro riferimento per l'interpretazione dei tag BBCODE a video è il bbdecoder.php (lo avrete intravisto nella cartella plugin). Il nostro editor non fa altro che posizionare correttamente i tag bbcode sul testo mostrandoci l'anteprima 'live' degli effetti degli stessi: bbdecoder.php trasforma quei tag in html quando ci troviamo in sede lettura, come ad esempio l'utente che legge un post all'interno del forum. Senza bbdecoder.php tutta la fykezza del testo editato andrebbe persa in lettura, dove purtroppo ci toccherebbe vedere tutti i vari tag in chiaro invece che il loro effetto grafico.

Ci sono alcune discrepanze fra i tag utilizzati dall'editor Wysibb e quelli previsti da bbdecoder.php, dovremo quindi sistemare alcuni elementi.

1) TAG URL CORRETAMENTE INTERPRETATO:
Nel file bbdecoder.php sostituiamo la seguente espressione regolare:

"#\[url\]($regexpUrl)+\[/url\]#is" => "<a href=\"\\1\" target=\"_blank\" title=\"\\1\">\\1</a>",

Con questa:

"#\[url=($regexpUrl)+\](.*)\[/url\]#is" => "<a href=\"\\1\" target=\"_blank\" title=\"\\1\">\\7</a>",

2) LISTA ORDINATA & LISTA NUMERATA:
Nel file bbdecoder.php sostituiamo la seguente parte di codice:

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>'
)
);

Con questa (o meglio, si tratterebbe semplicemente di un'aggiunta):

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>'
)
);

Potrebbe essere necessario aggiungere il seguente CSS a main.css per la corretta interpretazione della lista ordinata, in fondo alla pagina così da sovrascrivere eventuali altri stili che hanno compromesso quello generico della lista ordinata (è stato il mio caso):

ul {
list-style-type: circle !important;
display: block;
list-style-type: disc;
margin-top: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

NOTA: Quest'ultima parte di codice può essere utile anche al fine di 'tradurre' i tag bbcode nel codice html che preferite. L'equivalenza è piuttosto intuitiva: ricordatevi che l'ordine dei comandi in lista non è casuale, e va rispettato. Se il terzo tag nella prima lista è quello per il grassetto, il terzo elemento della seconda lista dovrà essere il codice html che desiderate equivalere a quel tag: pena malfunzionamenti!

3) FACOLTATIVO | COMANDO QUOTE CON STILE PERSONALIZZATO:
L'editor Wysibb consente l'applicazione di uno stile css personalizzato per evidenziare un testo quotato.
Lo abbiamo implementato precedentemente con questa parte dello script:

allButtons: {
myquote: {
title: 'Insert myquote',
buttonText: 'myquote',
transform: {
'<div class="myquote">{SELTEXT}</div>':'[myquote]{SELTEXT}[/myquote]'
}
}

Nel file bbdecoder.php abbiamo già inserito l'equivalenza per il tag di quote: dobbiamo solo aggiungere una classe css al file main.css per fare in modo che il tutto venga visualizzato correttamente.

Un esempio che potrete personalizzare successivamente:

span.quote{
padding-left: 5px;
border-left: 2px solid red;

}

Dopodiché, all'interno del file forum.inc.php sostituiamo questa parte di codice:

<?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*]");
}
?>

Con la seguente:

<?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*]';

} ?>

SESTO STEP: VISUALIZZAZIONE CORRETTA DEL TESTO IN LETTURA (OUTPUT)

È quasi fatta, ve lo prometto.
Dobbiamo assicurarci di avere inserito il codice php per la corretta interpretazione/filtro dei testi per i quali sono previsti tag bbcode (quindi quelli modificati con l'editor) in tutte le parti in cui andranno ad apparire.

Vi ricordo che:

- L'ATTIVAZIONE DEL FILTRO BBCODE SI TROVA IN config.php.inc ED È LA SEGUENTE:

$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.

- LA STRUTTURA DEL CODICE DEL FILTRO INCLUDE IN REALTA' ANCHE LE ALTERNATIVE ALLA SUA DISATTIVAZIONE: SE È STATO ATTIVATO PROCEDE IN UN MODO, SE NON È ATTIVO IL TESTO VIENE MOSTRATO SENZA INTERPRETAZIONE DEI TAG

- ATTENZIONE ALLE QUERY AL DATABASE CON CUI RECUPERATE I VARI TESTI: VERIFICARE CHE VENGANO RACCOLTI TUTTI I DATI NECESSARI

La struttura del codice che filtra i tag è la seguente, lo avrete probabilmente già 'incontrato' - è necessario quindi inserire correttamente i vari testi estratti dal database a seconda del caso.
I parametri di riferimento sono i seguenti evidenziati in grassetto (l'esempio che segue è stato applicato alla descrizione estesa delle mappe visualizzate in finestra modale):

<?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']);

}

?>

Altri esempi:

NEL FORUM IL TESTO DEL POST È CONTENUTO IN:

$row['messaggio']

NEI MESSAGGI IL TESTO DEL MESSAGGIO È CONTENUTO IN:

$record['testo']

Dovrete armarvi di un po' di pazienza/attenzione per risalire correttamente alle variabili giuste.



PROBLEMI VARI & EVENTUALI

Lascio di seguito alcuni riferimenti per i problemi con cui mi sono scontrata - con un po' di fortuna non capiteranno a voi, ma non si sa mai:

1) Uncaught TypeError: $(...).wysibb is not a function

Se pensate di aver caricato tutto correttamente ma dell'editor non sembra esserci traccia, verificate gli errori tramite Console dal pannello Strumenti per Sviluppatori - potete accedervi tramite click con tasto destro > ispeziona. Il pannello Console si trova in altro, vicino alla voce Elements:



Se l'errore riportato è Uncaught TypeError: $(...).wysibb is not a function potrebbero esserci stati problemi con le inclusioni dei file di cui abbiamo parlato nei primi step. Un articolo utile in merito: https://www.tosolini.info/2015/02/jquery-uncaught-typeerror-undefined-is-not-a-function/ ↗

Pertanto:

- Controllate che nelle inclusioni i percorsi dei file siano corretti. Se non avete familiarità con questa materia potete dare un'occhiata a questa guida: http://www.html.it/pag/16048/i-percorsi-assoluti-e-relativi/ ↗

- Assicuratevi di aver inserito gli script come descritto nei primi step: spesso questo tipo di errore si deve al fatto che gli script fondamentali di Jquery non vengono caricati 'in tempo' (o qualcosa del genere..) prima del caricamento degli script dell'editor, per il quale sono fondamentali.

2) Cambiare le indicazioni per le dimensioni dei font da 'small' etc. a dimensioni in pixel

In realtà non ho ancora trovato una vera soluzione a questo problema, o meglio: non sono riuscita ad effettuare una conversione effettiva, ma solo a far sì che in sede di lettura (output) le dimensioni in pixel dei testi equivalgano a quelle 'blindate' dell'editor Wysibb, cercandomi l'equivalenza in pixel delle dimensioni dei testi previste dal linguaggio BBCODE.

Nel file dell'editor jquery.wysibb.js sostituisco questa parte di codice:

//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]'
}
},

Con questa:

//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]'
}
},

Attraverso lo strumento ispeziona (puntatore sull'elemento che volete ispezionare, tasto destro > ispeziona) potrete visionare l'html degli elementi specifici per assicurarvi che la 'traduzione' del bbcode avvenga correttamente:



In ogni caso jquery.wysibb.js e bbdecoder.php sono i file da 'indagare' per questo genere di problema, anche su altri comandi dell'editor.


Mi sembra di non aver dimenticato nulla ..
Ringrazio seralia e dyrr per il supporto/spunti forniti in un precedente thread in argomento.

Se qualcosa non va .. Vi chiedo di partecipare al thread avendo cura di includere:

- Una descrizione specifica del vostro problema.
- Versione di GDRCD utilizzata
- Eventualmente la parte di codice sul quale vi trovate in difficoltà
- Eventualmente uno screenshot della pagina in cui riscontrate errori/comparsa di elementi misteriosi
- Tutto questo presentato in maniera leggibile ed ordinata

Ai sensei più esperti: se avete suggerimenti/dritte/rettifiche per le mie castronerie provvederò a correggere dove necessario!

Spero di esservi stata utile, anf.

06/05/2018 01:08:22

wow, grazie mille

07/05/2018 12:28:30 e modificato da kyuren il 07/05/2018 12:29:06

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>

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.

- 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

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

Yes, il "problema" sta nei CSS... da quanto ho notato, di default il codice è settato per elencare i comandi a sinistra in verticale nel caso in cui la "pagina" della textarea sia stretta.
Per aggiustare questa cosa è sufficiente andare nel file Wysibb > Theme > Default > wbbtheme.css e nel punto

/* MOBILE DEFAULT STYLES*/
.wysibb .wysibb-toolbar{
float:left;

cancellare la riga float:left;
Non so se sia il metodo più elegante, io l'ho risolta così u.ù

11/05/2018 01:51:14 e modificato da gdr-online.com il 04/06/2019 15:37:43

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>

Rettificato!

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.

Uhmn, quel passaggio dovrebbe essere necessario per ottenere degli editor con opzioni diverse a seconda del contesto (forum con X comandi, messaggi con Y comandi ..) come accennavo nel post di apertura:

- 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.

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.

[quote]

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

[/quote]

Rettificato!
.. Abbiate pazienza, probabilmente a quel punto mi stava colando il cervello dal naso.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

La Toolbar dell'editor viene visualizzata come colonna verticale a lato

Ora volevo un attimo dirvi la mia sulla questione della toolbar visualizzata lateralmente.
Come diceva kyuren il file interessato è quello del css della libreria, quindi wbbtheme.css.

Io ho individuato questo:

/* DESKTOP AND TAVBLETS STYLES */
@media (min-width: 992px)

La regola @media viene solitamente utilizzata (spero di non sbagliarmi..) per realizzare i layout responsive, quindi compatibili con dispositivi mobile (dagli smartphone ai tablet). Con questa specifica in sostanza il codice 'sa' che, a fronte di una certa dimensione della finestra del browser, deve impiegare degli specifici stili css piuttosto che altri.

Io personalmente ho evitato di rimuoverla perché non ho ancora avuto il tempo di vedere per benino come fare sì che senza gli stili vengano presi correttamente - mi sono limitata a modificare quella parte come segue:

/* DESKTOP AND TAVBLETS STYLES */
@media (min-width: 600px) {

Dove min-width identifica la larghezza minima che deve avere la finestra per impiegare gli stili css inclusi fra le parenti {}.

Maggiori informazioni su @media sono consultabili qui: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp ↗

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

IMPLEMENTARE LA FUNZIONALITA' SPOILER NELL'EDITOR:

.. O meglio una pseudo-funzionalità spoiler, poiché per ottenere la versione classica da forum le mie (assenti) competenze di JavaScript non sono sufficienti, sigh. La mia soluzione consiste nel rendere 'opaco-illeggibile' il testo inserito come spoiler e mostrarlo solo al mantenimento del cursore sullo testo. Un paio di immagini di anteprima:




1) AGGIUNGIAMO I PARAMETRI DELLA NUOVA FUNZIONALITA' ALLO SCRIPT COME SEGUE (secondo documentazione ufficiale):

myspoiler: {
title: 'Spoiler',
buttonHTML: '',
buttonText: 'Spoiler',
transform: {
'<div class="myspoilertitle">SPOILER</div> <div class="myspoilerbox"><div class="myspoilercontent">{SELTEXT}</div> </div>':'[myspoiler]{SELTEXT}[/myspoiler]'
}
}

Il codice completo dovrebbe risultare il seguente:

<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>

Non dimenticate di inserire il nuovo comando nella lista di quelli che volete inserire nella toolbar, all'interno della voce buttons:!

2) AGGIUNGIAMO IL FILTRO CORRISPETTIVO NEL FILE bbdecoder.php:

Non dimentichiamo di indicare al codice come interpretare il nuovo tag.
Aggiungo quindi al nostro famoso elenco il tag da noi scelto, che secondo l'esempio mostrato corrisponde a quanto segue:

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>'
)
);

2) AGGIUNGIAMO GLI STILI NECESSARI A RENDERE LA TRANSIZIONE OPACO-A FUOCO NEL FILE wbbtheme.css:

/** 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);
}

Gli stili sono naturalmente customizzabili come preferite.
A questo punto dovreste avere la vostra funzionalità pseudo-spoiler pronta per essere utilizzata.

Lo ritengo un compromesso grazioso, ma se ci sono idee migliori/qualcuno ha idea di come creare il classico show/hide con l'assegnazione degli id univoci ai vari <div> (mi sembrano necessari per evitare che aprendo uno spoiler non si aprano tutti a cascata, sob) .. Io non ne ho una mezza, quindi aiuto?

Oppure ci si accontenta di questo.
Uheuhe.

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.

Non l'avevo proprio notato, sorry y.y beh, ha senso.

Cmq ribadisco, bel tutorial :3

11/11/2020 09:46:00

Help! T_T
Le sto provando tutte e non ne vengo a capo.
Piccola premessa, gdrcd 5.5 è leggermente differente rispetto alla versione 5.4

La 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!

Forse il problema è qui, ma io gli apostrofi li vedo corretti in editor.
Ho messo nelle textarea id="editor". E mi sono fermata qui: dovrei poter vedere l'editor nelle textarea richiamate, ma non c'è verso.

Per tagliare la testa al toro, ho anche provato a inserire il codice che richiama lo script direttamente in footer, consapevole che poi richiamerebbe lo stesso editor per tutti i campi dove ho applicato textarea id="editor", ma il problema è che non ne vuole sapere.

Che sbaglio? Qualcuno ha avuto problemi simili?

P.S.: sono niubba anche io -.-'

19/05/2021 14:25:29

haruka ha scritto: Help! T_T
Le sto provando tutte e non ne vengo a capo.
Piccola premessa, gdrcd 5.5 è leggermente differente rispetto alla versione 5.4

La 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.

[quote]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!

Forse il problema è qui, ma io gli apostrofi li vedo corretti in editor.
Ho messo nelle textarea id="editor". E mi sono fermata qui: dovrei poter vedere l'editor nelle textarea richiamate, ma non c'è verso.

Per tagliare la testa al toro, ho anche provato a inserire il codice che richiama lo script direttamente in footer, consapevole che poi richiamerebbe lo stesso editor per tutti i campi dove ho applicato textarea id="editor", ma il problema è che non ne vuole sapere.

Che sbaglio? Qualcuno ha avuto problemi simili?

P.S.: sono niubba anche io -.-'[/quote]

sono riuscito ad integrare tinymce.. se vuoi posso darti qualche indicazione