Help - Search - Members - Calendar
Full Version: BBCODE Clickables
Pixel2Life Forum > Member Tutorials and Requests > Forum Tutorial Archives > PHP Tutorials
Braunson
Mar 2 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.

CODE
<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...
QUOTE
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.

CODE
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

QUOTE
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! victory.gif
. Adam .
Mar 2 2007, 07:12 PM
What's wrong with Publishing? bigwink.gif
nitr0x
Mar 3 2007, 06:48 PM
That's javascript mate bigwink.gif

document.addcomment.comment.value+='[php][/php]'

is javascript.
Braunson
Mar 4 2007, 12:40 AM
HAHA Rofl, Sorry bout that. Reported to be moved. rofl tongue.gif My bad.
Mr. Jay
Mar 7 2007, 02:01 AM
Good job smile.gif Too bad you cant highlight the text you want then the BBCODE would add the tags before and after the highlighted text sad.gif
Arutha
Mar 10 2007, 02:51 PM
QUOTE(Jonpopnycorn @ Mar 7 2007, 07:01 AM) *
Nood job smile.gif Too bad you cant highlight the text you want then the BBCODE would add the tags before and after the highlighted text sad.gif


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
nitr0x
Mar 12 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.
CyrusWu
May 5 2007, 08:04 AM
QUOTE(. Adam . @ Mar 2 2007, 08:12 PM) *
What's wrong with Publishing? bigwink.gif


I quite agree with that. I would do publishing. Publishing will be awesome. but shouldn't this be in javascript.
Mr. Jay
May 15 2007, 12:00 PM
Got this off the SMF Source

CODE
<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>
killeredge
Aug 31 2007, 09:43 PM
QUOTE(Jonpopnycorn @ Mar 7 2007, 03:01 AM) *
Good job smile.gif Too bad you cant highlight the text you want then the BBCODE would add the tags before and after the highlighted text sad.gif


if you really search on pixel2life, you can find this easily. and i dont mean in the database... closedeyes.gif not to be a hacker, just finding resources...
Stacey
Jul 7 2009, 03:20 AM
Very nice information, thanks for sharing the code!


master resale rights
-Stacey
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.