Cómo hacer que el contenido de un elemento se pueda editar con JavaScript (o jQuery)

¿Cómo podría hacerlo para que el contenido de un elemento se pueda editar mediante JavaScript nativo (DOM) y / o jQuery?

Solución para activar / desactivar editable con un manejador de clics:

$('button').click(function(){ var $div=$('div'), isEditable=$div.is('.editable'); $div.prop('contenteditable',!isEditable).toggleClass('editable') }) 

MANIFESTACIÓN

Javascript:

 document.getElementById('IdOfElement').contentEditable='true'; 

Mira este ejemplo que he creado: http://jsfiddle.net/K6W7J/

JS:

 $('button').click(function(){ $('div').attr('contenteditable','true'); }) 

HTML:

  
YOUR CONTENT

Si usa jQuery para agregar el atributo al elemento, debería poder cambiar entre el modo de edición y el modo HTML “normal”. El atributo contenteditable es compatible con todos los principales navegadores. Consulte http://blog.whatwg.org/the-road-to-html-5-contenteditable para obtener más información.

O puede usar este complemento que he estado sin problemas en cualquier momento. es realmente simple y fácil de usar.

Aquí un ejemplo:

Html:

   

JS

  $('#username').editable({ type: 'text', url: '/post', pk: 1, title: 'Enter username', ajaxOptions: { type: 'put' } }); 

MANIFESTACIÓN