Hacer que el contenido de la página web sea editable por los visitantes del sitio

Hacer el texto en un sitio web editable por los usuarios es más fácil de lo que cabría esperar. HTML proporciona un atributo para este propósito: contenteditable.

los contenteditable atributo fue introducido por primera vez en 2014 con el lanzamiento de HTML5. Especifica si el contenido que gobierna puede ser cambiado por un visitante del sitio desde el navegador.

Soporte para el atributo contenteditable

La mayoría de los navegadores de escritorio modernos admiten el atributo. Éstos incluyen:

• Chrome 4.0 y superior
• Internet Explorer 6 y hasta
• Firefox 3.5 y hasta
• Safari 3.1 y hasta
• Opera 10.1 y hasta
• Microsoft Edge

Lo mismo ocurre con la mayoría de los navegadores móviles, también.

Cómo usar Contenteditable

Simplemente agregue el atributo al elemento HTML que desea hacer editable. Tiene tres valores posibles:cierto, falso y heredar. Heredar es el valor predeterminado, lo que significa que el elemento toma el valor de su padre. Del mismo modo, cualquier elemento secundario de su nuevo contenido editable también será editable a menos que cambie sus valores a falso. Por ejemplo, para hacer una Div Elemento editable, uso:

Crear una lista de tareas editable con Contenteditable

El contenido editable tiene más sentido cuando lo empareja con el almacenamiento local, por lo que el contenido persiste entre las sesiones y las visitas al sitio.

1. Abra su página en un editor de HTML.
2. Crear una lista con viñetas, sin orden llamada mis tareas:
   2. Alguna tarea
   4. Otra tarea
5. Añade elcontenteditable atribuir a la
   elemento:
   Ahora tiene una lista de tareas que es editable, pero si cierra su navegador o abandona la página, su lista desaparecerá. La solución: agregue un script simple para guardar las tareas en localStorage.
8. Agrega un enlace a jQuery en el de su documento. Este ejemplo utiliza el CDN de Google, pero puede hospedarlo usted mismo o usar otro CDN si lo prefiere.
11. En la parte inferior de su página, justo encima de la etiqueta, agregue su script: Este es el comienzo de la jQuery. document.ready Funciona y le dice al navegador que cargue este script después de que el documento se haya cargado completamente.

Dentro de document.ready función, agregue su script para cargar las tareas en localStorage y obtenga las tareas que se guardaron allí anteriormente: $ (document.ready (function () {

1. $ ("# myTasks"). blur (function () {// cuando el cursor abandona el elemento #myTasks
4. localStorage.setItem ('myTasksData', this.innerHTML); // guardar en localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) {// si hay contenido en el localStorage
13. $ ("# myTasks"). html (localStorage.getItem ('myTasksData')); // poner contenido en la página
16. }
17. });

El HTML para toda la página se ve así:

Mis tareas

Introduzca los artículos para su lista. El navegador lo almacenará para usted, de modo que cuando vuelva a abrir su navegador, todavía estará aquí.

• Alguna tarea
• Otra tarea