Tornar o conteúdo da página da Web editável pelos visitantes do site

Tornar o texto em um site editável pelos usuários é mais fácil do que você poderia esperar. HTML fornece um atributo para essa finalidade: contenteditable.

o contenteditable atributo foi introduzido pela primeira vez em 2014 com o lançamento do HTML5. Especifica se o conteúdo que ele rege pode ser alterado por um visitante do site a partir do navegador.

Suporte para o atributo Contenteditable

A maioria dos navegadores de desktop modernos suporta o atributo. Esses incluem:

Chrome 4.0 e superior
Internet Explorer 6 e superior
Firefox 3.5 e superior
Safari 3.1 e superior
Ópera 10.1 e superior
Microsoft borda

O mesmo vale para a maioria dos navegadores móveis.

Como usar o Contenteditable

Basta adicionar o atributo ao elemento HTML que você deseja tornar editável. Tem três valores possíveis:verdade, falso e herdar. Herdar é o valor padrão, o que significa que o elemento assume o valor de seu pai. Da mesma forma, qualquer elemento filho de seu conteúdo recém-editado também será editável, a menos que você altere seus valores para falso. Por exemplo, para fazer uma DIV elemento editável, use:

Criar uma lista de tarefas editável com Contenteditable

O conteúdo editável faz mais sentido quando você o emparelha com o armazenamento local, portanto, o conteúdo persiste entre as sessões e as visitas ao site.

Abra sua página em um editor de HTML.
Criar uma lista com marcadores e desordenada chamada minhas tarefas: Alguma tarefa Outra tarefa


Adicione ocontenteditable atributo para o

 elemento: 

 Agora você tem uma lista de tarefas editáveis, mas se você fechar o navegador ou sair da página, sua lista desaparecerá. A solução: Adicione um script simples para salvar as tarefas no localStorage.


Adicione um link para jQuery no 
 do seu documento.  Este exemplo usa o CDN do Google, mas você pode hospedá-lo sozinho ou usar outro CDN, se preferir.


Na parte inferior da sua página, logo acima da tag, adicione seu script:  Este é o começo do jQuery document.ready função e informa ao navegador para carregar este script após o documento ter sido totalmente carregado.


Dentro de document.ready função, adicione o seu script para carregar as tarefas em localStorage e obter todas as tarefas que foram salvas lá anteriormente: $ (document.ready (function () {

 $ ("# myTasks"). blur (function () {// quando o cursor deixa o elemento #myTasks 
 
 
 localStorage.setItem ('myTasksData', this.innerHTML); // salvar em localStorage
  
 
 });
  
 
 if (localStorage.getItem ('myTasksData')) {// se houver conteúdo no localStorage
  
 
 $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // colocar conteúdo na página
  
 
 }
  });

O HTML para toda a página é assim:

Minhas tarefas

`Minhas tarefas`



Insira itens para sua lista. O navegador irá armazená-lo para você, de modo que quando você reabrir seu navegador, ele ainda estará aqui.


Alguma tarefa

Outra tarefa