advise on designing a html editor

[topcoder1]

I need to create a editor where use inputs html, clicks save and then sees the content right away. My question is: is there any kind of caching mechansim I should use to reduce the trip to the server?
I think there are two ways for saving data: 1. I simply saves the input to the database everytime the user clicks on save and then load the data from the database to display it.
2. when user clicks on save, I take the input from client side and display it rightaway, then send the save request to server in the background. would this cause some problem?
which is the best way?
thanks!

[para]

If I were doing it I wouldn't even send it to the server.

I'd have a split layout (two panels).
On the left I'd have my form. The action on the form would simply write the contents to the body of the panel on the right.

If I have time I'll post some short code or something...


Does this help?

[topcoder1]

thanks But the input html needs to be stored permanently somehow so it has to be send to the server.


If I were doing it I wouldn't even send it to the server.

[para]

Here's something I just wrote. It can exist on a page with two DIVs, EL-1 and EL-2



var f = new Ext.form.Form();
f.add(new Ext.form.TextArea({name: 'htmlInput'}));
f.addButton('Send');
f.render('EL-1');
f.buttons[0].on('click', function(a,b,c,d) {
var text = f.getValues().htmlInput;
Ext.get('EL-2').update(text);
// You could make your server request here.
});


This displays your HTML sample immediately and then hits the server with a "save" or whatever. That way, there is no real downtime for the user.