BBCode Text Editor

[MinusMyThoughts]

Hey, everyone!I'm trying to build a tool that will allow my users to format their text using BBCode. I found THIS POST on preg_replace(), and I think I can implement and customize the function with relative success.What I'm not clear on, however, is the code necessary to create the toolbars at the top of my textarea to allow users to click a button to add tags to their text.I'd also like to add the feature to allow a user to highlight a word and add opening and closing tags to their selection For example, the user starts with this phrase:

This is some sample text

By highlighting and clicking the "B" button, the user ends up with:

[b]This is some sample text[/b]

So, my question is this: does anyone have a good tutorial or any advice on creating a button toolbar that will integrate with the preg_replace() function?Thanks so much!-Jason

[Anders Moen]

If you need BBCodes:

<?php/************************************************//*	BBCode v1.0a							  *//*	Date: 03/2003							 *//*											  *//* A simple and effective script that		   *//* allows you to implement bbcode type		  *//* behaviour on your php website.			   *//*											  *//* Contact: bbcode@swaziboy.com				 *//* feel free to contact me for support if you   *//* need help									*//*											  *//* Usage:									   *//*											  *//* Put the following line at the top of		 *//* the page you want to have the bbocde		 *//* in...(assumes both pages are in the		  *//* folder									   *//*											  *//* include("bbCode.php");					   *//*											  *//* Pass the text to the function:			   *//*											  *//* $mytext = BBCode("This is my BBCODE");	   *//* or										   *//* $mytext = "This is my text";				 *//* $mytext = BBCode($mytext);				   *//*											  *//* echo $mytext;								*//*											  *//************************************************/?><style type="text/css"><!--body  {   font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;}.bold {   font-weight: bold;}.italics {   font-style: italic;}.underline {   text-decoration: underline;}.strikethrough {   text-decoration: line-through;}.overline {   text-decoration: overline;}.sized {   text-size:}.quotecodeheader {   font-family: Verdana, arial, helvetica, sans-serif;   font-size: 12px;   font-weight: bold;}.codebody {   background-color: #FFFFFF;	font-family: Courier new, courier, mono;	font-size: 12px;	color: #006600;	border: 1px solid #BFBFBF;}.quotebody {   background-color: #FFFFFF;	font-family: Courier new, courier, mono;	font-size: 12px;	color: #660002;   border: 1px solid #BFBFBF;}.listbullet {   list-style-type: disc;   list-style-position: inside;}.listdecimal {   list-style-type: decimal;   list-style-position: inside;}.listlowerroman {   list-style-type: lower-roman;   list-style-position: inside;}.listupperroman {   list-style-type: upper-roman;   list-style-position: inside;}.listloweralpha {   list-style-type: lower-alpha;   list-style-position: inside;}.listupperalpha {   list-style-type: upper-alpha;   list-style-position: inside;}--></style><?php   //Local copy   function BBCode($Text)	   {		 // Replace any html brackets with HTML Entities to prevent executing HTML or script			// Don't use strip_tags here because it breaks [url] search by replacing & with amp			$Text = str_replace("<", "<", $Text);			$Text = str_replace(">", ">", $Text);			// Convert new line chars to html <br /> tags			$Text = nl2br($Text);			// Set up the parameters for a URL search string			$URLSearchString = " a-zA-Z0-9\:\/\-\?\&\.\=\_\~\#\'";			// Set up the parameters for a MAIL search string			$MAILSearchString = $URLSearchString . " a-zA-Z0-9\.@";			// Perform URL Search			$Text = preg_replace("/\[url\]([$URLSearchString]*)\[\/url\]/", '<a href="$1" target="_blank">$1</a>', $Text);			$Text = preg_replace("(\[url\=([$URLSearchString]*)\](.+?)\[/url\])", '<a href="$1" target="_blank">$2</a>', $Text);		 //$Text = preg_replace("(\[url\=([$URLSearchString]*)\]([$URLSearchString]*)\[/url\])", '<a href="$1" target="_blank">$2</a>', $Text);			// Perform MAIL Search			$Text = preg_replace("(\[mail\]([$MAILSearchString]*)\[/mail\])", '<a href="mailto:$1">$1</a>', $Text);			$Text = preg_replace("/\[mail\=([$MAILSearchString]*)\](.+?)\[\/mail\]/", '<a href="mailto:$1">$2</a>', $Text);		 			// Check for bold text			$Text = preg_replace("(\[b\](.+?)\[\/b])is",'<span class="bold">$1</span>',$Text);			// Check for Italics text			$Text = preg_replace("(\[i\](.+?)\[\/i\])is",'<span class="italics">$1</span>',$Text);			// Check for Underline text			$Text = preg_replace("(\[u\](.+?)\[\/u\])is",'<span class="underline">$1</span>',$Text);			// Check for strike-through text			$Text = preg_replace("(\[s\](.+?)\[\/s\])is",'<span class="strikethrough">$1</span>',$Text);			// Check for over-line text			$Text = preg_replace("(\[o\](.+?)\[\/o\])is",'<span class="overline">$1</span>',$Text);			// Check for colored text			$Text = preg_replace("(\[color=(.+?)\](.+?)\[\/color\])is","<span style=\"color: $1\">$2</span>",$Text);			// Check for sized text			$Text = preg_replace("(\[size=(.+?)\](.+?)\[\/size\])is","<span style=\"font-size: $1px\">$2</span>",$Text);			// Check for list text			$Text = preg_replace("/\[list\](.+?)\[\/list\]/is", '<ul class="listbullet">$1</ul>' ,$Text);			$Text = preg_replace("/\[list=1\](.+?)\[\/list\]/is", '<ul class="listdecimal">$1</ul>' ,$Text);			$Text = preg_replace("/\[list=i\](.+?)\[\/list\]/s", '<ul class="listlowerroman">$1</ul>' ,$Text);			$Text = preg_replace("/\[list=I\](.+?)\[\/list\]/s", '<ul class="listupperroman">$1</ul>' ,$Text);			$Text = preg_replace("/\[list=a\](.+?)\[\/list\]/s", '<ul class="listloweralpha">$1</ul>' ,$Text);			$Text = preg_replace("/\[list=A\](.+?)\[\/list\]/s", '<ul class="listupperalpha">$1</ul>' ,$Text);			$Text = str_replace("[*]", "<li>", $Text);			// Check for font change text			$Text = preg_replace("(\[font=(.+?)\](.+?)\[\/font\])","<span style=\"font-family: $1;\">$2</span>",$Text);			// Declare the format for [code] layout			$CodeLayout = '<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">								<tr>									<td class="quotecodeheader"> Code:</td>								</tr>								<tr>									<td class="codebody">$1</td>								</tr>						   </table>';			// Check for [code] text			$Text = preg_replace("/\[code\](.+?)\[\/code\]/is","$CodeLayout", $Text);			// Declare the format for [quote] layout			$QuoteLayout = '<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">								<tr>									<td class="quotecodeheader"> Quote:</td>								</tr>								<tr>									<td class="quotebody">$1</td>								</tr>						   </table>';					 			// Check for [code] text			$Text = preg_replace("/\[quote\](.+?)\[\/quote\]/is","$QuoteLayout", $Text);		 			// Images			// [img=pathtoimage]			$Text = preg_replace("/\[img\](.+?)\[\/img\]/", '<img src="$1">', $Text);		 			// [img=widthxheight]image source[/img]			$Text = preg_replace("/\[img\=([0-9]*)x([0-9]*)\](.+?)\[\/img\]/", '<img src="$3" height="$2" width="$1">', $Text);		 		   return $Text;	  }// THANKS TO BBCODE.ORG FOR THESE WONDERFULL BBCODES?>

Then you just use in the while:echo bbcode($name);or was it something else? Just wait...I'll check on my own site :)Edit: the right way to display them:echo bbcode($row[name]);If you for example save the BBCodes in a file called bbcode.php and then include('bbcode.php'); on the site you need them. That's what I'm doing and it works fine.

[MinusMyThoughts]

Thanks, but I don't need the code for making the BBCode work...I'm looking for buttons that will insert the BBCode for my users. And, upon using my on-second-thought approach, I think I should have posted this in JavaScript.Hmm...Anyone?-Jason

[justsomeguy]

Yeah, that's a Javascript question. At first glance, everything seems simple except for finding the selected text, I'm not sure what that is off the top of my head. But other then that, the button would probably call a Javascript function and tell it what tag to add, and the function would replace the text with "[start tag]original text[end tag]".This might also help:http://www.google.com/search?client=opera&...-8&oe=utf-8

[Anders Moen]

Oh...when you say it, I was looking for the same! lolWell, I'm gonna try out the one I found at Dynamic Drive. Seems easy enough.

[MinusMyThoughts]

I haven't tested it, but I found THIS ARTICLE when I searched the w3schools JavaScript forum.Looks like a good way to create a RTE without allowing HTML.If I've wrapped my head around this properly, using BBCode and this editor allows the developer to utilize the strip_tags() function, making it safe from malicious code. HTML will be added later by a script written by the developer, meaning only tags that the developer specifically defines will be inserted into the post.This seems safer than the Dynamic Drive Rich Text Editor, since clicking "View Source" in that editor shows raw HTML. I didn't look too deeply into their safeguards against potentially troublesome code, but I'd prefer to do a little more work to ensure safety...Anyways, thanks so much for the input! Hopefully the stuff I dug up will help some folks out!-Jason