 |
Andrés Fernández |
 |
29/8/2008 |
 |
449 |
 |
0 |
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Firefox 3, entre sus muchas nuevas y poderosas características, ha sumado soporte para la propiedad contentEditable, que ya conocíamos de Explorer y otros navegadores.
Ya Ópera, Safari y Explorer soportaban esa funcionalidad, así que al sumarse Firefox, ya podemos crear con total tranquilidad dentro de nuestro sitio zonas completamente ditables. Asimismo, y para mantener la compatibilidad hacia atrás con Firefox 2 ó -, ofreceremos un camino alternativo en caso de que contentEditable falle. Este camino alternativo consiste en el reemplazo del elemento por un iframe con la propiedad designMode a on, que es la que normalmente se usa en los editores WYSIWYG que pululan por el mundo web, y que ya vimos en otra oportunidad.
El ejemplo es este, y este es el código utilizado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ejemplo</title>
<script>
window.onload=function(){
if(document.getElementById('pp').contentEditable){
//firefox 3, explorer, safari, ópera
document.getElementById('pp').contentEditable='true'
}else{//firefox 2
var ifr=document.createElement('iframe');
var old=document.getElementById('pp');
ifr.id='pp';
ifr.frameBorder='0';
ifr.height='20';
ifr.width='100%';
ifr.onload=function(){
var doc=ifr.contentWindow.document || ifr.contentDocument;
doc.body.innerHTML=old.innerHTML;
doc.documentElement.style.margin=doc.body.style.margin=0;
doc.designMode="on";
}
old.parentNode.replaceChild(ifr,old);
}
}
</script>
</head>
<body>
<div id="pp">Acá se puede escribir o modificar este texto.</div>
</body>
</html>
|
Creo que si mezclamos esto con AJAX, las posibilidades de mejorar la funcionalidad de gestores de contenido o CMS, por mencionar el primer uso que me viene a la mente, son excelentes. |
|
volver |
|
|
|
|
