Add tags to selected text in a textarea

Dev Shed Forums Sponsor:

December 8th, 2004, 12:57 PM

cleaner416

Contributing User

Join Date: Jul 2002

Posts: 56

Time spent in forums: 3 h 48 m 6 sec
Reputation Power: 10

Add tags to selected text in a textarea

I have a simple form like so:

PHP Code:


		
			
<form>

<input type="button" value="BOLD" />

<textarea rows="10" cols="30"></textarea>

<input type="submit" value="SUBMIT" />

</form>

I would like to create some javascript to do the following - when the user clicks the "BOLD" button, the selected text gets a "" and a "" wrapped around it. Sort of like formatting text on this forum. (For some reason I can't see the vBulletin JS that's accomplishing the similar task)

Thanks in advance!

December 8th, 2004, 01:12 PM

GoMo

Contributing User

Join Date: Nov 2003

Location: London, UK

Posts: 299

Time spent in forums: 1 Day 32 m 6 sec
Reputation Power: 9

here's some code i've created to do the job on some of my sites, i'm not sure it's the best way to do it, but it does the job

PHP Code:


		
			
<script type="text/javascript">

<!--

    function formatText (tag) {

        var selectedText = document.selection.createRange().text;

        

        if (selectedText != "") {

            var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";

            document.selection.createRange().text = newText;

        }

    }

//-->

</script>



<form name="my_form">

    <textarea name="my_textarea"></textarea><br />

    <input type="button" value="bold" onclick="formatText ('b');" />

    <input type="button" value="italic" onclick="formatText ('i');" />

    <input type="button" value="underline" onclick="formatText ('u');" />

</form>

goran

December 8th, 2004, 01:29 PM

cleaner416

Contributing User

Join Date: Jul 2002

Posts: 56

Time spent in forums: 3 h 48 m 6 sec
Reputation Power: 10

Thanks, Goran.

Unfortunately I could only get that code to work in IE. It fails in Firefox: 'document.selection' has no properties. I'll plug away a bit and see what I can come up with.

December 8th, 2004, 01:45 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 21 h 56 m 52 sec
Reputation Power: 12

For Mozilla and friends:

Code:

  function formatText(el,tagstart,tagend) {
  	if (el.setSelectionRange) {
 		el.value = el.value.substring(0,el.selectionStart) + tagstart + el.value.substring(el.selectionStart,el.selectionEnd) + tagend + el.value.substring(el.selectionEnd,el.value.length)
  	}
  	else {
  		// IE code here...
  	}
  }
  ..
  <input type="button" value="BOLD" onclick="formatText(document.getElementById('myta'),'<b>','</b>')"/>
  <textarea id="myta" rows="10" cols="30"></textarea>
  <input type="submit" value="SUBMIT" />
  </form>

Hope this helps,
Jeroen

December 8th, 2004, 03:36 PM

cleaner416

Contributing User

Join Date: Jul 2002

Posts: 56

Time spent in forums: 3 h 48 m 6 sec
Reputation Power: 10

Thanks - you rock.

Still doesn't work in Safari, but Google searches reveal that this is a limitation of Safarai (and Konqueror), which does not provide a programmatic way of inserting a cursor in a textarea.

July 5th, 2007, 06:00 PM

Shamail

Registered User

Join Date: Jul 2007

Posts: 1

Time spent in forums: 4 m 16 sec
Reputation Power: 0

BOLD doesn't appear as bold in textarea

I have been trying to look a wayaround to solve somewhat similar problem, but it seems like bold tag appears in coding and not word doesn't appear to be bold in the textarea. Please tell me does textarea does even support rich formatting??
is there any way around for this problem? how does all those web text editors work out there?

Quote:

Originally Posted by cleaner416

I have a simple form like so:

PHP Code:


		
			
<form>

<input type="button" value="BOLD" />

<textarea rows="10" cols="30"></textarea>

<input type="submit" value="SUBMIT" />

</form>

July 5th, 2007, 10:08 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 28th Plane (18500 - 18999 posts)

Join Date: Jul 2004

Location: USA

Posts: 18,935

Time spent in forums: 5 Months 1 Week 1 Day 1 h 13 m 17 sec
Reputation Power: 3731

You need a JavaScript script to do that. Check out these:

http://tinymce.moxiecode.com/
http://openwebware.com/products/openwysiwyg/
Xinha: The Community-built Open Source Online WYSIWYG HTML Editor
http://www.fckeditor.net/

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

June 15th, 2008, 04:19 PM

jannol

Registered User

Join Date: Feb 2004

Location: Sweden

Posts: 8

Time spent in forums: 8 h 5 m 15 sec
Reputation Power: 0

As of today, a year later after this post. The same code for mozilla browers does work in safari.

July 16th, 2009, 06:14 AM

SARIARAVIND

Registered User

Join Date: Jul 2009

Posts: 1

Time spent in forums: 6 m 10 sec
Reputation Power: 0

Yea, it may not be the right way.....but it really works.....great

Can u pls tell hw it can a bold text can be made to non-bold text.
Thanx

Quote:

Originally Posted by GoMo

here's some code i've created to do the job on some of my sites, i'm not sure it's the best way to do it, but it does the job

PHP Code:


		
			
<script type="text/javascript">

<!--

    function formatText (tag) {

        var selectedText = document.selection.createRange().text;

        

        if (selectedText != "") {

            var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";

            document.selection.createRange().text = newText;

        }

    }

//-->

</script>



<form name="my_form">

    <textarea name="my_textarea"></textarea><br />

    <input type="button" value="bold" onclick="formatText ('b');" />

    <input type="button" value="italic" onclick="formatText ('i');" />

    <input type="button" value="underline" onclick="formatText ('u');" />

</form>

goran

Add <b></b> tags to selected text in a textarea