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 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 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 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 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 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 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 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 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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu