BBcode editor: Javascript [Page 2 of 6]

Misc Links

Ads

Unlock your Iphone
Unlocking and Jailbreaking your iPhone isn't easy. We recommend Unlock iPhone 3G Software!

Latest Forum Topics

New Bathroom Fan I Bought
Posted by Red Squirrel
on Sep 06 2010, 9:08:47 pm

Duke Nukem Forever
Posted by Red Squirrel
on Sep 04 2010, 1:28:13 am

Dr. Santa Claus?
Posted by Red Squirrel
on Sep 04 2010, 5:12:17 pm

Vmware Shifts Pricing Strategy
Posted by Red Squirrel
on Sep 02 2010, 7:09:04 pm

Badass Chipmunk
Posted by Triple6_wild
on Sep 01 2010, 1:06:15 am

Send spam to: website@xeonlive.com nick@xeonlive.com georgiapeach1241@aol.com BBcode editor: Javascript
Client Side Scripting
By Jonathan Street

In this article I'm just going to look at how we can allow the user to submit content and how we can make it a bit easier for them to use bbCode. They'll be able to use bold, italic, underlining, add hyperlinks and images, add quote and code blocks and change the size and colour of their text. They'll even be able to add smilies with a click of their mouse. If they still don't understand what bbCode is all about? Well, we'll throw in some prompts whenever they move their mouse over one of the bbCode elements.

To bring all this together we'll need html, some css for the design and finally a healthy dose of javascript for the interactivity.

First of all, the basic html.

<html><head>
<title>Editor</title>
<script src="editor.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />


</head><body>
<form action="bbcode.php" method="post" name="editform" onsubmit="return checkForm(this)">
<table id="editform">
<tr>
        <td colspan="2" id="header">Post a new message</td>
</tr>

<tr id="subject">
        <td>Subject:</td>
        <td><input type="text" name="subject" size="50" class="form_elements_text"/></td>
</tr>
<tr>
        <td rowspan="2" id="smilies">Smilies
                <a href="javascript:smilie(':)')">
                        <img src="smilies/yellow/smile.gif" alt="smile" title="smile" /></a>
                <a href="javascript:smilie(':D')">
                        <img src="smilies/yellow/biggrin.gif" alt="big grin" title="big grin"/></a>
                <a href="javascript:smilie(':p')">
                        <img src="smilies/yellow/razz.gif" alt="razz" title="razz" /></a></td>
        <td>
                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onMouseOver="helpline('bold')" />
                <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onMouseOver="helpline('italic')" />
                <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onMouseOver="helpline('underline')" />
                <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onMouseOver="helpline('quote')" />
                <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', '[code]', 'code*', '[/code]', 'code', 'code');" onMouseOver="helpline('code')" />
                <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '[url]', 'url*', '[/url]', 'url', 'url');" onMouseOver="helpline('url')" />
                <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[img]', 'img*', '[/img]', 'img', 'img');" onMouseOver="helpline('img')" />
                <br />
                Font size: <select name="fontsize" onChange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;" onMouseOver="helpline('fontsize')" class="form_elements_dropdown">

                                <option value="50%" >Tiny</option>
                                <option value="75%" >Small</option>
                                <option value="100%" selected >Normal</option>
                                <option value="150%" >Large</option>
                                <option  value="200%" >Huge</option>
                        </select>


                Font color: <select name="fontcolor" onChange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onMouseOver="helpline('fontcolor')" class="form_elements_dropdown"  >
                                <option value="black" style="color:black">Black</option>
                                <option value="silver" style="color:silver">Silver</option>
                                <option value="gray" style="color:gray">Gray</option>
                                <option value="maroon" style="color:maroon">Maroon</option>
                                <option value="red" style="color:red">Red</option>                                                                                <option value="purple" style="color:purple">Purple</option>
                                <option value="fuchsia" style="color:fuchsia">Fuchsia</option>
                                <option value="navy" style="color:navy">Navy</option>
                                <option value="blue" style="color:blue">Blue</option>
                                <option value="aqua" style="color:aqua">Aqua</option>
                                <option value="teal" style="color:teal">Teal</option>
                                <option value="lime" style="color:lime">Lime</option>
                                <option value="green" style="color:green">Green</option>
                                <option value="olive" style="color:olive">Olive</option>
                                <option value="yellow" style="color:yellow">Yellow</option>
                                <option value="white" style="color:white">White</option>                                                </select>

                                <br />

                <input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/>
                </td>
