 |
Andrés Fernández |
 |
4/8/2008 |
 |
495 |
 |
0 |
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Una de las cosas más sobrevaloradas en javascript son los editores WYSIWYG. Es realmente bastante sencillo crearlos una vez que conocemos el mecanismo del método execCommand, introducido por Internet Explorer y adoptado (y hasta mejorado) por otros navegadores. La idea de este artículo no es explicar el funcionamiento (para eso hay ya páginas como esta, donde lo hacen de manera muy completa), sino mostrar el código y un ejemplo sencillo para que realmente veamos que no hay magia ni mucha complejidad práctica detrás de estas cosas.
Al mismo tiempo, señalar que no me gustan demasiado estos editores porque son bastante vulnerables a la inyección de código malicioso y además permiten que los usuarios peguen textos o tablas desde editores como word o excel con todas las consecuencias nefastas que eso puede acarrear (en partes dinámicas de diseños cuidadosamente elaborados he encontrado tablas excel con tipografía Comic rosada a tamaño gigante, por ejemplo, gracias al mal uso de esta herramienta).
Bueno, aquí el ejemplo (probado en Explorer, Ópera, Safari y Firefox) y a continuación 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></title>
<style>
input{
border:1px solid #000;
background:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-bottom:3px;
}
</style>
<script>
var editor;
function $(id){
return document.getElementById(id);
}
function formato(f){
editor.execCommand(f, false, null);
}
function rev(t) {
return t.split("<").join("<").split(">").join(">").split('"').join(""");
}
function insertarEnlace(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("CreateLink",false,u);
}
function insertarImagen(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("InsertImage",false,u);
}
function color(c){
editor.execCommand("forecolor",false,c);
}
function colorFondo(c){
var h=window.ActiveXObject?'backcolor':'hilitecolor';
editor.execCommand(h,false,c);
}
function inHTML(){
var u,u2;
if(!(u=prompt('ingresar html')))return;
try{
editor.execCommand("inserthtml",false,u);
}catch(e){
try{
u2=editor.selection.createRange();
u2.pasteHTML(u);
}catch(E){
alert('nop');
}
}
}
function htmlOEditor(e){
e=e || window.event;
ob=e.target || e.srcElement
$('edit').style.display=(ob.value=='html')?'none':'block';
$('ht').style.display=(ob.value!='html')?'none':'block';
$('ht').innerHTML=rev(editor.body.innerHTML);
ob.value=(ob.value=='html')?'editor':'html';
}
window.onload=function(){
editor=$('edit').contentDocument || $('edit').contentWindow.document;
editor.designMode='on';
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="button" name="Submit" value="N" onclick="formato('bold')" />
<input type="button" name="Submit2" value="C" onclick="formato('italic')" />
<input type="button" name="Submit3" value="S" onclick="formato('underline')" />
<input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" />
<input type="button" name="Submit5" value="link" onclick="insertarEnlace()" />
<input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" />
<input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" />
<input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" />
<input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" />
<input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" />
<input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" />
<input type="button" name="Submit12" value="insertar html" onclick="inHTML()" />
<br />
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe>
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div>
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" /></div>
</form>
</body>
</html>
|
Si veo que esto despierta algún interés, en un futuro mostraré cómo agregar (también de manera sencilla) un fileManager que permita el upload de imágenes y un browse para mostrarlas y/o seleccionarlas  .
|
|
volver |
|
|
|
|
