Пользователь меняет текст в блоке div
 

Здравствуте, кто знает как сделать так чтобы пользователь мог в определенном div поменять текс на свой. Например кликнув два раза на div появляеться возможность напечатоть свой текст.

есть такои блок

<div id="element-1"><div class="delete"></div><p>Текст текст текст текст текст</p></div>

пишу такой скрипт

//показываем крестик при клике на элемент
    $(".newElement").on('click', function(){
        $(this).find('.delete').fadeIn(100);
        });

          //прячим крестик при уводе мыши  
        $(".newElement").hover (function(){
            $(this).find('.delete').fadeOut(3000);
            }); 
            //удаляем элемент кликнув по крестику
        $('.newElement').on('click','.delete', function(){ $(this).parent().remove();

})  
var text = 'слова'
$('#element-1 ').on('click', function(){ $(this).text(text);

})

понимаю что не правельно.

Надо чтоб при двоином клике у пользователя была возможность в переменную text написать свой текст, а в div element-1 он изменился. И надо чтоб цвет текста пользователь задовал. Возможноли такое?

Зарание все спасибо

По двойному клику втыкаешь <textarea>, потом удаляешь.

<div id="element-1" class="change_off"><div class="delete"></div><p>Текст текст текст текст текст</p></div>

$(function(){
    $(document).on('dblclick', 'div.change_off',function(){
        $(this).find('p').html( $('<textarea />').text( $(this).text() ) )
        $(this).removeClass('change_off').addClass('change_on')

        $('div.change_on textarea').on('change',function(){
            $(this).closest('.change_on').removeClass('change_on').addClass('change_off')
            $(this).parent().html( $(this).val() )
            $(this).unbind('change');
        })
    })
})

Точто надо:dance: Огромное спасибо Вам:)