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.
- 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
- NPM
npm i @rakutentech/grapesjs-angular
- GIT
git clone https://github.com/rakutentech/grapesjs-angular.git
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 objectGJS_MODAL
: the GrapesJS Modal objectGJS_COMMANDS
: the GrapesJS Commands objectGJS_CODE_MANAGER
: the GrapesJS Code Manager objectGJS_DOM_COMPONENTS
: the GrapesJS DOM Components objectGJS_ASSET_MANAGER
: the GrapesJS Asset Manager objectGJS_PANELS
: the GrapesJS Panels objectGJS_CSS_COMPOSER
: the GrapesJS CSS Composer objectGJS_CONFIG
: the GrapesJS Config objectGJS_BLOCK_MANAGER
: the GrapesJS Block Manager objectGJS_STORAGE_MANAGER
: the GrapesJS Storage Manager objectGJS_UNDO_MANAGER
: the GrapesJS Undo Manager objectGJS_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
Clone the repository and install all the necessary dependencies.
git clone https://github.com/rakutentech/grapesjs-angular.git
cd grapesjs-angular
npm install
MIT