Poradnik tworzenia własnych bbcode na modernBB

Awatar użytkownika
Podziękował(a): 2 razy | Pomógł(a) : 2 razy

#56672 12 lis 2021, 0:51

WSTĘP

Niniejszy poradnik ma na celu pokazać Wam jak stworzyć na modernBB na forumpolish/forumotion własne bbcody. Nie są to prawdziwe bbcode, jednak ich konstrukcja jest podobna. Działają one dzięki JavaScript - wspomniany hosting pozwala na dodawanie własnych skryptów JS. Pokazany poniżej skrypt pozwala na na zamienienie wybranych tagów przypominających bbcode odpowiednim kodem HTML. Poniżej dostaniecie kod do wklejenia na forum w odpowiednie miejsca, jaki pozwoli umieścić Wam na swoich forach podany tutaj przykład. Następnie wyjaśnię do czego służą poszczególne części wspomnianego kodu i jak je edytować.
Pokazany tutaj kod posiada jednak dwa ważne ograniczenia. Pierwszym z nich jest brak możliwości zagnieżdżenia własnych bbcode jeden w drugim (ciągle można wewnątrz tych kodów używać klasycznych bbcode). W przypadku konstrukcji KP wymaga to odpowiedniego podzielenia HTML. Z perspektywy użytkownika jednak można ten aspekt jednak przekuć z wady w zaletę jaką jest czytelność wzoru.
Kolejnym ograniczeniem jest sytuacja, w której tworzymy kod w jaki użytkownik wklejać będzie odnośnik. modernBB automatycznie zamienia adresy url w hiperłącza nawet bez użycia bbcode url. W takim przypadku wstawiony przez nas kod html by się rozsypał, aby obejść ten problem zaproponowane poniżej rozwiązanie wymaga, aby gracze wstawiali w kod odnośniki bez https://www - kod sam musi uzupełnić ten fragment adresu. Na sam koniec zaprezentuje Wam alternatywne rozwiązanie, jeśli uznacie, że wybrane dla przykładu może sprawić problemy. Oba rozwiązania pozwolą wykorzystać poniższy skrypt w celu stworzenia przejrzystej KP bez potrzeby udostępniania HTML graczom.

W tym miejscu chciałbym podziękować Moonstar za udostępnienie swojej KP jako przykładowej do tego poradnika; Luxterowi za pomoc z odnośnikami i forum supportowemu forumotion.com gdzie użytkownik Ange Tuteur udostępnił skrypt JS.

Przykład


Java Script
Aby dodać nowy skrypt JS przejdźcie ścieżkę: Panel Administratora -> Modules -> Javascript codes management ->CREATE A NEW JAVASCRIPT. Tutaj należy dodać tytuł, np "custom BBcode" a jako Placement zaznaczcie "In all the pages". Kod do wklejenia:

Kod: Zaznacz cały

$(function() {

 	$("#text_editor_textarea").before("<input type='button' class='customBB' id='pla-b' title='Pole notatki gracza' value='Nota Gracza'>");
	$('#pla-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[pla]','[/pla]')});

	if (_userdata.user_level != 0) {
		$("#text_editor_textarea").before("<input type='button' class='customBB' id='mod-b' title='Pole notatki moderatora' value='Nota Moderatora'>");
		$('#mod-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[mod]','[/mod]')});
	}
	if (_userdata.user_level === 1) {
		$("#text_editor_textarea").before("<input type='button' class='customBB' id='adm-b' title='Pole notatki administratora' value='Nota Administratora'>");
		$('#adm-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[adm]','[/adm]')});
	}
	
 	$("#text_editor_textarea").before("<input type='button' class='customBB KPbb' id='header-b' title='Kod rozpoczynający KP, służy do wprowadzenia ilustracji tła' value='Header'>");
	$('#header-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[header]','[/header]')});

 	$("#text_editor_textarea").before("<input type='button' class='customBB KPbb' id='imie-b' title='Kod wprowadzający imię w KP' value='Imie'>");
	$('#imie-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[imie]','[/imie]')});

 	$("#text_editor_textarea").before("<input type='button' class='customBB KPbb' id='portret-b' title='Kod wprowadzający portret w KP' value='Portret'>");
	$('#portret-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[portret]','[/portret]')});
	
 	$("#text_editor_textarea").before("<input type='button' class='customBB KPbb' id='cecha-b' title='Kod wprowadzający cechy w KP' value='Cecha'>");
	$('#cecha-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[cecha]','[/cecha]')});
	
 	$("#text_editor_textarea").before("<input type='button' class='customBB KPbb' id='opis-b' title='Kod wprowadzający pole opisu w KP' value='Opis'>");
	$('#opis-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[opis]','[/opis]')});
  

  $('div.postbody div').each(function () {
    if ($(this).text().indexOf('[adm]') != -1) $(this).html($(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div class="titl">Nota Gracza</div><div>$1 </div></div>'));
    if ($(this).text().indexOf('[mod]') != -1) $(this).html($(this).html().replace(/\[mod\](.+?)\[\/mod\]/gi, '<div class="mod_mess"><div class="titl">Nota Moderatora</div><div>$1 </div></div>'));
    if ($(this).text().indexOf('[pla]') != -1) $(this).html($(this).html().replace(/\[pla\](.+?)\[\/pla\]/gi, '<div class="pla_mess"><div class="titl">Nota Administratora</div><div>$1 </div></div>'));
	  

    if ($(this).text().indexOf('[header]') != -1) $(this).html($(this).html().replace(/\[header\](.+?)\[\/header\]/gi, '<div class="mainSquare"><img src="https://$1" class="headerSquare">'));

    if ($(this).text().indexOf('[imie]') != -1) $(this).html($(this).html().replace(/\[imie\](.+?)\[\/imie\]/gi, '<div class="nameSquare">$1 </div>'));
	
    if ($(this).text().indexOf('[portret]') != -1) $(this).html($(this).html().replace(/\[portret\](.+?)\[\/portret\]/gi, '<img src="https://$1" class="iconSquare"></img><div class="kp3w">'));
    if ($(this).text().indexOf('[cecha]') != -1) $(this).html($(this).html().replace(/\[cecha\](.+?)\[\/cecha\]/gi, '<div class="kp3">$1 </div>'));
    if ($(this).text().indexOf('[opis]') != -1) $(this).html($(this).html().replace(/\[opis\](.+?)\[\/opis\]/gi, '</div><div class="kp4"><div class="kp4t">Opis</div><div class="kp4d">$1 </div></div></div>'));

   $('.kp3w').find('br').remove();
  }); 
  
});
CSS
Poniższy kod należy dodać w Panel Administratora -> Display -> Pictures and Colors -> Colors ->Arkusz CSS. Jeśli używacie już jakiegoś CSS, np dla Waszego stylu forumowego, dodajcie ten kod na sam koniec zachowując dotychczasowy. Jeśli chcecie dostosować kolor, poszczególne segmenty tego CSS oznaczono notatkami mówiącymi do czego one służą.

Kod: Zaznacz cały

/* BBcode buttons */

.customBB {
	border-radius:15px;
	display:inline-block;
	cursor:pointer;
	font-family:Arial;
	font-size:15px;
	padding:10px 10px;
	text-decoration:none;
}
.customBB:active {
	position:relative;
	top:1px;
}

#pla-b {
	background-color:#44c767;
	border:1px solid #18ab29;
	color:#ffffff;
	text-shadow:0px 1px 0px #2f6627;
}
#pla-b:hover {
	background-color:#5cbf2a;
}


#adm-b {
	background-color:#D20000;
	border:1px solid #7A1713;
	color:#ffffff;
	text-shadow:0px 1px 0px #2f6627;
}
#adm-b:hover {
	background-color:#FF4141;
}


#mod-b {
	background-color:#0644A6;
	border:1px solid #000092;
	color:#ffffff;
	text-shadow:0px 1px 0px #2f6627;
}
#mod-b:hover {
	background-color:#8CAECB;
}

.KPbb {
	background-color:#909193;
	border:1px solid #4C4C4C;
	color:#ffffff;
	text-shadow:0px 1px 0px #2f6627;
}
.KPbb:hover {
	background-color:#C8C8C8;
}

/* Warning blocks */
 
