Trying to wrap text within a text area with a tag

Max_Fancourt · January 10, 2011, 1:54pm

Hi everyone
This is part of a project I have been on for a little while and its quite close to working except for the bloody inevitable IE problem!!!
What this script does is wrap a selected bit of text within a text field with a tag eg:

  my text

once highlighted and the bold button clicked would change the highlighted text to

  <b>my text</b>

now my code works in all browsers except IE

So I have tried to use an alternative for IE but unfortunately the result is it’s just wrapping the text in a:

 <undefined>my text</undefined>

tag

I am at the end of my tether on this so I am asking… can anyone see where my problem is
here is my example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>select-test</title>
  <style type="text/css">
  <!-- 
  body { margin:0px; background-color:#fff; height:100% }
  html { height:100% }
  form { margin:0px }
  -->
  </style>
  <script type="text/javascript"> 
  function formatText(el,tagstart,tagend,tag) {
  	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 
  	{
  		//Bloody IE specific code !!!! whihc results in undefined//
  		var selectedText = document.selection.createRange().text;
  			if (selectedText != "") 
  			{
  			var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
  			document.selection.createRange().text = newText;
  		}
   	}
  }
  </script>
  
  </head>
  <body>
  <div id="PageDiv" style="position:relative; min-height:100%">
  
  	<form name="my_form"> 
  	  <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>
  </div>
  </body>
  </html>

this is only a test example to show the problem I am having… :o(
But the actual finished menu will be part of a new WebYep long-text menu … but as I said it still wont work in ie… yet… :o(

So if some one can see the blooming problem I will defiantly by them a mars bar… :o) or a chockie of there choice…

all the best max

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim3 · January 10, 2011, 2:24pm

Hi Max,
This looks like it will work in IE;
http://javascript.internet.com/page-details/highlighted-text.html
Regards,
Tim.

FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Max_Fancourt · January 10, 2011, 8:48pm

Hi Tim thanks for the link

I have finally go tit to work… blooming hell that was a nightmare… hooooray

I do have another question if anyone knows the answer

The actual real webyep menu appears when someone selects a peace of text in the webyep longtext edit window,
but what I really want to do is to combine a keydown too

So the menu wont appear unless you select the text and then press a key like the shift key.

Does anyone know any documentation that describes how that may be achieved…

cheers max

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 11, 2011, 3:43am

Wow, I looked at that code and it’s a testimony to your persistence
and grit that you got it to do something in all browsers. I have
another method that I used to do this on my dictionary lookup example: Lookup

Using that, you could do the following:

Observe the mouseup event on the page, and decide if the result was
a text selection, and erase all other selections while wrapping the
selection in a span or some other tag.
Observe the keypress event on the page, and decide if the key was
your modifier and if there was also a selection at the time.

To do the first, just follow the example of the dictionary lookup.
That wraps any selection of text (as long as it doesn’t span over two
paragraphs) with a span, and then inserts the dictionary lookup widget
and sets an observer for a click on that widget.

To figure out the second one put the following in a text file, view it
in your browser(s) and press your keys:

gist.github.com

https://gist.github.com/walterdavis/773948

gistfile1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6/prototype.js"></script>
  <script type="text/javascript" charset="utf-8">
  // <![CDATA[
  document.observe('dom:loaded',function(){
    document.observe('keypress', function(evt){

This file has been truncated. show original

This will show you the codes and the text you entered. The entire
keyboard does not seem to be open to all browsers – Safari seems to
ignore the arrow keys, although TextMate’s WebKit preview does show
them (albeit with wildly different numbers than other Mac browsers).
Test, and make sure your trigger character results in the same keycode
on a good range of browsers, keyboard layouts, and OSen.

Once you figure out what you want to use, then do this to capture the
keystroke without allowing it to erase the current selection inside
your textarea:

gist.github.com

https://gist.github.com/walterdavis/773978

gistfile1.js

var current_selection = false;
//somewhere in your selection code, set this to 
//true when you have marked a selection
// ...
current_selection = true;
var getKeyCode = function(evt){
  var code;
  if (evt.keyCode) code = evt.keyCode;
  else if (evt.which) code = evt.which;
  return parseInt(code,10);

This file has been truncated. show original

You’ll want to pay attention to the fact that you’ve created a modal
state here – while you are observing and canceling the space key you
cannot type any spaces and have them do anything.

Walter

On Jan 10, 2011, at 3:48 PM, max wrote:

Hi Tim thanks for the link

I have finally go tit to work… blooming hell that was a
nightmare… hooooray

I do have another question if anyone knows the answer

The actual real webyep menu appears when someone selects a peace of
text in the webyep longtext edit window,
but what I really want to do is to combine a keydown too

So the menu wont appear unless you select the text and then press a
key like the shift key.

Does anyone know any documentation that describes how that may be
achieved…

cheers max

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Max_Fancourt · January 11, 2011, 1:39pm

Hi walter and tim cheers for coming back

I will have a good delve with yours and Tims examples
again thanks for the examples
all the best and speak soon
max

actionsdev mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options