BBcode editor: Javascript [Page 3 of 6]

Misc Links

Ads

Age of Valor - Ultima Online Free Shard
AoS/SE/ML/Custom - advanced code, dedicated staff, peerless bosses, non overpowered customs + much much more

Latest Forum Topics

Possibly shutting down forum in near future
Posted by Red Squirrel
on Jan 21 2012, 5:19:43 pm

How to solve "ZoneMinder Console - Stopped"
Posted by Red Squirrel
on Jan 14 2012, 12:28:31 am

had fun on last day of 2011
Posted by rovingcowboy
on Jan 01 2012, 5:30:47 pm

Merry Christmas!
Posted by rovingcowboy
on Jan 01 2012, 5:11:32 pm

How to solve SMF directory not writable
Posted by Red Squirrel
on Oct 15 2011, 12:03:38 am

BBcode editor: Javascript
Client Side Scripting
By Jonathan Street

Ok, lets sort through all that html.

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

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

</head><body>

The start is straightforward, the only two interesting parts to this section are the references to an external style sheet and an external javascript file. I'll look at those later.

<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>

This is the start of our form and also the opening of the table that will organise it. When the form is submitted the data is being sent by the post method to the file bbcode.php. Before the form is sent though a javascript function, checkForm, is run. I'll be discussing that later on. The first thing requested from the user is a subject. The class exists so that all the text areas can be formatted later on with css.

<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>

We're now getting into some of the functionality of this editor. As you may be able to guess we're adding smilies to our users post. Again a javascript function is called, smilie, clicking on a smilie will automatically append the relevant code onto the end of the document.

I'm storing these smilies at the bottom of some folders but you can of course store them anywhere. If you want some sample smilies then right-click and go to 'save image as' on the smilies below.

smile

                <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 />

This is busy! Essentially though it's just the same thing repeated several times with different variables.

                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onMouseOver="helpline('bold')" />

Clicking this button passes variables for the bold tags to the tag function. The same is repeated for all the other tags. Again we assign a class to aid design later on and the helpline is present for the first time. Again I'll go into this function in depth when I come to the javascript file.

                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>

Here we have the options for text color and size. A new function, font, appears. For font color the options listed will appear in their actual colors thanks to the local style attributes. The 16 pre-defined colors are given as options.

Quite often text size is given as absolute values, 12px for example. I've slowly come to the conclusion that relative values are better and these are what I've used here. I currently use the firefox browser and if I visit a website where the text is too small (as it frequently is in the early hours of the morning) all I need to do is click Ctrl and + and it will increase in size. Simple. It's not so simple in Internet Explorer however where the default setup means you need to go to a menu option to increase the text size and even then it will only work with relative text sizes. Hence why I decided from now on only to use relative text sizes.

                <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">l</textarea>
                </td>
</tr>

We have two things going on here. We're creating the line where the helpline function will display its output, namely helpbox. It's readonly so the user can't type into the box but it doesn't prevent the javascript doing its thing. We'll also later disguise it so the user wont even realise it's an input box.

There is also the main area where the user will add their content. It's a simple textarea.

<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>

This is the end of the form. There are three buttons here. The user can post their message straight away, preview their post or start over. For start over a javascript function is called. It simply gives the user a second chance before the form is actually wiped.

That's it for the html. Now lets give it a bit of style with css.

15335 Hits

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

29 Comments

Latest comments (newest first)

Posted by we_undertaker on May 05th 2008 (03: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 (05: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 (13:52)
Force be with you, always!
spacer

Posted by AltaGid on August 08th 2007 (14: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 (13: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? (28822 reads) - Text searching in linux with grep (23231 reads) - SPFDisk (Special Fdisk) Partition Manager (17212 reads) - Creating your own content management system with php (16969 reads) - PSP User's Guide (16676 reads)	- How to Use MDADM Linux Raid (14889 reads) - What is Cloud Computing? (14916 reads) - Dynamic Forum Signatures (version 2) (15279 reads) - Successfully Hacking your iPhone or iTouch (16057 reads) - Ultima Online Newbie Guide (16499 reads)