Editor WYSIWYG

_cronos2 · #1 (**permalink**) 13/06/2010, 14:10

Hola gente, estoy haciendo un editor WYSIWYG muy sencillo (al margen del posible nuevo desafío) que me está dando problemas. La cuestión es que yo pongo un textarea para el texto y varios select para el tamaño o el color, y un checkbox para ver la vista previa o no; pero ni se ve la vista previa ni se ve el texto al final. Posteo el código para ver si localizan el error porque la consola de errores cada vez me dice una cosa diferente. Gracias de antemano.

Código Javascript:

Ver original<script type="text/javascript">
 var color = document.getElementById('color');
 var colorAct = color.options[color.selectedIndex].value;
 var fondo = document.getElementById('fondo');
 var fondoAct = fondo.options[fondo.selectedIndex].value;
 var tamano = document.getElementById('tamano');
 var tamanoAct = tamano.options[tamano.selectedIndex].value;
 var texto  = document.getElementById('texto').value;
 var final  = document.getElementById('textoFinal');
 var vistaPrevia = document.getElementById('vistaPrevia');
 var previo = document.getElementById('previa');
 function edit(){
  final.innerHTML = '<span style="color:' + color + '; background-color:' + fondo + '; font-size:' + tamano +';">' + texto + '</span>';
 }  
 function previa(){
  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>

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>
 </head>
 <body>
  <form id='miForm' action='' method='post'>
   &nbsp;Color:<br />
   <select id='color' onchange="previa();">
    <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="previa();">
    <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="previa();">
    <option value='14px'>Pequeña</option>
    <option value='20px'>Mediana</option>
    <option value='24px'>Grande</option>
   </select>
   <br /><br />
   <input type="checkbox" id='previa' onclick='previa();' />Vista previa
   <br /><br />
   <textarea id='texto' cols='20' rows='10' onkeyup="previa();" onkeydown="previa();"></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>

Saludos (:

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>