NorfiPC
NorfiPC » Informaciones » Convertir una página en editable

Como hacer que una página web sea editable usando Javascript

Códigos de Javascript para lograr que se pueda cambiar y modificar el texto o la estructura de una sección de una página, desde el navegador del usuario. Usar esta opción para ofrecer contenido interactivo y modificable para nuestros lectores. Ejemplos prácticos.
Como hacer que una página web sea editable usando Javascript Usando sencillas funciones de Javascript podemos lograr que un área de una página web sea editable, es decir que se pueda modificar el contenido cargado en el navegador por el usuario y hasta cambiar de lugar todos los elementos que la componen, como bloques de texto, encabezados, imágenes, etc.
Por supuesto esto no afecta en lo absoluto su contenido que está guardado en el servidor.
Esta funcionalidad solo afecta lo que vemos en el navegador, pero tiene multitud de usos prácticos y es usado en varias páginas de este sitio.
Su principal empleo es hacer las páginas más interactivas y atractivas al usuario.
Al final del artículo puede verse una de las muchas formas de usarlo.



Ejemplos de secciones editables en esta página


Esta sección de esta página es completamente editable. Compruébalo, elimina, cambia o transforma el texto que selecciones.
Al usar el botón "Terminar edición" cesa la propiedad anterior.


Esta otra sección será editable, pero solo si usamos el botón "Editar". Pruébalo.
Al usar el botón "Terminar edición" cesa la propiedad anterior.


En los dos casos para restablecer el contenido original es necesario refrescar la página.




¿Cómo hacer una zona de una página editable?


Para lograr que una sección de una página se convierta en editable, se usa la propiedad: "contentEditable" de la siguiente forma:
contentEditable = 'true'
Se puede usar con la propiedad: "designMode" que permite cambiar de orden y de lugar los elementos que forman una página.
Se usa: designMode='on'

¿Cómo usarlos?
Vamos por pasos.

1- Ante todo es necesario encerrar el contenido dentro de una etiqueta o contenedor DIV, no es nada difícil.
Por ejemplo:
<div>Esta sección será editable</div>

2- A continuación es necesario asignarle un identificador (ID) a dicho contenedor para diferenciarlo del resto del contenido, quedaría de la siguiente forma:
<div id='seccion1'>Esta sección será editable</div>

3- Ahora la función en Javascript:
Tenemos dos opciones hacer la sección editable manualmente usando un botón, un vínculo u otro evento o de forma automática al cargar la página.
Para el primer caso bastará:
<input type="button" value="Editar" onclick="editar()">
<script type="text/javascript">
function editar(){
document.getElementById('seccion1').contentEditable = 'true';
document.getElementById('seccion1').designMode='on';}
</script>

Para el segundo caso podemos usar el evento onload:
<script type="text/javascript">
function editar(){
document.getElementById('seccion1').contentEditable = 'true';
document.getElementById('seccion1').designMode='on';}
window.onload=function(){editar();}
</script>

4- Resultado final
Resumiendo, el código necesario para hacer una sección editable y activarla usando un botón, sería como el siguiente:
<div id='seccion1'>Esta sección será editable</div>

<input type="button" value="Editar" onclick="editar()">

<script type="text/javascript">
function editar(){
document.getElementById('seccion1').contentEditable = 'true';
document.getElementById('seccion1').designMode='on';}
</script>

Se mostrará en la página de la siguiente forma:
Esta sección será editable


Puedes usar CSS para darle un estilo diferente al botón, también emplear un bloque para activar la función o un vínculo.
Dentro del contenedor creado podemos incluir bloques de texto, imágenes o los objetos que necesitamos, incluso todo el contenido del área del cuerpo (body) de la página.
Usa tu imaginación y experimenta a tu gusto.
Espero que te sea útil y aplicar y llevar a la práctica esta opción en tus páginas o en tu blog.



Ejemplo práctico, una postal de felicitación editable


Fondo para crear postal


Muchas
Felicidades

Pedro



Bookmarket para hacer editable cualquier página web


En el navegador también podemos usar un Bookmarklet o marcador para poder editar relativamente cualquier página que carguemos.
Es muy útil para experimentar modificando la estructura de nuestras propias páginas.
Para usarlo arrastra el siguiente vínculo a la barra de marcadores de tu navegador web.
Editar página


Paginas relacionadas