[Javascript] Instalando y Probando el plugin Editor.js

Editor.Js es un plugin para editar contenido de manera visual/WYSIWYG basado en bloques de contenido y en add-ons para extender el funcionamiento del mismo plugin.

El plugin editor Js cuenta con diferentes add-ons desde los básicos hasta los mas complejos para agregar embeds de todo tipo.

El plugin Editor.js es open source y cuenta con muy buena documentación tanto para javascript normal como para NodeJs.

En este post vamos a ver un ejemplo sencillo, para agregar párrafos y headings en un contenedor de Editor.js.

Lo primero que haremos sera ir a la pagina de editor.js y descargar el archivo editor.js y header.js, pagina https://editorjs.io/

En caso de que no quieran o no puedan descargar los archivos desde la pagina oficial les dejare los archivos al final de este articulo.

Codigo

Despues de descargar los archivos, vamos a crear un archivo html basico y en el header del documento vamos a agregar las librerias.

  <script src="header.js"></script>
  <script src="editor.js"></script>

Despues vamos a agregar un contenedor.

  <div id="editorjs" style="border: 2px black dashed; "></div>

En este caso le agregamos un pequeño borde para poder diferenciar el funcionamiento del plugin, pero si gustan pueden eliminar el estilo.

Para inicializar el plugin de manera basica vamos a usar el siguiente codigo.

  <script>
    var editor = new EditorJS({
      holder: 'editorjs'
    });
  </script>

Por defecto el plugin normalmente solo tiene la opcion para agregar parrafos de texto, si queremos agregar mas cosas debemos usar los addons que ofrece el plugin, uno de ellos es para agregar headers.

Como ya descargamos y agregamos el archivo header.js ahora lo vamos a integrar en el plugin principal.

  <script>
    var editor = new EditorJS({
      holder: 'editorjs',
	  tools: {
       header: {
         class: Header,
       },
      }
    });
  </script>

Y tambien podemos agregar contenido o datos iniciales, que se va a mostrar despues de cargar el plugin.

  <script>
    var editor = new EditorJS({
      holder: 'editorjs',
	  tools: {
       header: {
         class: Header,
       },
      },
      data: {
        blocks: [
		{
		  type: "header",
		  data: {
		    text: "Hola mundo!",
		    level: 2
		  }
		}
        ]
      },
    });
  </script>

Resultado

El resultado es el siguiente:

Descargar

A continuación les dejo un link para descargar el plugin editor.js y el código de ejemplo que utilice.

Link: https://drive.google.com/file/d/1SDDBXO_zQK_mNUPdfHaerirfuBZCU11r/view