EpicEditor: Editor del tipo Markdown desarrollado con JavaScript

Markdown es un lenguaje de marcas ligero, lo que a su vez significa, un tipo de formateo de texto que se encuentra vagamente estandarizado. Su principal característica es su brevedad, que por lógica se traduce en ocupar menos espacio, además de mantenerse simple, característica de vital importancia de cara al mantenimiento o edición de contenidos.

Markdown nace principalmente como alternativa al clásico marcado HTML de toda la vida, que en determinados aspectos es demasiado complejo, por ejemplo esto lo podemos ver a la hora de trabajar con editores WYSIWYG, los mismos guardan cientos de etiquetas, que según avancemos en la complejidad del formateo de un texto incrementan exponencialmente la complejidad de la estructura. Markdown es tan simple que podemos guardar el texto formateado en texto plano sin ningún tipo de inconvenientes, ni perdida de información.

Otro detalle interesante de Markdown es que cada día esta siendo soportado por cada vez más servicios web, por ejemplo: GitHub, Stackoverflow, y varias herramientas de blogging como Posterous.

¿Interesante verdad?

Ahora bien, ¿Cómo podemos implementar un editor Markdown hoy en día?
La respuesta: EpicEditor.

Editor del tipo MarkDown en JavaScript

EpicEditor es un editor desarrollado con la tecnología JavaScript que justamente guarda la información utilizando Markdown. Además algo interesante de este proyecto, que es complemente gratuito, es que podemos implementarlo utilizando simplemente unas lineas de código.

Ejemplo de uso de EpicEditor:

Una vez que descargamos y guardamos todas las bibliotecas JavaScript de EpicEditor en un directorio publico en nuestro proyecto podemos comenzar. Para eso creamos el contenedor del editor, para eso simplemente escribimos:

<div id="epiceditor"></div>

Luego vinculamos la biblioteca de EpicEditor:

<script src="epiceditor.min.js"></script>

Finalmente inicializamos el editor, eso lo logramos con tan solo una línea de código:

var editor = new EpicEditor().load();

Las opciones de configuración de EpicEditor:

var opts = {
  container: 'epiceditor',
  basePath: 'epiceditor',
  clientSideStorage: true,
  localStorageName: 'epiceditor',
  parser: marked,
  file: {
    name: 'epiceditor',
    defaultContent: '',
    autoSave: 100
  },
  theme: {
    base:'/themes/base/epiceditor.css',
    preview:'/themes/preview/preview-dark.css',
    editor:'/themes/editor/epic-dark.css'
  },
  focusOnLoad: false,
  shortcut: {
    modifier: 18,
    fullscreen: 70,
    preview: 80,
    edit: 79
  }
}
var editor = new EpicEditor(opts);

Lamentablemente no hay una versión online de prueba. No obstante al descargar el proyecto desde su apartado en Github van a encontrar con una completa guía, ademas de un ejemplo completamente funcional.

El proyecto se encuentra activo, y cuenta con un trabajo con un nivel muy buen de dedicación, honestamente les recomiendo guardar en sus marcadores este recurso, en un futuro no muy lejano seguramente escucharemos hablar mucho más sobre markdown.

Web: EpicEditor

Categorizado en: