Scratch

sparks · 2011-08-19 09:17:13

Hey everyone! I'm working on two websites at the moment that are going to need commenting systems and so I'm developing a system that erases html and allows bbcode, just like the forums! I would like to make this a collaborative effort partly because I will probably need some help and partly because I think other people in advanced topics would enjoy the ability to add commenting to their site without the dangers of free html use or the lack of images and links altogether.

The working example can be found here. Please consider helping out or testing it for flaws!

The below code is a joint effort by Sparks, Hardmath123 and LS97 - lets face it though, LS97 probably did the majority of it though! tongue

currently supports
images
quotes
urls (simple)
urls
bold text
itallic text
underlined text
font colours (both color and colour)

the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BBCode Comment Example</title>
</head>

<body>
<?php
if(isset($_POST['submit'])){
$string = $_POST['comment'];
$string = str_replace("<","&lt",$string); #'damage' all <'s, removing html and simply displaying as text.
$string = str_replace(">","&gt",$string);

$string = str_replace("
","<br />",$string); #line breaks

$string = preg_replace('#\[img\]([^\[]*?)\[/img\]#', "<img src=\"$1\" style=\"max-width: 500;\"/>", $string); #img tag

$string = preg_replace('#\[url\]([^\[]*?)\[/url\]#', "<a href=\"$1\">$1</a>", $string); #simple url tag
$string = preg_replace('#\[url=([^\[]+?)\](.*?)\[/url\]#', "<a href=\"$1\">$2</a>", $string); #complex url tag

$string = preg_replace('#\[quote\]([^\[]*?)\[/quote\]#', "<table width=\"90%\" border=\"1\" cellspacing=\"0\" cellpadding=\"3\"><tr border=\"1\" style=\"background-color:#EEE; border-color: #888;\"><td>$1</td></tr></table>", $string); #simple quote tag

$string = preg_replace('#\[quote=([^\[]+?)\](.*?)\[/quote\]#', "<table width=\"90%\" border=\"1\" cellspacing=\"0\" cellpadding=\"3\"><tr border=\"1\" style=\"background-color:#EEE; border-color: #888; border-width: 1px;\"><td><strong>$1 wrote:</strong><br />$2</td></tr></table>", $string); #complex quote tag

$string = preg_replace('#\[colou?r=([a-zA-Z]*|\#[0-9a-fA-F]*)\](.*?)\[/colou?r\]#', "<span style=\"color: $1\">$2</font>", $string); #font colour tag

$string = preg_replace('#\[b\](.*?)\[/b\]#ms', "<strong>$1</strong>", $string); #bold
$string = preg_replace('#\[i\](.*?)\[/i\]#ms', "<em>$1</em>", $string); #italics
$string = preg_replace('#\[u\](.*?)\[/u\]#ms', "<span style=\"text-decoration: underline\">$1</span>", $string); #underline

echo "<table width=\"500\" border=\"1\" cellspacing=\"0\" cellpadding=\"3\"><tr>";
echo "<td border=\"2\" width=\"500px\" style=\"background-color:#FFA; border-color: #333;\">";
echo $string;
echo "</td></tr></table>
<br />";
}
?>

<form name = 'comment' action = '<?php echo $_SERVER['REQUEST_URI'] ?>' method = 'post'>
  <textarea name = 'comment' rows = '10' cols = '50'><?php if(isset($string)){ echo $_POST['comment']; }?></textarea>
  <br />
<input type = 'submit' name = 'submit' value = 'comment'>
</form>
</body>
</html>

Last edited by sparks (2011-08-22 06:27:34)

WindowsExplorer · 2011-08-19 09:25:19

Cool!

Hardmath123 · 2011-08-19 09:45:01

Code:

<div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 525px; overflow:auto">
</div>
<textarea id="bbc" onkeyup="render()" rows=20 cols=100></textarea>
<script type="text/javascript">
function render()
{
    document.getElementById("txt").innerHTML=document.getElementById("bbc").value.replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>").replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>").replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>").replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1\">").replace(/\[\/quote\]/g, "</blockquote>").replace(/\n/g, "<br>").replace(/\[img\]/g, "<img src=\"").replace(/\[\/img\]/g, "\">").replace(/\[code\]/g, "<blockquote style=\"font-family:andale mono; overflow:scroll; height:200px;width:400px;background-color:#F1F1F1\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>").replace(/\[\/code\]/g, "</blockquote>").replace(/\[url=/g, "<a href=\"").replace(/\[\/url\]/g, "</a>").replace(/\[color=/g, "<font color=\"").replace(/\[\/color\]/g, "</font>").replace(/\]/g, "\">").replace(/</g, "&lt").replace(/>/g, "&gt")
}
</script>

