Foros del Web - Ver Mensaje Individual

maycolalvarez · #2 (**permalink**) 13/06/2010, 15:07

aparte de que lo que haces no es un verdadero WYSIWYG (ya que estos como el FCK usa un iframe oculto), tienes muchos errores en el código, debes decidir si vas ha usar comillas dobles o simples para el HTML si no confundes el interprete, además estas haciendo referencia a objetos antes de que el DOM se carge, y aún más tienes id con el mismo nombre de las funciones.

he mejorado el código, aún así no veo que realice algo ¿?:

Código HTML:

Ver original<!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>Editor WYSIWYG</title>
  <script type="text/javascript">
        var color ;
        var colorAct ;
        var fondo ;
        var fondoAct ;
        var tamano ;
        var tamanoAct ;
        var texto  ;
        var vfinal  ;
        var vistaPrevia ;
        var previo ;
 
        function carga(){//para llamarla cuando el DOM se cargue
            color = document.getElementById('color');
            colorAct = color.value;
            fondo = document.getElementById('fondo');
            fondoAct = fondo.value;
            tamano = document.getElementById('tamano');
            tamanoAct = tamano.value;
            texto  = document.getElementById('texto').value;
            vfinal  = document.getElementById('textoFinal'); 
            vistaPrevia = document.getElementById('vistaPrevia');
            previo = document.getElementById('previa'); 
        }
 
        function edit(){
            vfinal.innerHTML = '<span style="color:' + color + '; background-color:' + fondo + '; font-size:' + tamano +';">' + texto + '</span>';
        }  
        function previaf(){
            vistaPrevia.innerHTML = '<span style="color:' + color + '; background-color:' + fondo + '; font-size:' + tamano +';">' + texto + '</span>';
            if(previo.checked==true){
            vistaPrevia.style.display = 'block';
            }else{
            vistaPrevia.style.display = 'none';
            }
        } 
</script>
 
 </head>
 <body onload="carga();">
  <form id="miForm" action="" method="post">
   &nbsp;Color:<br />
   <select id="color" onchange="previaf();">
    <option value="#F00">Rojo</option>
    <option value="#0F0">Verde</option>
    <option value="#00F">Azul</option>
    <option value="#FF0">Amarillo</option>
    <option value="#F0F">Magenta</option>
    <option value="#0FF">Cyan</option>
   </select>
   <br /><br />  
   &nbsp;Fondo:<br />
   <select id="fondo" onchange="previaf();">
    <option value="#F00">Rojo</option>
    <option value="#0F0">Verde</option>
    <option value="#00F">Azul</option>
    <option value="#FF0">Amarillo</option>
    <option value="#F0F">Magenta</option>
    <option value="#0FF">Cyan</option>  
    <option value="#FFF">Blanco</option>
    <option value="#000">Negro</option>
   </select>
   <br /><br />
   &nbsp;Tamaño:<br />
   <select id="tamano" onchange="previaf();">
    <option value="14px">Pequeña</option>
    <option value="20px">Mediana</option>
    <option value="24px">Grande</option>
   </select>
   <br /><br />
<!--un checkbox con el mismo nombre de la función previa ?-->
   <input type="checkbox" id="previa" onclick="previaf();" />Vista previa
   <br /><br />
   <textarea id="texto" cols="20" rows="10" onkeyup="previaf();" onkeydown="previaf();"></textarea>
   <br /><br />
   <div id="vistaPrevia" style="display:none;"></div>
   <input type="button" value="Obtener texto" onclick="edit();" />
  </form>
  <div id="textoFinal"></div>
 </body>
</html>