GrapesJS Angular

GrapesJS Angular is an Angular wrapper around the GrapesJS library, it allows to instantiate an Angular component containing the GrapesJS editor, as well as all of its managers accessible as Angular Injectables.

Table of contents

• Prerequisites
• Installation
• Download
• Usage
• Development
• Changelog
• Contributing
• License

Prerequisites

• Angular (> 9.0.0)
• GrapesJS

Installation

• Install GrapesJS Angular:

npm install @rakutentech/grapesjs-angular

• Install GrapesJS as a dependency:

npm install grapesjs

• Install Angular Dynamic Component Loader as a dependency:

npm install @rakutentech/angular-dynamic-component-loader

• Add GrapesJS styles and script in the angular.json file of your app:

"styles": ["./node_modules/grapesjs/dist/css/grapes.min.css"],
"scripts": ["./node_modules/grapesjs/dist/grapes.min.js"]

• Create a new Angular component to load the GrapesJS Editor into:

ng generate component editor

Download

• NPM
  • npm i @rakutentech/grapesjs-angular
• GIT
  • git clone https://github.com/rakutentech/grapesjs-angular.git

Usage

To use GrapesJS Angular, you first need the following:

• A DOM Projection slot to load your Angular Component containing the Editor, eg:

@ViewChild('editor', { read: ViewContainerRef, static: true }) editorContainer;

<ng-container #editor></ng-container>

• Your Angular Component to load the Editor into. All it needs is also a projection slot in its template, indicating where to load the GrapesJS Editor. This projection slot must be named grapesJsEditorContainer, eg:

@ViewChild('grapesJsEditorContainer', { read: ViewContainerRef, static: true }) grapesJsEditorContainer;

<!-- You may have other stuff around the projection slot to define custom panels, etc ... -->
<div class="panel-properties">
  <div class="panel-properties-header gjs-bg-one gjs-two-color">
    <i class="icon-styles-panel"></i>
    <p>Styles</p>
  </div>
  <div class="panel-properties-list">
    <div class="panel-properties-trait"></div>
    <div class="panel-properties-selector"></div>
    <div class="panel-properties-style"></div>
  </div>
</div>
<div #grapesJsEditorContainer></div>

You’re now ready to load your Angular Component containing GrapesJS’ editor !

This is done by calling the loadEditorIntoComponent method of the GrapesjsAngularService, which first needs to be injected.

// ...

constructor(
  private readonly grapesjsAngularService: GrapesjsAngularService,
  // ...
) {}

ngOnInit() {
  // ...
  this.grapesJsAngularService.loadEditorIntoComponent(config, EditorComponent, this.editorContainer);
}

It takes three arguments:

• The GrapesJS configuration object. (Note that the container & autorender keys will be ignored)
• The class name of the component to load the editor into (which contains the grapesJsEditorContainer projection slot as seen previously)
• The projection slot to load it into

Your Angular Component is now loaded with the GrapesJS Editor ! It can also Inject the following tokens (which are provided locally (see below)):

• GJS_EDITOR: the GrapesJS Editor object
• GJS_MODAL: the GrapesJS Modal object
• GJS_COMMANDS: the GrapesJS Commands object
• GJS_CODE_MANAGER: the GrapesJS Code Manager object
• GJS_DOM_COMPONENTS: the GrapesJS DOM Components object
• GJS_ASSET_MANAGER: the GrapesJS Asset Manager object
• GJS_PANELS: the GrapesJS Panels object
• GJS_CSS_COMPOSER: the GrapesJS CSS Composer object
• GJS_CONFIG: the GrapesJS Config object
• GJS_BLOCK_MANAGER: the GrapesJS Block Manager object
• GJS_STORAGE_MANAGER: the GrapesJS Storage Manager object
• GJS_UNDO_MANAGER: the GrapesJS Undo Manager object
• GJS_STYLE_MANAGER: the GrapesJS Style Manager object

Since multiple instances of the GrapesJS Editor can be loaded, each with its own instances of the above providers, please note that these Injection tokens are only available within the scope of the component & its children. If you need to inject them as dependencies to other services, these would also need to be provided locally with dependencies, eg:

// ...

@Component({
  // ...
  providers: [{ provide: MyService, useClass: MyService, deps: [GJS_CSS_COMPOSER, GJS_CONFIG] }],
})

For more information: check out this link

Development

Clone the repository and install all the necessary dependencies.

git clone https://github.com/rakutentech/grapesjs-angular.git
cd grapesjs-angular
npm install

License

MIT