Как сделать содержимое элемента редактируемым с помощью JavaScript (или jQuery)

Ответ 1

Решение по переключению редактируемого вкл/выкл с помощью обработчика кликов:

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

DEMO

Ответ 2

JavaScript:

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

Ответ 3

Посмотрите на этот пример, который я сделал: http://jsfiddle.net/K6W7J/

JS:

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

HTML:

<button>CLICK</button>
<div>YOUR CONTENT</div>

Ответ 4

Или вы можете использовать этот плагин, с которым я был без проблем в любое время. это действительно просто и проста в использовании.

Вот пример:

Html:

 <div style="margin: 150px">
    <a href="#" id="username">awesome</a>
</div>

JS

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

DEMO

Ответ 5

Если вы используете jQuery для добавления атрибута к элементу, вы можете переключаться между режимом редактирования и "нормальным" режимом HTML. Атрибут contenteditable поддерживается всеми основными браузерами. Подробнее см. http://blog.whatwg.org/the-road-to-html-5-contenteditable.