Informaciones » Convertir una página en editable
Como hacer que una página web sea editable usando Javascript k4372
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 . Usar esta opción para ofrecer contenido interactivo y modificable para nuestros lectores. Ejemplos prácticos.
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 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 .
Al final del artículo puede verse una de las muchas formas de usarlo.
Ejemplos de secciones editables en esta página 527314
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.
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.
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? 2x1z5p
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>
<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>
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>
<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 3l5v39
Muchas
Felicidades
Pedro
Bookmarket para hacer editable cualquier página web 566e2d
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.
Paginas relacionadas b3238
✓ Qué es el lenguaje Javascript, introducción y usos prácticos
✓ Como escribir con Javascript texto y otros elementos en páginas web
✓ Como crear Bookmarklets con Javascript para usar en el navegador we.
✓ Como cambiar y modificar el estilo CSS de las páginas web con Javascript
✓ Como escribir con Javascript vínculos e iframes en las páginas web
✓ Trucos y efectos de Javascript para usar en páginas web y blogs
✓ Como escribir con Javascript texto y otros elementos en páginas web
✓ Como crear Bookmarklets con Javascript para usar en el navegador we.
✓ Como cambiar y modificar el estilo CSS de las páginas web con Javascript
✓ Como escribir con Javascript vínculos e iframes en las páginas web
✓ Trucos y efectos de Javascript para usar en páginas web y blogs