Jump to content


Photo
* * * - - 2 votes

BBCODE Clickables


  • Please log in to reply
9 replies to this topic

#1 Braunson

Braunson

    Young Padawan

  • Members
  • Pip
  • 237 posts
  • Gender:Male
  • Location:Ontario, Canada

Posted 02 March 2007 - 04:36 PM

Want to know how to make thoe's clickable bbcode or smiley buttons.

Here's where you can findout!

First of all you need a forum box to add it to.

<form method='post' name='addcomment'>

Comment:

<input type=\"button\" onClick=\"document.addcomment.comment.value+='[b][/b]'\" value=\"Bold\" name=\"bold\" title=\"Add Bold\" >
<input type=\"button\" onClick=\"document.addcomment.comment.value+='[i][/i]'\" value=\"Italic\" name=\"italic\" title=\"Add Italic\" >
<input type=\"button\" onClick=\"document.addcomment.comment.value+='[php][/php]'\" value=\"PHP Code\" name=\"php\" title=\"Add PHP Code\" >
<input type=\"button\" onClick=\"document.addcomment.comment.value+='[url=http://linkhere.com]Link text[/url]'\" value=\"URL\" name=\"url\" title=\"Add Hyperlink\" >

<textarea rows='5' cols='35' name='comment'></textarea>

<input type='submit' name='add_comment' value='Submit'>
</form>

Now that was my full code.




Here's the explaniation of a button

What you need to change is...

onClick=\"document.addcomment.comment.

That addcomment you need to change to the name of the entire form your submitting to.
Next is comment which is the 'textbox' your submitting in.

value+='[url=http://linkhere.com]Link text[/url]'\"
This you need to change what is going to be added to the textbox. e.g. [/b/][/b/] *remove the extra /'s

value=\"URL\" name=\"url\" title=\"Add Hyperlink\"

Here for Value you need to give it, it's display name.
Whatever is shown in value is what is shown to the guest/reader.

Now for the name, just change that to whatever bbcode your using, eg. for bold enter 'bold'.
Just to specify the button.

As for Title, just eter 'Add Whatever' It's almost like an Image hover, and you sometimes get text displayed.




Thats alll.. Any questions. feel free to ask! :)

#2 nitr0x

nitr0x

    Young Padawan

  • Members
  • Pip
  • 201 posts

Posted 03 March 2007 - 06:48 PM

That's javascript mate :D

document.addcomment.comment.value+='

'

is javascript.

#3 Braunson

Braunson

    Young Padawan

  • Members
  • Pip
  • 237 posts
  • Gender:Male
  • Location:Ontario, Canada

Posted 04 March 2007 - 12:40 AM

HAHA Rofl, Sorry bout that. Reported to be moved. rofl :( My bad.

#4 Mr. Jay

Mr. Jay

    Young Padawan

  • Members
  • Pip
  • 81 posts

Posted 07 March 2007 - 02:01 AM

Good job :D Too bad you cant highlight the text you want then the BBCODE would add the tags before and after the highlighted text :)

Edited by Jonpopnycorn, 12 March 2007 - 04:34 AM.


#5 Arutha

Arutha

    Young Padawan

  • Members
  • Pip
  • 144 posts
  • Gender:Male
  • Location:Southampton, England

Posted 10 March 2007 - 02:51 PM

Nood job B) Too bad you cant highlight the text you want then the BBCODE would add the tags before and after the highlighted text :(


I dunno if you said good or noob lol. Yea is a shame been wondering how thats done myself may have 2 crack out the old js book.

Arutha

Edited by Arutha, 10 March 2007 - 02:53 PM.


#6 nitr0x

nitr0x

    Young Padawan

  • Members
  • Pip
  • 201 posts

Posted 12 March 2007 - 08:45 AM

Well one thing you could do is when they click on one (such as Bold) then a text input dialog box comes up and asks them to enter in what they want in bold. Click ok, and it puts it on, click cancel nothing happens.

#7 CyrusWu

CyrusWu

    Young Padawan

  • Members
  • Pip
  • 28 posts
  • Gender:Male
  • Location:Niagara Falls, CA

Posted 05 May 2007 - 08:04 AM

What's wrong with Publishing? :lol:


I quite agree with that. I would do publishing. Publishing will be awesome. but shouldn't this be in javascript.

#8 Mr. Jay

Mr. Jay

    Young Padawan

  • Members
  • Pip
  • 81 posts

Posted 15 May 2007 - 12:00 PM

Got this off the SMF Source

<script language="JavaScript" type="text/javascript">
	function surroundText(text1, text2, textarea)
	{
		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);
		}
		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;
		}
		else
		{
			textarea.value += text1 + text2;
			textarea.focus(textarea.value.length - 1);
		}
	}
	function storeCaret(text)
	{
		if (typeof(text.createTextRange) != "undefined")
		text.caretPos = document.selection.createRange().duplicate();
	}
</script>
<form method="post" accept-charset="ISO-8859-1" name="postmodify" id="postmodify" onSubmit="submitonce(this);saveEntities();" enctype="multipart/form-data" style="margin: 0;" action="">
	<select name="select" style="margin-bottom: 1ex;" onChange="surroundText('[color=#39  thisoptionsthisselectedIndex].value.toLowerCase() + ']', '[/color]', document.forms.postmodify.message); this.selectedIndex = 0; document.forms.postmodify.message.focus(document.forms.postmodify.message.caretPos);">
		<option value="" selected="selected">Change Color</option>
		<option value="Black">Black</option>
		<option value="Red">Red</option>
		<option value="Yellow">Yellow</option>
		<option value="Pink">Pink</option>
		<option value="Green">Green</option>
		<option value="Orange">Orange</option>
		<option value="Purple">Purple</option>
		<option value="Blue">Blue</option>
		<option value="Beige">Beige</option>
		<option value="Brown">Brown</option>
		<option value="Teal">Teal</option>
		<option value="Navy">Navy</option>
		<option value="Maroon">Maroon</option>
		<option value="LimeGreen">Lime Green</option>
	</select>
	<input type="button" onClick="surroundText('[b]', '[/b]', document.forms.postmodify.message); this.selectedIndex = 0; document.forms.postmodify.message.focus(document.forms.postmodify.message.caretPos);" value="Bold" name="bold">
	<input type="button" onClick="surroundText('[url=http://',%20']', '[/url]', document.forms.postmodify.message); this.selectedIndex = 0; document.forms.postmodify.message.focus(document.forms.postmodify.message.caretPos);" value="Url" name="url">
	<textarea class="editor" name="message" rows="12" cols="60" onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyUp="storeCaret(this);" onChange="storeCaret(this);" tabindex="2"></textarea>
</form>

Edited by Mr. Jay, 15 May 2007 - 12:01 PM.


#9 killeredge

killeredge

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 31 August 2007 - 09:43 PM

Good job :D Too bad you cant highlight the text you want then the BBCODE would add the tags before and after the highlighted text B)


if you really search on pixel2life, you can find this easily. and i dont mean in the database... :) not to be a hacker, just finding resources...

#10 Stacey

Stacey

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 07 July 2009 - 03:20 AM

Very nice information, thanks for sharing the code!


master resale rights
-Stacey

Edited by Stacey, 19 July 2009 - 05:57 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users