EditorJS: Un editor WYSIWYG que recomiendo

26 de Agosto del 2020 - Escrito por Shadow Myst


Durante estos meses de pandemia he estado aprendiendo más sobre programación web, sobre todo con Ruby on Rails y NodeJS. Una de las cosas que me había gustado de Rails 6 es que tiene incluido una función llamada “Action Text”, una función para activar texto enriquecido en nuestra aplicación rails, gracias a que había integrado el “WYSIWYG” Trix Editor, sin embargo con el tiempo de irlo usando lo sentí demasiado limitado. Por eso mismo estuve buscando una alternativa que me agradara, hasta que encontré EditorJS.

Para los que son ajenos al tema, un WYSIWYG (del acrónimo “What You See Is What You Get” que significa en español “Lo que ves es lo que obtienes), es un procesador de texto donde automáticamente verás el resultado final de lo que vas escribiendo. Un buen ejemplo de esto, son los procesadores de texto para escribir un post para Hive, Wordpress u otro blog.

Una vez configurado EditorJS, este tiene un diseño parecido a Gutenberg (el editor de texto de Wordpress) al poder agregar nuestro contenido en forma de bloques y no como una simple caja de texto, además de un toque más minimalista, claro que, de igual forma puedes ir personalizando con tu propio CSS.

Interfaz EditorJS

La información guardada del texto enriquecido se almacena en formato JSON, donde cada campo guardado especifica de qué tipo es, ejemplo si es un título, un párrafo, una lista, etc. Lo cual lo hace fácil de manejar para cuando quieras almacenarlo en tu base de datos (o como tu desees manejarlo)

outdata EditorJS

Otro detalle que me gusto en EditorJS, es que esta practicamente programado para que sea altamente configurable y extensible, permitiendo que tu puedas crear tus plugins para tus bloques en tu texto enriquecido, además de los propios plugins que tiene la librería y que puedes consultar en su propio perfil de github.

Por otro, siento que su principal desventaja es que (aunque parezca sencillo) realmente cuesta trabajo entender al principio su funcionamiento, sobretodo si tus conocimientos de Javascript son demasiado básicos y aunque tienen una documentación extensa, hay momentos en que puedes sentir que la documentación no está bien explicada, por lo que puedes llegar a revolverte un poco, ademas que si había dicho que una ventaja es que que cada una de sus características está basada en plugins, también hace que cada uno tenga una documentación por separado y diferente manera de implementarse volviéndose una desventaja.

Sin embargo es relativamente joven esta librería de Javascript, su desarrollo es constante y poco a poco su comunidad va creciendo cada vez más. Así que les recomiendo que pasen a visitar su web y empiecen a experimentar con el