.mod_mess, .adm_mess, .pla_mess {
margin: 5px auto;
width: 90%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
 
.mod_mess a.postlink, .adm_mess a.postlink, .pla_mess a.postlink {
color: #FFF !important;
text-decoration: underline !important;
}
 
/* Administrator bb-Code - message block */
 
.adm_mess {
background: #e54858;
background: -moz-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e54858), color-stop(100%, #f5b57a));
background: -webkit-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -o-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -ms-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: linear-gradient(left, #e54858 0%, #f5b57a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e54858", endColorstr="#f5b57a", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}
 
/* Administrator bb-Code - title */
.adm_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #B60505;  
}
    
/* Administrator BB-Code - text presentation */
.adm_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 25px;
}
 
/* Moderator BB-Code - message block */
 
.mod_mess {
background: #5c93f5;
background: -moz-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5c93f5), color-stop(100%, #afcfda));
background: -webkit-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -o-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -ms-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: linear-gradient(left, #5c93f5 0%, #afcfda 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c93f5", endColorstr="#afcfda", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}
 
/* Moderator BB-Code - title */
.mod_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #0D4DD3;    
}
    
/* Moderator BB-Code - text presentation */
.mod_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 25px;
}

/* Player BB-Code - message block */
 
.pla_mess {
background: #F57D5B;
background: -moz-linear-gradient(left, #F57D5B 0%, #FFCAA8 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #F57D5B), color-stop(100%, #FFCAA8));
background: -webkit-linear-gradient(left, #F57D5B 0%, #FFCAA8 100%);
background: -o-linear-gradient(left, #F57D5B 0%, #FFCAA8 100%);
background: -ms-linear-gradient(left, #F57D5B 0%, #FFCAA8 100%);
background: linear-gradient(left, #F57D5B 0%, #FFCAA8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F57D5B", endColorstr="#FFCAA8", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}
 
/* Player BB-Code - title */
.pla_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #C74F2D;    
}
    
/* Player BB-Code - text presentation */
.pla_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 25px;
}

/* END of Warning blocks CSS */

/* KP */

.mainSquare { -webkit-box-shadow:0px 1px 5px #1A1A1A; -moz-box-shadow:0px 1px 5px #1c1e21; box-shadow:0px 1px 5px #1A1A1A;width:450px;height:auto;background: #181a1c;padding-bottom:5px;} .headerSquare {width:450px;height:170px;} .nameSquare {letter-spacing: 1px;margin-top:-150px;position:relative;background:white;margin-left:245px;font-size: 10px; color: #fff; background:#181a1c; padding: 6px 10px; font-family: Karla;text-align:center;text-transform:uppercase;width:120px;} .iconSquare {width:100px;border-radius: 100%; border: 5px solid #1c1e21;margin-top: 35px;}.kp3w {padding-left:12px; display: grid; grid-template-columns: 210px 210px; grid-gap: 5px; color: #444; width:485px; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:10px; } .kp3 { background-color: #1c1e21; color: #b5b9bc; padding: 4px; font-size: 150%; text-transform: uppercase; font-family: arial; font-size: 11px; text-align:center; height:18px; transition:0.9s; display:flex; align-items:center; justify-content:center; } .kp3:hover {background: #7f3a3a; color:!important;} .kp4 {width:425px;height:auto;background-color: #1c1e21; color: #b5b9bc;margin-bottom:10px;} .kp4t {width:405px;background-color:181a1c;font-family: 'Cookie', cursive;font-size:35px;color:#7f3a3a;padding-top:10px;border-bottom:solid 1px #7f3a3a;line-height:1.2;} .kp4d {line-height:20px; font-family:arial;font-size:12px;text-align:justify;padding:10px;}
HTML
HTML ten jest wymagany by skorzystać z dodatkowych czcionek w karcie postaci. Wkleić należy go w Panel Administratora -> Display ->Templates -> Ogólne ->viewtopic_body. Kod należy dodać do aktualnego (nie usuńcie dotychczasowego! Można też dodać tutaj: Panel Administratora -> Display ->Templates -> Post & Prywatne Wiadomości->posting_preview - to pozwoli na używanie tych czcionek także w podglądzie pisania postu. Po zapisaniu pamiętajcie, by opublikować zmiany.

Kod: Zaznacz cały

<link href="https://fonts.googleapis.com/css?family=Karla&amp;display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cookie&amp;display=swap" rel="stylesheet">
Wyjaśnienie


Dodawanie przycisków:

Kod: Zaznacz cały

 	$("#text_editor_textarea").before("<input type='button' class='customBB' id='pla-b' title='Pole notatki gracza' value='Nota Gracza'>");
	$('#pla-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[pla]','[/pla]')});
Chcąc wstawić swój przycisk należy umieścić go w cudzysłowie w nawiasie tuż po słownie .before. Podana tutaj klasa służy jedynie nadaniu odpowiedniego wyglądu. ID jednak jest ważne i jak zawsze w html, musi być unikalne. Następnie podajemy title, to segment jaki wyświetli się gdy użytkownik najedzie kursorem na button. wartość value będzie nazwą takiego przycisku.
W drugim wierszu w pierwszym nawiasie zaraz po hashu oznaczającym ID należy umieścić zawsze to samo id, co powyżej w opisie html. Ostatni element jaki należy edytować znajduje się w nawiasie po "insertText" - to tutaj zmieniamy zawartość tagów bbcode jakie przycisk ma wklejać.

Przyciski dla rang:
Istnieje możliwość ograniczenia widoczności przycisku tak, by wyświetlał się np dla moderacji lub tylko dla administracji. Kod ten dalej zadziała wszystkim, jednak sam przycisk umieszczający go w polu tekstowym nie musi wyświetlać się każdemu.

Kod: Zaznacz cały

	if (_userdata.user_level != 0) {
		$("#text_editor_textarea").before("<input type='button' class='customBB' id='mod-b' title='Pole notatki moderatora' value='Nota Moderatora'>");
		$('#mod-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[mod]','[/mod]')});
	}
Kod ten wyświetli się moderacji i administracji. Jak widzicie, korzysta on z tych samych wierszy co powyższy skrypt, jednak umieścić należy go wewnątrz nawiasów dla formuły JEŚLI dla której poprawną wartością będą użytkownicy na poziomie wyższym niż podstawowy. Poniżej przedstawiam przykład w jakim poprawną wartością jest poziom użytkownika 1 jaki oznacza administratora.

Kod: Zaznacz cały

	if (_userdata.user_level === 1) {
		$("#text_editor_textarea").before("<input type='button' class='customBB' id='adm-b' title='Pole notatki administratora' value='Nota Administratora'>");
		$('#adm-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[adm]','[/adm]')});
	}

Kod: Zaznacz cały

    if ($(this).text().indexOf('[imie]') != -1) $(this).html($(this).html().replace(/\[imie\](.+?)\[\/imie\]/gi, '<div class="nameSquare">$1 </div>'));
	
Powyższy przykład zamienia bbcode 'imie' wybrany przez nas hmtl. Nazwa tagu pojawia się trzykrotnie, najpierw tuż po 'indexOf' w nawiasie i cudzysłowie, następnie dwukrotnie pojawia się po '.replace'. W tym miejscu widoczne są dodatkowo slashe. Nachylone w prawo oznaczają początek i koniec kodu jaki trzeba zamienić. Nachylone w lewo wstawiamy przed każdym znakiem specjalnym jaki jest w tekście jaki podmieniamy (musi się pojawić zarówno przed nawiasami kodu jak i przed slashem w części zamykającej bbcode, dzięki temu kod rozpozna, że znaki te nie są częścią JS a częścią tekstu jaki podmieniamy. Wewnątrz znajdują się znaki (.+?) - oznaczają miejsce, gdzie użytkownik wkleja tekst jaki należy zachować. Sekcja ta kończy się przecinkiem, a następnie w cudzysłowie umieszczamy html jaki ma zostać wklejony na miejsce naszego bbcode. Tam, gdzie ma pojawić się zachowana, wprowadzona przez użytkownika w bbcode zawartość wkleić należy "$1".

Kod: Zaznacz cały

    if ($(this).text().indexOf('[header]') != -1) $(this).html($(this).html().replace(/\[header\](.+?)\[\/header\]/gi, '<div class="mainSquare"><img src="https://$1" class="headerSquare">'));
W tym miejscu chcę przypomnieć, że dla bbcode w jaki wklejamy ilustrację należy ręcznie wpisać w 'https://'. Użytkownik musi podać adres bez https://www.

Kod: Zaznacz cały

    if ($(this).text().indexOf('[portret]') != -1) $(this).html($(this).html().replace(/\[portret\](.+?)\[\/portret\]/gi, '<img src="https://$1" class="iconSquare"></img><div class="kp3w">'));
W tym miejscu chciałbym wyjaścić, czemu kod portretu posiada html rozpoczynający kolejny div po ilustracji, w dodatku go nie kończąc. Nie możemu zagnieżdżać takich bbcode jeden w drugim. Następująca po portrecie sekcja cech korzysta z wielokrotnego kodu jaki musi być umieszczony razem w jednym DIVie. Obejściem tego ograniczenia jest rozpoczęcie tego html i zakończenie dwoma kodami. W przykładzie rozpoczynam go kodem portretu i kończę go kodem Opisu. Jak widzicie, w ten sposób można obejść problem z brakiem możliwości zagnieżdżania własnych bbcode i stworzyć zarówno ładną KP jak i czytelną podczas edycji.

Kod: Zaznacz cały

$('.kp3w').find('br').remove();
Ten krótki kod należy zastosować, gdy np tworzymy KP z wielu elementów i chcemy oddzielić je enterami w polu edycji. Umieszczone w takim miejscu entery mogą zostać wczytane jako html '<br>' który może zepsuć nam wygląd wyświetlanej KP. Powyższy kod usunie te entery wybranej przez nas sekcji poprzez podanie jej klasy (html '<br>' zostanie usunięty tylko wewnątrz obiektu o tej klasie). Wybraną klasę należy umieścić w pierwszym nawiasie, w cudzysłowie - w przykładzie to '.kp3w'.

Alternatywne rozwiązanie dla ilustracji

Alternatywą dla powyższego rozwiązania kodów ilustracji jest zastosowanie klasycznego bbcode 'img'

Kod: Zaznacz cały

[portret][img]URL[/img][/portret]
W takim kodzie użytkownik będzie mógł korzystać z pełnego adresu ilustracji tak jak zawsze. Kod JS portretu należy stworzyć w sposób następujący:

Kod: Zaznacz cały

    if ($(this).text().indexOf('[portret]') != -1) $(this).html($(this).html().replace(/\[portret\](.+?)\[\/portret\]/gi, '<div class="iconSquare">$1</div><div class="kp3w">'));
Kod ten umieści klasyczny bbcode 'IMG' wewnątrz diva o klasie iconSquare. Zmiany trzeba dokonać też w CSS.

Kod: Zaznacz cały

.iconSquare
należy zamienić na

Kod: Zaznacz cały

div.iconSquare img 
Dzięki temu nasze formatowanie ilustracji narzucimy jako formatowanie ilustracji wewnątrz DIVa stworzonego naszym bbcodem.

Podsumowanie

Na koniec zostało nam stworzyć KP. Karta ta wymaga wycentrowania - nie ma jednak sensu tworzyć tu jeszcze dodatkowego html na początku i na końcu naszego kodu, wystarczy zastosować dostępny na forum bbcode 'center'.

Kod: Zaznacz cały

[center]
[header]66.media.tumblr.com/22bd78b829ff310508e1647b7e424d0b/tumblr_ow2jhkQQ5t1sy4y3mo6_1280.png[/header]
[imie]IMIĘ I NAZWISKO[/imie]
[portret]data.whicdn.com/images/312742006/original.jpg[/portret]
[cecha]Cecha 1[/cecha]
[cecha]Cecha 2[/cecha]
[cecha]Cecha 3[/cecha]
[cecha]Cecha 4[/cecha]
[cecha]Cecha 5[/cecha]
[cecha]Cecha 6[/cecha]
[cecha]Cecha 7[/cecha]
[cecha]Cecha 8[/cecha]
[cecha]Cecha 9[/cecha]
[cecha]Cecha 10[/cecha]
[opis]Tu należy umieścić np opis postaci, [b]to większe[/b] pole. Tutaj można też zastosować klasyczny bbcode, np pogrubienie czy kursywę.[/opis]
[/center]

ODPOWIEDZ ]