Cómo hacer que una página sea editable en el navegador

Hay un modo especial y bastante secreto en los navegadores, llamado modo de diseño.

Hay un modo especial y bastante secreto en los navegadores, llamado modo de diseño .

Cuando configuras una página en modo de diseño, puedes editar el contenido de la página directamente dentro de la página del navegador, lo que es muy útil para probar algún prototipo o ver cómo se vería un nuevo título, por ejemplo.

¿Cómo se habilita? Abra la consola DevTools y escriba:

document.designMode = 'on'

Se puede obtener el mismo resultado al habilitar contentEditableel bodyelemento, de la siguiente manera:

document.body.contentEditable = true

Puede editar texto, eliminarlo y también arrastrar imágenes para reposicionarlas.

Puede desactivar el modo utilizando

document.designMode = 'off'

Esta función es compatible con casi todos los navegadores, incluido IE. Es bastante antigua, pero bastante desconocida.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase