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

Time spent in forums: 3 h 33 m 48 sec
Reputation Power: 7

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

Time spent in forums: 23 h 27 m 21 sec
Reputation Power: 6

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

Time spent in forums: 3 h 33 m 48 sec
Reputation Power: 7

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 19 h 32 m 47 sec
Reputation Power: 9

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

Time spent in forums: 3 h 33 m 48 sec
Reputation Power: 7

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 23rd Plane (16000 - 16499 posts)

Join Date: Jul 2004

Location: USA

Posts: 16,008

Time spent in forums: 3 Months 3 Weeks 6 Days 3 h 22 m 28 sec
Reputation Power: 1544

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.

Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

I'm looking for new clients.

June 15th, 2008, 04:19 PM

jannol

Registered User

Join Date: Feb 2004

Location: Sweden

Posts: 6

Time spent in forums: 4 h 33 m 12 sec
Reputation Power: 0

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

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

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