SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Using Buttons To Create Simple HTML In Text Area

    Hi,

    I am designing a news script for my website. (http://www.maccrazy.net). I want to create some buttons using Javascript to generate simple HTML in a text area, much like in phpBB and Invision Board. (see attached screen shots).

    I am not sure how to go about this. It does not have to be advanced. I simply want to be able to get a button to generate some HTML

    For example:

    By clicking on a bold button, the HTML <b> will appear in the text area.

    By clicking on a link button an alert appears asking for a URL, then a title for the link.

    I don't think this is hard to do, but as I have virtually no knowledge of JavaScript I am unsure how it can be done. I have looked for scripts which do this on the net but they are all to advanced and do too much for what I want to do.

    Any help would be greatly appreciated,

    Thanks
    Attached Images Attached Images

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    check out http://www.interactivetools.com/products/htmlarea/

    Its simple to install and use - i've got it on a couple of my sites at the moment

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    	<head>
    		<title>test</title>
    		<script>
    			<!--
    			function getURL() {
    				the_url = prompt("Enter the URL:", "http://");
    				the_text = prompt("Enter text to be displayed", "");
    				the_text = (the_text == "") ? the_url : the_text;//if no text was entered, the url will be used as the text
    				document.frm.txt.value += "{URL=" + the_url + "}" + the_text + "{/URL}";
    			}
    			-->
    		</script>
    	</head>
    	<body>
    	
    		<form name=frm method=post>
    			<textarea name=txt rows=6 cols=40>text text text</textarea>
    		</form>
    		
    		<a href=# onClick="document.frm.txt.value+=''{B} {/B};">Add Bold</a><br>
    		<a href=# onClick="getURL();">Add URL</a><br>
    	
    	</body>
    </html>
    You should be able to get the idea from this. The bold button will add the bold tags at the end of whatever text is in the textarea.
    The URL will use two prompts to get a URL and text to display for the URL. Then it will do the same thing the bold tag did and add the URL tags to the end of the textarea.
    NOTE: I used braces {} instead of brackets for the tags so they would show up here.
    Last edited by Vasudevelopa; Mar 28, 2003 at 09:44.

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for the replies

    Unfortunatly htmlArea only works with Windows. I will definatly try out the code Vasudevelopa posted as this looks like exactly what I need.

    Thanks again

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Vasudevelopa, I was just looking for this as well.

    Is there a way to manipulate the position of the cursor so it will be between the bold tags?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code is great but I think there is a small bug.

    The URL bit works fine but when I click the bold text, nothing happens.

    Thanks

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Fort Lauderdale
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, there is a typo. The line with the bold link should look like:

    <a href=# onClick="document.frm.txt.value+='{B} {/B}';">Add Bold</a><br>

    The {B} tags have to be inside the single quotes.

    www.unpossiblemedia.com - A Fort Lauderdale based multimedia company.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks this code is perfect....

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been working with the code and have run into one problem. Is it possible to have quote marks in code generated?

    <a href=http://www.maccrazy.net>maccrazy.net</a> is generated by the script. It will work in most browsers, though it is not totally correct HTML. I would rather have it out put <a href="http://www.maccrazy.net">maccrazy.net</a> but I can not figure out how to add quotes into the Javascript. Is there a way to tell the script that the quotes surrounding the URL are not part of the script?

    I change some of the output to suit my needs:
    http://www.maccrazy.net/iNews/trials/text2.php
    Last edited by maccrazy; Mar 31, 2003 at 01:40.

  10. #10
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't test this and am no great javascript specialist but I think this should work:
    Code:
    document.frm.txt.value += "<a href=\"" + the_url + "\">" + the_text + "</a>";
    If you want quotes to print out in a string which is contained withing the same type of quotes should be escaped with a backslash.

    This should work also I think:
    Code:
    document.frm.txt.value += '<a href="' + the_url + '>"' + the_text + '</a>';
    This uses single quotes to 'delimit' the javascript leaving the double quotes 'free' to be used within the strings.

    Haven't got the time right now to test this... try it and let us know if it worked .

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2002
    Location
    New Zealand
    Posts
    1,021
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked perfectly, Thanks

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made a javascript class for this

    http://www.peterbailey.net/dhtml/taeditor.htm

    It can easily be changed to generate HTML or anything else.

    Here's another demo

    http://www.lanwizards.com/test/taeditor.htm

    They both use the same codebase. I can help you get it up and running, if you like.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    SitePoint Guru siphilp's Avatar
    Join Date
    Nov 2001
    Location
    Fife, Scotland
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how would you go about creating a Redo/Undo button?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •