Integración de GrapesJs con Angular

3 min readFeb 11, 2019

GrapesJS

GrapesJs es un web builder framework de código abierto que combina diferentes herramientas y funciones con el fin de ayudarte (o a usuarios de tus aplicaciones) a crear plantillas HTML sin ningún conocimiento de programación. es una solución perfecta para reemplazar a los editores WYSIWYG( acrónimo de What You See Is What You Get, en español, “lo que ves es lo que obtienes”), los cuales son buenos para la edición de contenido, pero inadecuados para crear estructuras HTML. Puedes verlo en acción con demostraciones oficiales, además de que con su api puedes crear tus propios editores.

Link oficial = https://grapesjs.com/

Descarga e Instalación

Puedes descargar GrapesJs de alguna de las siguientes fuentes:

CDNs

unpkg

cdnjs

npm

npm i grapesjs

git

git clone https://github.com/artf/grapesjs.git

Integración con angular

Esta es la forma en que yo logre integrar GrapesJs con un proyecto en angular. para tener una guía de todas las funcionalidades que posee el framework por favor consultar la documentación oficial.Importar la librería

Después de instalar Grapesjs con cualquiera de los métodos anteriormente descritos, debemos importar el framework a nuestro proyecto de angular antes de poder usarlo. Para importarlo nos dirigiremos al archivo:

angular.json

En el cual importaremos el script y los estilos de GrapesJs en la sección de build como se muestra a continuación

“build”: {  “options”: {    “styles”: [      “./node_modules/grapesjs/dist/css/grapes.min.css”,    ],    “scripts”: [      “node_modules/grapesjs/dist/grapes.min.js”    ]  }}

}

App.component.ts

import { Component } from '@angular/core';
import grapesjs from '@node_modules/grapesjs';@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})export class AppComponent {    title = 'example';}

Adicionalmente si queremos utilizar alguno de los geniales PlugIns que GrapesJs tiene, deberemos seguir los pasos de instalación que nos indican en la documentación oficial, posteriormente debemos importar el script y style del PlugIn en nuestro en nuestro archivo angular.json; posteriormente importarlo a nuestro componente. ejemplo:

import { Component } from '@angular/core';
import grapesjs from '@node_modules/grapesjs';
import '@node_modules/grapesjs-preset-newsletter';@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})export class AppComponent {    title = 'example';}

Empezar desde el Canvas

El primer paso es definir la interfaz de nuestro editor. Para ello vamos a empezar con diseños HTML básicos. La parte principal del editor de GrapesJS es el Canvas, aquí es donde creas la estructura de tus plantillas. para este ejemplo yo use un <div> básico de html con un ID genérico el cual puede ser remplazado por cualquiera.


<div id=”gjs”>
 <h1>My Component!</h1>
</div>

Posteriormente vamos al archivo TS de nuestro componente, para crear nuestro método de inicio de GrapesJs.

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  // Size of the editor
  height: '300px',
  width: 'auto',
  // Disable the storage manager for the moment
  storageManager: { type: null },
  // Avoid any default panel
  panels: {},
});

dentro del método anteriormente creado tenemos unos objetos que nos sirven para configurar nuestro GrapesJs

container: ‘#gjs', en este objecto estamos declarando la session del html donde se va a generar nuestro GrapesJs.

fromElement: true, en este flag decimos si va a tomar los elementos html que están dentro de nuestro canvas en este caso esta true por lo cual nos mostrara inicialmente nuestro elemento: <h1>My Component!</h1> .

height: '300px', width: auto en estos objetos definiremos las dimensiones de nuestro GrapesJs.

storageManager: { type: null }, en este objeto podemos definir nuestro endpoint para almacenar la data remotamente, o en nuestro local Storage.

Esto nos mostrara un canvas con el html definido previamente en el archivo Html de nuestro componente.

Nota: Podemos Definir en el objeto panels de nuestro método grapesjs.init nuestros Propios paneles. Para este ejemplo dejamos el objeto vacío, por lo cual nos mostrara los paneles por defecto.