Create a textarea where some text is in a different color

[amirkargerweb]

I want to do this:

<textarea>
perl
<font color="FF0000">
$thing_to_get=17;
</font>
More Perl code using $thing_to_get
</textarea>

But the above doesn't work, of course.

The idea is that I'm giving the users a bunch of text where they might
want to edit the red parts. Then I'll have a javascript button to
select all. A user modifies the variable, clicks on the "select all"
button, and then pastes the code into a Unix window (then presses
Ctrl-D to run the script).

I don't want a WYSIWYG editor, I don't even need the user to be able to
decide which text to make red. All I want is to be able to set a piece
of the textarea to be red in the firstplace.

Reading here & in various javascript script archives, it seems like I
need to do fancy IE/Mozilla-specific contentEditable stuff. Is there a
simpler way to handle it?

Thanks,

-Amir Karger

 

[fox]

I want to do this:

<textarea>
perl
<font color="FF0000">
$thing_to_get=17;
</font>
More Perl code using $thing_to_get
</textarea>

But the above doesn't work, of course.

The idea is that I'm giving the users a bunch of text where they might
want to edit the red parts. Then I'll have a javascript button to
select all. A user modifies the variable, clicks on the "select all"
button, and then pastes the code into a Unix window (then presses
Ctrl-D to run the script).

I don't want a WYSIWYG editor, I don't even need the user to be able to
decide which text to make red. All I want is to be able to set a piece
of the textarea to be red in the firstplace.

Reading here & in various javascript script archives, it seems like I
need to do fancy IE/Mozilla-specific contentEditable stuff. Is there a
simpler way to handle it?

One way (among many similar) is to simply:

This is <span id=sectionname class=hilite onclick =
"changeText(this)">editable</span> content.

script support:

function
changeText(e)
{


if(s = prompt("change text to:", e.innerHTML))
e.innerHTML = s;

// you do not want to allow an empty string
// or the item "disappears" (nothing to click on)
}

use styles to dress up the hilited text any way you want...e.g.:

..hilite {
cursor: pointer;
color: red;
}

just make sure each editable section has a unique id attribute and this
will fit just about anywhere (except inside textareas and other form
elements)... will work with any server-side support.

BTW, this makes the resultant document printable [ use @print to change
hilite to color: black (or whatever)].

[tested ie and firefox/mozilla]

fox...