Simple JS-based editor, that formats to the real forum specs, supports everything except smileys and [url]...[/url] (does support [url=...]...[/url]).

Last edited by Hardmath123 (2011-08-19 09:45:29)

sparks · 2011-08-19 09:48:36

That looks handy...

Added it to the page, it's really good! can the edited version be read to a php variable? I know a lot about php and html and css but I've not really looked at js before.

Last edited by sparks (2011-08-19 09:53:30)

Hardmath123 · 2011-08-19 09:50:15

I use it a lot to format my awesome, well-formatted posts.

Hardmath123 · 2011-08-19 09:52:35

Whoops! Wrong code tongue !

Code:

<div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 525px; overflow:auto">
</div>
<textarea id="bbc" onkeyup="render()" rows=20 cols=100></textarea>
<script type="text/javascript">
function render()
{
    document.getElementById("txt").innerHTML=document.getElementById("bbc").value.replace(/</g, "&lt").replace(/>/g, "&gt").replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>").replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>").replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>").replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1\">").replace(/\[\/quote\]/g, "</blockquote>").replace(/\n/g, "<br>").replace(/\[img\]/g, "<img src=\"").replace(/\[\/img\]/g, "\">").replace(/\[code\]/g, "<blockquote style=\"font-family:andale mono; overflow:scroll; height:200px;width:400px;background-color:#F1F1F1\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>").replace(/\[\/code\]/g, "</blockquote>").replace(/\[url=/g, "<a href=\"").replace(/\[\/url\]/g, "</a>").replace(/\[color=/g, "<font color=\"").replace(/\[\/color\]/g, "</font>").replace(/\]/g, "\">")
}
</script>
<!-- Made by Hardmath123 -->

sparks · 2011-08-19 09:54:07

Added it to the page, it's really good! can the edited version be read to a php variable? I know a lot about php and html and css but I've not really looked at js before.

Hardmath123 · 2011-08-19 09:56:56

I dunno. I'm more of a HTML/JS/CSS person, not a PHP person. You could format it to a

Code:

<textarea style="display:none"></textarea>

and read that element's innerHTML from PHP. Maybe.

sparks · 2011-08-19 10:19:49

Yes, that should work... one second...

This way I should be able to use my current method to get the [ url] one to work... smilies are easily done with php parse anyway!

sparks · 2011-08-19 10:39:57

The problem is that the content isn't rendered until the textarea is edit. Is there a way to render on pageload so that the value is shown?

Right, It's about time I sit down and learn javascript! *sits down and learns javascript*

Last edited by sparks (2011-08-19 11:14:43)

ProgrammingFreak · 2011-08-19 11:21:31

lol

Wow, sparks. This is really good. And thumbs up to Hardmath! That dynamic editor is awesome. big_smile Thanks for having it open source. Can't wait to get my hands dirty. tongue

I'll post the code if I come with something.

sparks · 2011-08-19 11:23:57

I've actually built an entire commenting system already, minus the bbcode editor including username display and comment deletion for moderators, which I might post the code for if people are interested.

I'm so excited, I just made a button display the date without reloading that page like php would make you do! *childlike laughter*

Last edited by sparks (2011-08-19 11:25:28)

ProgrammingFreak · 2011-08-19 11:27:23

sparks wrote:
I've actually built an entire commenting system already, minus the bbcode editor including username display and comment deletion for moderators, which I might post the code for if people are interested.

I'm so excited, I just made a button display the date without reloading that page like php would make you do! *childlike laughter*

Haha. I've made a commenting system for my site (not up yet) but its definitely not as advanced as yours. big_smile

