Question

I want my users to be able to edit text on their page (not all) without showing them a form. At the same time, I do not want it to be to an editable, because there are too many of them and is not usable. The best would be something like google docs, where the user can read his text and seamlessly update it, without any hassle.

Does anyone know of a jquery plugin that can do this? If you think I should just use one of the rich text editors at each location, please tell me so.

On the same note, I have seen a couple of sites which allow users to edit content in divs without changing the element. Can anyone tell me how its done?

Answer 1

The sites I’ve seen that let you edit the contents of a div do so by adding a click event to the div which removes the contents of the div and adds an editable and a button to the div.

When the user clicks the new button, the editable and button are hidden and whatever is in the editable is used as the new content of the div. Often, there is an AJAX call to take some action on the back-end as well.

Also, the button may be replaced with an event handler on the editable which takes action on Enter or Esc.

Note that content-editable is HTML5, so it won’t work in all browsers, yet.

EDIT

It turns out content-editable is pretty well supported (http://blog.whatwg.org/the-road-to-html-5-contenteditable), but still may not be what you want.