BBcode editor: Javascript [Page 4 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

The basic form is now laid out but it looks dreadful!

Editor without any css statements

The end result however looks like this . . .

Editor with css statements and in all its glory

I've gone with grey tones but there is absolutely no reason why you can't go with bright pink. Well, apart from good taste, absolutely no reason why not.

Anyway, on with the css.

/*Formatting for the buttons*/

.button {
        background-color : #D7D7D7;
        color : #000000;
        font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
        margin-bottom:3px;
        margin-left:1px; margin-right:1px;
        margin-top:2px
}
/*Blends the helpbox into the background of the page*/
.helpbox {border-style:none;
                background-color:#CCC;
                margin:5px;
}

/*Sets the properties of the editform table cells*/
table#editform {border-width:1px;
                border-style:solid;
                background-color:#CCC;
                width:400px;
}

table#editform > tr,td {border-width:1px;
                border-style:solid;
}

td#header {border-style:none;
                text-align:center;
}

td#smilies {text-align:center;
                vertical-align:top;
                padding: 10px;
}

td#post {text-align:center;
}

/*Background color for the subject line and post area*/
.form_elements_text {background-color:#D7D7D7
}

/*Background color for the dropdown menus*/
.form_elements_dropdown {background-color:#D7D7D7
}

img {border-style:none}

I'm not going to comment on this very much. There are notes in the code to explain what most things do. The buttons are given a few style rules to move away from the standard buttons everyone is familiar with. The helpbox is blended into the background by matching the colour and removing the border.

When it's all put together it just looks better.

All that is left now is the javascript . . .

15296 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? (28283 reads) - Text searching in linux with grep (22864 reads) - SPFDisk (Special Fdisk) Partition Manager (17120 reads) - Creating your own content management system with php (16869 reads) - PSP User's Guide (16611 reads)	- How to Use MDADM Linux Raid (14868 reads) - What is Cloud Computing? (14903 reads) - Dynamic Forum Signatures (version 2) (15270 reads) - Successfully Hacking your iPhone or iTouch (15974 reads) - Ultima Online Newbie Guide (16426 reads)