|
BBcode editor: Javascript
Client Side Scripting
By Jonathan Street
Congratulations! We've just created a bbcode editor with a fairly advanced functionality. The user can, at the click of their mouse, create text in bold, italic, underlined, different colors and sizes and even post hyperlinks to urls and add images and smilies. For most purposes this is likely to be more than sufficient but there is still room to add some functionality. As well as the points I've already mentioned you may want to consider introducing a 'guided' mode as seen in the wonderful forums on this site (Plug, plug!). The above method assumes a little knowledge of bbcode, not much, but a little. A guided mode may be useful for your users if they are new to the internet and have never come across bbcode before.
This editor should make it really simple for your users to use bbcode on your site but unless you actually support bbcode there is no point allowing them to post with bbcode. My next article will look at how you can turn bbcode into html ready to display on your site.
| 15295 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
|
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?
|
Posted by Red Squirrel on August 08th 2007 (13:52)
Force be with you, always!
|
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!
|
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')" /> |
|
|
|
