Javascript preview met PHP UBB
Ik heb op internet een scriptje gevonden dat als je je tekst in een textarea zet dat je het dan ook direct in een DIV kunt zien. Maar ik wil er een preview van maken met php ubbcodes erin ik bedoel zegmaar:
Code (php)
1
[b]dikgedrukt[/b][i]schuin[/i]
en dat er dan in de div komt te staan
dikgedruktschuin
Ik heb dit script:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script language="JavaScript" type="text/javascript">
function preview(id1, id2){
var NewText = document.getElementById(id1).value;
splitText = NewText;
var DivElement = document.getElementById(id2);
DivElement.innerHTML = splitText;
}
</script>
function preview(id1, id2){
var NewText = document.getElementById(id1).value;
splitText = NewText;
var DivElement = document.getElementById(id2);
DivElement.innerHTML = splitText;
}
</script>
en bij het invoeren:
Code (php)
1
<textarea name="bericht_full" cols="60" rows="8" id="bericht_full" onkeyup="preview('bericht_full', 'bericht_full-preview');" style="background:#FFFFFF;"></textarea>
en bij het voorbeeld:
Code (php)
1
<div id="bericht_full-preview"></div>
Hopelijk kan iemand helpen, alvast bedankt
Gewijzigd op 01/01/1970 01:00:00 door Stefan
Als ik zeg maar
Code (php)
1
[b]Tekst[/b]
Maar alsnog weet ik niet of dat zijn argument is.
Om die UBB live te previewen zal hij het toch op de een of andere manier naar HTML moeten omzetten.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
function ubbcode()
{
var tekst = document.getElementById('input').value;
var codes = new Array
(
/\[b\](.*?)\[\/b\]/ig,
/\[i\](.*?)\[\/i\]/ig,
/\[u\](.*?)\[\/u\]/ig
);
var vervang = new Array
(
"<b>$1</b>",
"<i>$1</i>",
"<u>$1</u>"
);
for(var i = 0; i < codes.length; i++)
{
tekst = tekst.replace(codes[i], vervang[i]);
}
document.getElementById('voorbeeld').innerHTML = tekst;
}
</script>
<textarea rows="10" cols="50" onkeyup="ubbcode();" id="input"></textarea>
<div id="voorbeeld"></div>
function ubbcode()
{
var tekst = document.getElementById('input').value;
var codes = new Array
(
/\[b\](.*?)\[\/b\]/ig,
/\[i\](.*?)\[\/i\]/ig,
/\[u\](.*?)\[\/u\]/ig
);
var vervang = new Array
(
"<b>$1</b>",
"<i>$1</i>",
"<u>$1</u>"
);
for(var i = 0; i < codes.length; i++)
{
tekst = tekst.replace(codes[i], vervang[i]);
}
document.getElementById('voorbeeld').innerHTML = tekst;
}
</script>
<textarea rows="10" cols="50" onkeyup="ubbcode();" id="input"></textarea>
<div id="voorbeeld"></div>
Wanneer je echter (zoals ik) 200 smilies in een database heb die je wilt vervangen dan moet je dit dus niet allemaal in javascript zetten. Ajax bied hier een oplossing voor in combinatie met php.
Gewijzigd op 01/01/1970 01:00:00 door Zero XT
WillemJan Z schreef op 11.06.2009 07:27:
Dat is ook een manier, een beetje zoals Hyves het doet. Naast het veld waar je typt meteen een preview maken. Maar om dan onkeyup elke keer een AJAX requeste te doen lijkt me een beetje te veel van het goede?
idd hyves heeft het ook
WillemJan Z schreef op 11.06.2009 07:27:
Dat is ook een manier, een beetje zoals Hyves het doet. Naast het veld waar je typt meteen een preview maken. Maar om dan onkeyup elke keer een AJAX requeste te doen lijkt me een beetje te veel van het goede?
Als je met ajax gaat werken vind ik dat je dat 2 divs moet maken naast elkaar. Eentje met de textarea erin en de andere met de preview met display op none. Knop eronder met submit en preview en wanneer er op de preview knop word gedrukt.. de textarea div: display:none zetten en de preview div: display:block maken.
Ajax request maken en voila je hebt een mooie preview
Gewijzigd op 01/01/1970 01:00:00 door Zero XT
Voordeel is dat je netwerkverbinding / server hier dan niet mee wordt belast, maar de computer van de bezoeker. Zeker omdat je preview bij elke toetsaanslag wordt ververst is AJAX geen slimme optie.
Zie bijvoorbeeld eens hier wat er gebeurt:
http://www.robertdeiman.net/preview.php
Lees mijn post goed:
Quote:
Wanneer je echter (zoals ik) 200 smilies in een database heb die je wilt vervangen dan moet je dit dus niet allemaal in javascript zetten. Ajax bied hier een oplossing voor in combinatie met php.
Dus voor een paar ubbcodes is het geen probleem.. heb je er echter een stuk of 300 zoals ik dan kan je ongeveer nagaan hoe groot mijn javascript bestand zou moeten worden en dus gebruik ik op dat moment liever ajax.
Oké, ik snap het wel, maar het is en blijft lastig om dit met PHP te doen.. je js bestand zal misschien groot worden, maar die wordt ook gecached, dus die wordt maar 1x gedownload. Dat is altijd nog minder erg dan bij een text van 400 tekens 400 keer controleren op de serverkant.
Als je met ajax gaat werken moet je ook niet onkeyup alles verzenden maar zoals ik eerder beschreef:
Quote:
Als je met ajax gaat werken vind ik dat je dat 2 divs moet maken naast elkaar. Eentje met de textarea erin en de andere met de preview met display op none. Knop eronder met submit en preview en wanneer er op de preview knop word gedrukt.. de textarea div: display:none zetten en de preview div: display:block maken.
Ajax request maken en voila je hebt een mooie preview
Ajax request maken en voila je hebt een mooie preview
Gewoon een preview knop. En wanneer hier op word gelikt, dan pas de ajax request uitvoeren