How can I make a DIV editable like a form textarea?


I’m not new here, I used to be registered under the alias “Tikondra” but recently created a new account to reflect my current alias.

My question is as follows -

How can I make a normal DIV editable on the fly? You may have guessed why i want to do this, yes thats right, i want to add another WYSIWYG editor to the pile. The reason i don’t want to download someone elses code and be done with it is because i want to learn and understand how to do something like this.

I don’t need to be told how to do all the functions to convert text into bold using a button, i know all that. All i need help with is what to do to a DIV so when you click on it you are able to edit the text inside of it and all formatting is shown instantly.

Any ideas, i’m stumped?


you’d have to either have two div’s, one containing the formatted text in static mode, and another with a textarea (WYSIWYG editor) in.

Then when you double click, you could switch between the two, make your changes and then get the new content from the textarea.

Or swap the content of the div with a textarea and then back again. Which is possibly easier.

Here’s an example of a similar function: xEditable.

Requires a little work to get formatting etc working, and multiple items, but you can get the idea from this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">


function switchToEdit(which)
{ = 'none';
	var editter = document.getElementById('Container_Edittable');
	editter.firstChild.value = which.innerHTML; = 'block';
function switchBack(save)
	var viewer = document.getElementById('Container_Text');
	var editter = document.getElementById('Container_Edittable');

		viewer.innerHTML = editter.firstChild.value; = 'none'; = 'block';




<div id="Container" style="width: 200px; height: 100px;">

	<div id="Container_Text" ondblclick="switchToEdit(this);">This is a test</div>
	<div id="Container_Edittable" style="display: none;"><textarea style="width: 100%; height: 100%;"></textarea><br /><input type="button" value="save" onclick="switchBack(true);" /><input type="button" value="cancel" onclick="switchBack(false);" /></div>



gRoberts - nice technique. Thats similar to an idea i was using before with a text area and a DIV. Whenever data was entered into the textarea it appeared formatted in the DIV on the fly. The problem with this and your method is the user has to click and go that one extra step just to see the formatting.

My users are going to have very basic knowledge of the internet and will have used software like MS Word before so ideally i want one area (DIV?) that the user enters their text into and can select and click say the Bold button and then the selected text is updated inside that same window.

I had a wierd idea, unsure on the posibility factor though. Is it possible to create a text box that is effectively invisible/transparent to the user - but still usable. That way i could position it directly on top of a DIV (which is visible) of which is being updated on the fly with data from the textbox (which can’t be seen)?

MikeFoster - I’m having a little look at your stuff, couldn’t find a demo for xEditable so i’ve download it to delve more.

I presume you want something like the Quick Reply found here.

I’d say I could build something like this but it would take some time and research.

You could possibly have a look around at some free forums that embrase this feature and borrow the code.

	<div id="controlbar">
	<table cellpadding="0" cellspacing="0" border="0">
		<td><div class="imagebutton" id="cmd_removeformat"><img src="images/editor/removeformat.gif" alt="Remove Text Formatting" width="21" height="20" /></div></td>
		<td><img src="images/editor/separator.gif" alt="" width="6" height="20" /></td>
			<td><div class="imagebutton" id="cmd_bold"><img src="images/editor/bold.gif" alt="Bold" width="21" height="20" /></div></td>
			<td><div class="imagebutton" id="cmd_italic"><img src="images/editor/italic.gif" alt="Italic" width="21" height="20" /></div></td>

			<td><div class="imagebutton" id="cmd_underline"><img src="images/editor/underline.gif" alt="Underline" width="21" height="20" /></div></td>
			<td><img src="images/editor/separator.gif" alt="" width="6" height="20" /></td>
		<td><div class="imagebutton" id="cmd_wrap0_quote"><img src="images/editor/quote.gif" alt="Wrap [QUOTE] tags around selected text" width="21" height="20" /></div></td>
	<div class="controlbar">
			<iframe id="htmlbox" style="width:600px; height:100px" tabindex="1"></iframe>

		<input type="hidden" name="message" id="qr_message" value="" />
		<input type="hidden" name="WYSIWYG_HTML" value="" />
	<script type="text/javascript" src="clientscript/vbulletin_editor.js"></script>
	<script type="text/javascript" src="clientscript/vbulletin_wysiwyg.js"></script>
	<script type="text/javascript" src="clientscript/vbulletin_moziwyg.js"></script>

Sorry Sitepoint bosses, but here is the code for the quick reply, obviously you’ll need to play about with it, and look at the three js files.

Sorry I couldn’t of been any further help.

It never even twigged that the quick reply feature i’ve always been using was exactly what i required!

Well at least i have somewhere to start my research from now. Thanks for the help - i’ve been battling with this problem for over a day now and this is the furthest i’ve got.

I tried out my transparent textbox idea, it worked like a dream but as soon as you enter something like <b>text here</b> it goes out of sync with the div underneath. Heres a screenshot with the textbox at 50% opacity to show you what i mean.

In the textbox i’ve entered “Blah blah blah blaha<b>test</b>” and the DIV is showing “Blah blah blah blahatest” (with the test in Bold)

Any comments? It’s an interesting take on the idea and it’d work great if only i can work out how to ‘hide’ the tags in the text area so it stays in sync with the DIV