aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

En Learning jQuery, han desarrollado un sistema con el cual podremos crear un previsualizador de comentarios con esta fantástica librería. 

Ingredientes 

• Un Wordpress
• Un theme (en este caso Kubrick)
• jQuery
• Un editor

Manos a la obra

Para empezar debemos conocer donde se encuentra el formulario de envio de comentarios del theme, en Kubrick (el theme por defecto de Wordpress) se encuentra en comments.php, generalmente todos los themes suelen seguir ese patrón aunque hay algunos que puede tenerlo en otros ficheros.

      <form action="..." method="post" id="commentform">
        <p><textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea></p>
        <p><input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
        <input name="comment_post_ID" value="30" type="hidden">
        </p>
      </form>

El formulario de envio es similar a este. Hemos de recordar el id de nuestro textarea ya que será el que irá enviando el contenido a nuestro previsualizador.

Crear el previsualizador

Nuestra intención es crear dinámicamente una capa <div></div> al obtener el foco en nuestro textarea e introducir en él el contenido, mediante el uso de eventos  añadiremos a nuestro textarea la funcionalidad necesaria para que nuestra capa previsualize el contenido.

Al evengo onfocus, le asignamos la creación de la capa.

   $('#comment').onefocus(function() {
        $(this).parent().after('<div id="preview-box"><div class="comment-by">Live Comment Preview</div><div id="live-preview"></div></div>');
      });

y al evento onkeyup el proceso necesario para pasar la información nueva al previsualizador.

   $('#comment').keyup(function() {
        $('#live-preview').html( $(this).val() );
      });

Uno de los problemas con los que nos encontramos son los saltos de línea que dentro de l textarea son \n y nosotros necesitamos un <br />, para ello usaremos una expresión regular que se encargue de cambiar los \n por el salto de línea que necesitamos.

   $('#comment').keyup(function() {
    $comment = $(this).val();
    $comment = $comment.replace(/\n/g, "<br />");
    $comment = $comment.replace(/\n\n+/g, '<br /><br />');
    $('#live-preview').html( $comment );
  });

Con esto ya podemos montar nuestro previsualizador de comentarios usando jQuery.

El código completo

      $(document).ready(function() {
        $('#comment').onefocus(function() {
          $('#comment').parent().after('<div id="preview-box"><div class="comment-by">Live Comment Preview</div><div id="live-preview"></div></div>');
        });
        var $comment = '';
        $('#comment').keyup(function() {
          $comment = $(this).val();
          $comment = $comment.replace(/\n/g, "<br />");
          $comment = $comment.replace(/\n\n+/g, '<br /><br />');
          $('#live-preview').html( $comment );
        });
      });