</tr>
<tr>
                <td>
                Post:<br />
                <textarea rows="10" cols="50" name="post" class="form_elements_text"><textarea>
                </td>
</tr>
<tr>

                <td colspan="2" id="post">
                <input type="submit" name="Post" value="Post" class="button" />
                <input type="submit" name="preview" value="Preview" class="button"/>
                <input type="reset" value="Start over" class="button" onclick="javascript:confirm_reset();"/>
                </td>
</tr>
</table>
</form>


</body></html>

There's a lot going on here so on the next page I'll break all this down into chunks.

Next Page
spacer

54930 Hits

Pages: [1] [2] [3] [4] [5] [6]

29 Comments

Latest comments (newest first)

Posted by we_undertaker on May 05th 2008 (02:00)
i looke at http://www.iceteks.com/articles.php/javascript/1
i really like this text editor

but i dont know how to use it, cos i just new in PHP
could you please tell me how to use that with SQL , cos i want to have this text editor.

and in your html code :
<form action="bbcode.php" method="post" name="editform" onsubmit="return checkForm(this)">
i also dont know how to create bbcode.php , to run the form ...

please , please help me, i really need it
Thank you, Thank you so much
spacer

Posted by AdRock on August 08th 2007 (04:40)
I have followed the article and have noticed there are errors that I don't know how to fix.

I have used the exact code as provided in the article.

The first error I was able to fix which was a backslash in <textarea> which was missing but this is the main error.

When I type a word in the text area and I want to do some formatting such as bold or italic, th ewhole word is not highlighted with the start and end tags such as some words (supposed to be the [b] tags in there) but instead it just does some words[b].

One other question which is probably really stupid but is the second article the php file which is called when you preview what you have written?
spacer

Posted by Red Squirrel on August 08th 2007 (12:52)
Force be with you, always!
spacer

Posted by AltaGid on August 08th 2007 (13:01)
Hello! Help solve the problem.
Very often try to enter the forum, but says that the password is not correct.
Regrettably use of remembering. Give like to be?
Thank you!
spacer

Posted by sgreeny12 on April 04th 2007 (12:23)
Hey great tutorial. Really works except I have 1 question if you dont mind. I want to add an align right button similar to the one on devshed forms where the image is the classic microsoft alight right button. When I click on the bottom it automatically submits the script. Does anyone have any fixes? Thanks

I could make it into a smile but i wouldnt know how to have it give the close option. Can someone help me with that. Thanks

The first 3 work because they arnt images. The 4th which is the image doesnt work.
CODE
<input type="button" src="images/icons/justifyleft.gif" class="button" value="left" name="left" onclick="java-script tag('left', '[left]', 'left*', '[/left]', 'left', 'left');"

onMouseOver="helpline('left')" />
<input type="button" src="images/icons/justifycenter.gif" class="button" value="center" name="center" onclick="java-script tag('center', '[center]', 'center*',

'[/center]', 'center', 'center');" onMouseOver="helpline('center')" />
<input type="button" src="images/icons/justifyright.gif" class="button" value="right" name="right" onclick="java-script tag('right', '[right]', 'right*', '[/right]',

'right', 'right');" onMouseOver="helpline('right')" />

<input type="image" src="images/icons/justifyright.gif" class="button" value="right" name="right" onclick="java-script tag('right', '[right]', 'right*', '[/right]',

'right', 'right');" onMouseOver="helpline('right')" />

View all comments
Post comment

Top Articles	Latest Articles
- What are .bin files for? (592874 reads) - Big Brother and Ndisuio.sys (143128 reads) - PSP User's Guide (127762 reads) - Text searching in linux with grep (115253 reads) - SPFDisk (Special Fdisk) Partition Manager (101260 reads)	- Dynamic Forum Signatures (version 2) (4689 reads) - Successfully Hacking your iPhone or iTouch (14355 reads) - Ultima Online Newbie Guide (25094 reads) - BBcode editor: PHP - The sensible approach (17927 reads) - The Hitch Hikers guide to "the mouse" (15308 reads)