[SOLVED] bbcode buttons?

[marksie1988]

hi,

 

i have a bbcode that is implemented on a tutorial system that i have in place, but i would like to add a table that users can click on an image and the tags are then unserted the same way as they are here.  i understand that this needs to be done with javascript and i havent got much javascript knowledge so i could do with some help :S

 

the bbcode i am using is here

 

<?  function bbcode ($str) {  

    $str = htmlentities($str);  

  

    $simple_search = array(  

                //added line break  

                '/\[br\]/is',  

                '/\[b\](.*?)\[\/b\]/is',  

                '/\[i\](.*?)\[\/i\]/is',  

                '/\[u\](.*?)\[\/u\]/is',  

                '/\[url\=(.*?)\](.*?)\[\/url\]/is',  

                '/\[url\](.*?)\[\/url\]/is',  

                '/\[align\=(left|center|right)\](.*?)\[\/align\]/is',  

                '/\[img\](.*?)\[\/img\]/is',  

                '/\[mail\=(.*?)\](.*?)\[\/mail\]/is',  

                '/\[mail\](.*?)\[\/mail\]/is',  

                '/\[font\=(.*?)\](.*?)\[\/font\]/is',  

                '/\[size\=(.*?)\](.*?)\[\/size\]/is',  

                '/\[color\=(.*?)\](.*?)\[\/color\]/is',  

                  //added textarea for code presentation  

               '/\[codearea\](.*?)\[\/codearea\]/is',  

                 //added pre class for code presentation  

              '/\[code\](.*?)\[\/code\]/is',  

                //added paragraph  

              '/\[p\](.*?)\[\/p\]/is',  

		  '/\:\)/is',

		  '/\:\(/is',

                );  

  

    $simple_replace = array(  

			//added line break  

               '<br />',  

                '<strong>$1</strong>',  

                '<em>$1</em>',  

                '<u>$1</u>',  

			// added nofollow to prevent spam  

                '<a href="$1" rel="nofollow" title="$2 - $1">$2</a>',  

                '<a href="$1" rel="nofollow" title="$1">$1</a>',  

                '<div style="text-align: $1;">$2</div>',  

			//added alt attribute for validation  

                '<img src="$1" alt="" />',  

                '<a href="mailto:$1">$2</a>',  

                '<a href="mailto:$1">$1</a>',  

                '<span style="font-family: $1;">$2</span>',  

                '<span style="font-size: $1;">$2</span>',  

                '<span style="color: $1;">$2</span>',  

			//added textarea for code presentation  

			'<textarea class="code_container" rows="30" cols="70">$1</textarea>',  

			//added pre class for code presentation  

			'<pre class="code">$1</pre>',  

			//added paragraph  

			'<p>$1</p>',  

			'<img src="../../images/smilies/smile2.gif">',

			'<img src="../../images/smilies/sad.gif">',

                );  

  

    // Do simple BBCode's  

    $str = preg_replace ($simple_search, $simple_replace, $str);  

  

    // Do <blockquote> BBCode  

    $str = bbcode_quote ($str);  

  

    return $str;  

}  

  

function bbcode_quote ($str) {  

    //added div and class for quotes  

    $open = '<blockquote><div class="quote">';  

    $close = '</div></blockquote>';  

  

    // How often is the open tag?  

    preg_match_all ('/\[quote\]/i', $str, $matches);  

    $opentags = count($matches['0']);  

  

    // How often is the close tag?  

    preg_match_all ('/\[\/quote\]/i', $str, $matches);  

    $closetags = count($matches['0']);  

  

    // Check how many tags have been unclosed  

    // And add the unclosing tag at the end of the message  

    $unclosed = $opentags - $closetags;  

    for ($i = 0; $i < $unclosed; $i++) {  

        $str .= '</div></blockquote>';  

    }  

  

    // Do replacement  

    $str = str_replace ('[' . 'quote]', $open, $str);  

    $str = str_replace ('[/' . 'quote]', $close, $str);  

  

    return $str;  

}  

?>

 

 

Thanks

Steve

[marksie1988]

ok i have been looking around and have found out that i need to use javascript to do this.

 

as i know nothing about javascript i was wondering if anyone has a script like the one used within smf that will allow me to add bb at the click of an image?

 

i tried to use the same code as used on smf but couldnt get it to function and thought i had probably missed something out.

 

if someone could help i would be greatfull

[marksie1988]

bump

[beansandsausages]

code : i have been looking around on the forum and found this.

 

<script language="javascript">

// Replaces the currently selected text with the passed text.
function replaceText(text, textarea)
{
// Attempt to create a text range (IE).
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
	caretPos.select();
}
// Mozilla text range replace.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text + end;

	if (textarea.setSelectionRange)
	{
		textarea.focus();
		textarea.setSelectionRange(begin.length + text.length, begin.length + text.length);
	}
	textarea.scrollTop = scrollPos;
}
// Just put it on the end.
else
{
	textarea.value += text;
	textarea.focus(textarea.value.length - 1);
}
}


// Remember the current position.
function storeCaret(text)
{
// Only bother if it will be useful.
if (typeof(text.createTextRange) != "undefined")
	text.caretPos = document.selection.createRange().duplicate();
}


// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
	var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

	caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

	if (temp_length == 0)
	{
		caretPos.moveStart("character", -text2.length);
		caretPos.moveEnd("character", -text2.length);
		caretPos.select();
	}
	else
		textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
	var begin = textarea.value.substr(0, textarea.selectionStart);
	var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
	var end = textarea.value.substr(textarea.selectionEnd);
	var newCursorPos = textarea.selectionStart;
	var scrollPos = textarea.scrollTop;

	textarea.value = begin + text1 + selection + text2 + end;

	if (textarea.setSelectionRange)
	{
		if (selection.length == 0)
			textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
		else
			textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
		textarea.focus();
	}
	textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
	textarea.value += text1 + text2;
	textarea.focus(textarea.value.length - 1);
}
}

window.onload=function() {
// Event Used To Ready IE For Caret Position Storage
document.postmodify.message.focus();
}
</script>

 

This is the form for the buttons.

 

<form>		
	<input type=\"button\" onclick=\"surroundText('[b]', '[/b]', document.forms.postmodify.message); return false;\" value=\"Bold\">
	<input type=\"button\" onclick=\"surroundText('[u]', '[/u]', document.forms.postmodify.message); return false;\" value=\"Underline\">
	</form>

 

This is the code for images like the clcikable faces etc ...

 

<form>		
	<a href=\"javascript:void(0);\" onclick=\"replaceText('', document.forms.postmodify.message); return false;\">LOCATION OF IMAGE HERE</a>
			</form>

 

And this is the text area

 

<form action=yoursite method=POST name=postmodify>
	<center>

		<textarea cols=\"58\" rows=\"3\" name=\"message\" id=\"message\" onselect=\"storeCaret(this);\" onclick=\"storeCaret(this);\" onkeyup=\"storeCaret(this);\" onchange=\"storeCaret(this);\" onfocus=\"storeCaret(this);\" /></textarea> 

 

Like i said this inst my own work, so there maybe errors etc ... sorry best i could do.