ProgrammingFreak · 2011-08-19 11:29:58

This was pretty easy:

Underline.

Code:

$string = str_replace("[u]","<u>",$string);
$string = str_replace("[/u]","</u>",$string);

sparks · 2011-08-19 11:30:25

Example of it here

ProgrammingFreak · 2011-08-19 11:31:56

Color:

Code:

$string = str_replace("[color]","<span style='color:",$string); # deals with [color] tags.
$string = str_replace("[/color]","'></span>",$string);

Very Cool, sparks. big_smile I signed up.

Last edited by ProgrammingFreak (2011-08-19 11:35:29)

sparks · 2011-08-19 11:36:52

Cool! big_smile The site isn't finished though tongue

Hardmath123 · 2011-08-19 12:09:04

You can delete the other textarea now. Also, change the size of the textarea, it's too small.

Code:

<textarea ROWS=100 COLS=100></textarea>

Ok, that may be overkill...

Finally, can you set the background color of the instant to gainsboro?

sparks · 2011-08-19 12:15:47

Nooo! Hardmath, the display from the textarea isn't updated until you click on it... I need it to take a php variable and convert that to html.

message
V
sent to database
V
retrieved from database and set to php variable
V
php variable converted by your js function
V
result returned to php variable
V
php variable echoed.

LS97 · 2011-08-19 13:26:52

Sorry to say this, but the code could be greatly improved with REGEX. Here's some PHP example, which could be simply used as a replacement of the entire source code in the first post.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
</head>

