Markdown WYSIWYG en tu aplicación Rails


Ahorita estoy construyendo una aplicación Rails para una agencia de viajes que resulta ser cliente nuestro. La idea que hay detrás de lo que el cliente quiere es muy buena y es un proyecto que me emociona trabajar. Una de las características que estoy implementando y añadiendo ahorita es la posibilidad de generar contenido con formato desde el submit de un formulario directamente. En cuanto supe que teníamos esa necesidad inmediatamente pensé en Markdown, una cosa ligera, práctica y poderosa para estos casos.

El markdown es un formato de texto estilizado que se basa en ciertas reglas para aplicar estilos, sin ser una edición de texto con etiquetas HTML directamente como la encontrada en los editores de Blogger o Wordpress por ejemplo. La implementación de markdown se puede hacer sin necesidad de un editor, tu le das capacidades de interpretación de Markdown a tu app y listo, si los usuarios escriben markdown en sus formularios, ya en las vistas quedará interpretado y con formato. Sin embargo yo quiero que esta app sea lo más noob-friendly posible, así que añadiré un editor WYSIWYG para markdown (después de implementarlo en la app) e igual un corrector ortográfico, veamos cómo lograrlo:

1) RedCarpet

Primero le dí capacidades de interpretación de Markdown a mi app, esto se logra de la siguiente manera:

Añadir RedCarpet a tu Gemfile

gem 'redcarpet'

Luego hacemos bundle install y proseguimos creando un helper method que nos permita renderizar el contenido de una form que se envió con markdown en la vista indicada de la aplicación ya con el formato renderizado. El código de este método va en helpers/application_helper.rb y será el siguiente:

module ApplicationHelper


  def markdown(text)
    renderer = Redcarpet::Render::HTML.new(:no_links => true, :hard_wrap => true)
    options = {
      autolink: true,
      no_intra_emphasis: true,
      fenced_code_blocks: true,
      lax_html_blocks: true,
      strikethrough: true,
      superscript: true
    }
    Redcarpet::Markdown.new(renderer, options).render(text).html_safe
  end

end

Con esto ya puedo llamar en mi vista al campo formateado usando este método y renderizará correctamente con algo como:

<%= markdown @objeto.campo %>
Aunque esto bastaría para renderizar el markdown que haya sido escrito en un form, no toda la gente sabe markdown y dar un curso intensivo de cómo escribir esto a cada empleado de la agencia es tedioso, así que les ayudaremos un poquito con un lindo editor WYSIWYG en el siguiente paso.

2) Una GUI para las TextAreas

Podemos integrar varias opciones para lograr esto, ya que lo haríamos en el lado del cliente con javascript y eso quiere decir que tenemos TONELADAS de opciones para usar jajajajaja. Sin embargo, en mi caso personal tras hacer varias pruebas, me quedo con MarkitUp! un pequeño y confiable editor muy fácil de implementar y usar, veamos cómo:

Primero nos bajamos el dichoso editor (ya preparado para Markdown y ser ligero) desde acá. Una vez descargado lo extraemos y copiamos la carpeta resultante en nuestro directorio public/assets de la aplicación.

Referenciamos los archivos de la siguiente manera en la aplicación:

<!-- markItUp! skin -->

<link rel="stylesheet" type="text/css" href="/assets/markitup/skins/markitup/style.css">
<!--  markItUp! toolbar skin -->
<link rel="stylesheet" type="text/css" href="/assets/markitup/sets/markdown/style.css">
<!-- markItUp! -->
<script type="text/javascript" src="/assets/markitup/jquery.markitup.js"></script>
<!-- markItUp! toolbar settings -->
<script type="text/javascript" src="/assets/markitup/sets/markdown/set.js"></script>

Y luego simplemente en nuestra form donde vayamos a usar el editor debemos darle la clase indicada a las textareas que queremos formatear con markdown de la siguiente manera:

<%= f.text_area :description, :class => 'markItUp' %>

Una vez hecho esto, añadimos al final de nuestra form el script de markitUp también, que es el siguiente:

<script type="text/javascript" >

   $(document).ready(function() {
      $(".markItUp").markItUp(mySettings);
   });
</script>

Y con eso, dichas textareas del formulario cargarán directamente con MarkitUp para poder disfrrutar de los beneficios del Markdown en nuestra app.