Aprende a configurar o contido da páxina web como editable para os visitantes do sitio

Usando o atributo Contenteditable

Facer que o texto dun sitio web editable polos usuarios sexa máis sinxelo do que se podería esperar. HTML proporciona un atributo para este fin: contenteditable.

O atributo contenteditable foi introducido por primeira vez en 2014 co lanzamento de HTML5 . Especifica se o contido que rexee pode ser modificado por un visitante do sitio desde o navegador.

Apoio ao atributo Contenteditable

A maioría dos navegadores de escritorio modernos admiten o atributo.

Estes inclúen:

O mesmo serve para a maioría dos navegadores móbiles.

Como usar Contenteditable

Simplemente engada o atributo ao elemento HTML que quere facer editable. Ten tres valores posibles: verdadeiro, falso e herdar. Herdanza é o valor predeterminado, o que significa que o elemento toma o valor do seu pai. Do mesmo xeito, os elementos secundarios do teu contido novo editable tamén serán editables a menos que cambie os seus valores a falsos. Por exemplo, para facer editable un elemento DIV, use:

Crea unha lista de tarefas editables con Contenteditable

O contido editábel ten máis sentido cando se empareja con almacenamento local, polo que o contido persiste entre sesións e visitas ao sitio.

  1. Abra a páxina nun editor HTML.
  2. Crea unha lista con viñetas e non ordenadas que se chama myTasks :

    • Algunha tarefa
    • Outra tarefa
  1. Engade o atributo contenteditable ao elemento
      :
      Agora tes unha lista de tarefas que se pode editar, pero se pecha o navegador ou sae da páxina, a túa lista desaparecerá. A solución: engade un guión sinxelo para gardar as tarefas para localStorage.
    • Engade unha ligazón a jQuery no do teu documento.