<body>
<?php
if(isset($_POST['submit'])){
$string = $_POST['comment'];
$string = str_replace("<","&lt",$string); #'damage' all <'s, removing html and simply displaying as text.
$string = str_replace(">","&gt",$string);

$string = str_replace("
","<br />",$string); #line breaks

$string = preg_replace('#\[img\]([^\[]*?)\[/img\]#', "<img src=\"$1\" />", $string); #img tag

$string = preg_replace('#\[url\]([^\[]*?)\[/url\]#', "<a href=\"$1\">$1</a>", $string); #simple url tag

$string = preg_replace('#\[url=([^\[]+?)\](.*?)\[/url\]#', "<a href=\"$1\">$2</a>", $string); #complex url tag

$string = preg_replace('#\[b\](.*?)\[/b\]#ms', "<strong>$1</strong>", $string); #bold
$string = preg_replace('#\[i\](.*?)\[/i\]#ms', "<em>$1</em>", $string); #italics
$string = preg_replace('#\[u\](.*?)\[/u\]#ms', "<span style=\"text-decoration: underline\">$1</span>", $string); #underline

echo "<div style=\"width:500px; height:auto; background-color:#FFFFFF; border-color: #666; border-width: 2px;\">";
echo $string;
echo "</div>
<br />";
}
?>

<form name = 'comment' action = '<?php echo $_SERVER['REQUEST_URI'] ?>' method = 'post'>
  <textarea name = 'comment' rows = '10' cols = '50'><?php if(isset($string)){ echo $_POST['comment']; }?></textarea>
  <br />
<input type = 'submit' name = 'submit' value = 'comment'>
</form>
</body>
</html>

I didn't add quote or code boxes though, I guess that'll be for next time. And I didn't test the code at all.

Last edited by LS97 (2011-08-19 13:52:28)

LS97 · 2011-08-19 13:54:57

testing image relative paths on scratch: [img]/forums/img/sbcats/motion.png[/img]

sparks · 2011-08-19 15:07:36

Wow I had no idea you could do that!

LS97 · 2011-08-19 15:58:28

Here's the code above put into action -- you see it's not bad

ProgrammingFreak · 2011-08-19 16:04:45

LS97 wrote:

Sorry to say this, but the code could be greatly improved with REGEX. Here's some PHP example, which could be simply used as a replacement of the entire source code in the first post.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
</head>

<body>
<?php
if(isset($_POST['submit'])){
$string = $_POST['comment'];
$string = str_replace("<","&lt",$string); #'damage' all <'s, removing html and simply displaying as text.
$string = str_replace(">","&gt",$string);

$string = str_replace("
","<br />",$string); #line breaks

$string = preg_replace('#\[img\]([^\[]*?)\[/img\]#', "<img src=\"$1\" />", $string); #img tag

$string = preg_replace('#\[url\]([^\[]*?)\[/url\]#', "<a href=\"$1\">$1</a>", $string); #simple url tag

$string = preg_replace('#\[url=([^\[]+?)\](.*?)\[/url\]#', "<a href=\"$1\">$2</a>", $string); #complex url tag

$string = preg_replace('#\[b\](.*?)\[/b\]#ms', "<strong>$1</strong>", $string); #bold
$string = preg_replace('#\[i\](.*?)\[/i\]#ms', "<em>$1</em>", $string); #italics
$string = preg_replace('#\[u\](.*?)\[/u\]#ms', "<span style=\"text-decoration: underline\">$1</span>", $string); #underline

echo "<div style=\"width:500px; height:auto; background-color:#FFFFFF; border-color: #666; border-width: 2px;\">";
echo $string;
echo "</div>
<br />";
}
?>

<form name = 'comment' action = '<?php echo $_SERVER['REQUEST_URI'] ?>' method = 'post'>
  <textarea name = 'comment' rows = '10' cols = '50'><?php if(isset($string)){ echo $_POST['comment']; }?></textarea>
  <br />
<input type = 'submit' name = 'submit' value = 'comment'>
</form>
</body>
</html>

I didn't add quote or code boxes though, I guess that'll be for next time. And I didn't test the code at all.

yeah, I was hoping that someone would make the simple url tag. big_smile Looks like it was you. tongue

sparks · 2011-08-19 16:40:35

LS97 wrote:
Here's the code above put into action -- you see it's not bad

Well then.That showed us.... Good job tongue

Scratch

archived forums

#1 2011-08-19 09:17:13

bbcode for your sites - collaberative php coding

Code:

#2 2011-08-19 09:25:19

Re: bbcode for your sites - collaberative php coding

#3 2011-08-19 09:45:01

Re: bbcode for your sites - collaberative php coding

Code:

#4 2011-08-19 09:48:36

Re: bbcode for your sites - collaberative php coding

#5 2011-08-19 09:50:15

Re: bbcode for your sites - collaberative php coding

#6 2011-08-19 09:52:35

Re: bbcode for your sites - collaberative php coding

Code:

#7 2011-08-19 09:54:07

Re: bbcode for your sites - collaberative php coding

#8 2011-08-19 09:56:56

Re: bbcode for your sites - collaberative php coding

Code:

#9 2011-08-19 10:19:49

Re: bbcode for your sites - collaberative php coding

#10 2011-08-19 10:39:57

Re: bbcode for your sites - collaberative php coding

#11 2011-08-19 11:21:31

Re: bbcode for your sites - collaberative php coding

#12 2011-08-19 11:23:57

Re: bbcode for your sites - collaberative php coding

#13 2011-08-19 11:27:23

Re: bbcode for your sites - collaberative php coding

sparks wrote:

#14 2011-08-19 11:29:58

Re: bbcode for your sites - collaberative php coding

Code:

#15 2011-08-19 11:30:25

Re: bbcode for your sites - collaberative php coding

#16 2011-08-19 11:31:56

Re: bbcode for your sites - collaberative php coding

Code:

#17 2011-08-19 11:36:52

Re: bbcode for your sites - collaberative php coding

#18 2011-08-19 12:09:04

Re: bbcode for your sites - collaberative php coding

Code:

#19 2011-08-19 12:15:47

Re: bbcode for your sites - collaberative php coding

#20 2011-08-19 13:26:52

Re: bbcode for your sites - collaberative php coding

Code:

#21 2011-08-19 13:54:57

Re: bbcode for your sites - collaberative php coding

#22 2011-08-19 15:07:36

Re: bbcode for your sites - collaberative php coding

#23 2011-08-19 15:58:28

Re: bbcode for your sites - collaberative php coding

#24 2011-08-19 16:04:45

Re: bbcode for your sites - collaberative php coding

LS97 wrote:

Code:

#25 2011-08-19 16:40:35

Re: bbcode for your sites - collaberative php coding

LS97 wrote:

Board footer