Topic: Make DIV text editable (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11151" title="Pages that link to Topic: Make DIV text editable (Page 1 of 1)" rel="nofollow" >Topic: Make DIV text editable <span class="small">(Page 1 of 1)</span>\$

Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 02-19-2004 04:42 How do I turn the contents of a DIV tag into an editable region with CSS?
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-19-2004 05:37 You don't. You can use a server side language and an HTML form to accomplish this however. You can use Javascript if you don't need the changes to be saved. . .
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 02-19-2004 06:26 Hmmm... I was pretty sure there was a way to make the DIV element editable. Maybe it is a DHTML effect?
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 02-19-2004 06:27 If you don't mind the format of your content and don't want a WYSIWYG editor, you can simply pick the innerTEXT or innerHTML of your DIV and insert it in a textarea and send it back to the DIV when you're done. If you want a WYSIWYG thiny, with Mozilla, the answer is MIDAS ( see the specs ). With IE the answer is ContentEditable + execCommand ( see the infos about the contenteditable attribute and the execCommand Method and the list of the various Command Identifiers ) Hope that helps
DmS Paranoid (IV) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 02-19-2004 09:57 poi is absolutely right, here is an example of the IE MSHTML component/javascript thing. Take a look at this: code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>wysiwygtests</title> </head> <body> <form action="#" name="testEdit"> <div id="test" contenteditable="true"> test text here </div> <span id="controls" unselectable="on"> <a href="javascript:void(0);" onclick="document.execCommand('CreateLink')"> link</a> <a href="javascript:void(0);" onclick="document.execCommand('Bold')"> bold</a> </span> <br><br><input type="button" value="Show source" onclick="alert(document.getElementById('test').innerHTML);"> </form> </body> </html> The keys here are 3 things: 1 - the tag contenteditable="true" that makes that specific element editable. 2 - the tag unselectable="on" that makes sure that the focus isn't moved from the selected object to the control as you mainipulate it with the controls. 3 - To actually save your changes you need to send what I'm now alerting to a serverside script that either saves it in the db or writes it to a file. Ton's of referencematerial for the manipulation of the editable content can be found here: http://msdn.microsoft.com/library/default.asp?url=/workshop/browser/editing/mshtml editor.asp /Dan {cell 260} -{ a vibration is a movement that doesn't know which way to go }- [This message has been edited by DmS (edited 02-19-2004).]
Karl Bipolar (III) Inmate From: Phoenix Insane since: Jul 2001	posted 02-19-2004 15:33 Beautiful... thanks guys! I will surely put this to a test sometime today.
BgBluOcean Obsessive-Compulsive (I) Inmate From: SoCal Insane since: Oct 2004	posted 10-23-2004 01:10 Once the <div contenteditable> is filled in on the borwser, how is the content of the div saved on the back end? Does the content of the div have to be put into an <input> object and the form posted? thx No name calling
DmS Maniac (V) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 10-23-2004 14:34 Thats a perfectly reasonable thing to do, probably the easiest too /D {cell 260} {Blog} -{ ?Computer games don?t affect kids; I mean if Pac-Man affected us as kids, we?d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music.? (Kristian Wilson, Nintendo, Inc, 1989.) }-

Topic: Make DIV text editable (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11151" title="Pages that link to Topic: Make DIV text editable (Page 1 of 1)" rel="nofollow" >Topic: Make DIV text editable <span class="small">(Page 1 of 1)</span>\$

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 02-19-2004 04:42

How do I turn the contents of a DIV tag into an editable region with CSS?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-19-2004 05:37

You don't.

You can use a server side language and an HTML form to accomplish this however.

You can use Javascript if you don't need the changes to be saved. . .

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 02-19-2004 06:26

Hmmm... I was pretty sure there was a way to make the DIV element editable. Maybe it is a DHTML effect?

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 02-19-2004 06:27

If you don't mind the format of your content and don't want a WYSIWYG editor, you can simply pick the innerTEXT or innerHTML of your DIV and insert it in a textarea and send it back to the DIV when you're done.

If you want a WYSIWYG thiny, with Mozilla, the answer is MIDAS ( see the specs ). With IE the answer is ContentEditable + execCommand ( see the infos about the contenteditable attribute and the execCommand Method and the list of the various Command Identifiers )

Hope that helps

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 02-19-2004 09:57

poi is absolutely right, here is an example of the IE MSHTML component/javascript thing.
Take a look at this:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<html>

<head>

	<title>wysiwygtests</title>



</head>



<body>

<form action="#" name="testEdit">

<div id="test" contenteditable="true">

test text here

</div>

<span id="controls" unselectable="on">

<a href="javascript:void(0);" onclick="document.execCommand('CreateLink')"> link</a>

<a href="javascript:void(0);" onclick="document.execCommand('Bold')"> bold</a>

</span>

<br><br><input type="button" value="Show source" onclick="alert(document.getElementById('test').innerHTML);">

</form>





</body>

</html>

The keys here are 3 things:
1 - the tag contenteditable="true" that makes that specific element editable.
2 - the tag unselectable="on" that makes sure that the focus isn't moved from the selected object to the control as you mainipulate it with the controls.
3 - To actually save your changes you need to send what I'm now alerting to a serverside script that either saves it in the db or writes it to a file.

Ton's of referencematerial for the manipulation of the editable content can be found here: http://msdn.microsoft.com/library/default.asp?url=/workshop/browser/editing/mshtml editor.asp

/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

[This message has been edited by DmS (edited 02-19-2004).]

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted 02-19-2004 15:33

Beautiful... thanks guys! I will surely put this to a test sometime today.

BgBluOcean
Obsessive-Compulsive (I) Inmate

From: SoCal
Insane since: Oct 2004

posted 10-23-2004 01:10

Once the <div contenteditable> is filled in on the borwser, how is the content of the div saved on the back end? Does the content of the div have to be put into an <input> object and the form posted?

thx

No name calling

DmS
Maniac (V) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 10-23-2004 14:34

Thats a perfectly reasonable thing to do, probably the easiest too

/D

{cell 260} {Blog}
-{ ?Computer games don?t affect kids; I mean if Pac-Man affected us as kids, we?d all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music.? (Kristian Wilson, Nintendo, Inc, 1989.) }-

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Make DIV text editable (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: Make DIV text editable (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11151" title="Pages that link to Topic: Make DIV text editable (Page 1 of 1)" rel="nofollow" >Topic: Make DIV text editable <span class="small">(Page 1 of 1)</span>\$