AngularJS component example for loading GrapesJS editor

controller.ts

class MyController {

	editor: any;

	grapesJsConfig: {
		//whatever
	}

	constructor(private readonly $scope: ng.IScope) {}

	$onInit() {
		this.$scope.$on('grapesJsEditorReady', editor => {
			console.log('editor ready!');
			this.editor = editor; //if you need a reference to it
		});

		this.$scope.$on('grapesJsContentChanged', data => {
			console.log(`editor content changed: ${data.changesCount}`);
		});
	}
}

grapesJsComponent.ts

class GrapesJsController
{
	/**
	 * Custom config for this specific grapesJs instance - set via binding
	 */
	config: any;

	/**
	 * ID suffix for the grapesJs container
	 */
	id: string;

	/**
	 * The default GrapesJS configuration
	 */
	defaultOptions = {
		container: '#gjs', //don't overwrite this in your custom config, use the id suffix
		width: '100%',
		height: '100%',
		style: '.ng-hide: { display: none !important; }',
		noticeOnUnload: false,
		autorender: false,
		fromElement: false,
		showDevices: false,
		storageManager: {
			autosave: false,
			autoload: false
		}
	}

	static $inject = ['$scope', '$timeout'];

	constructor(
		private readonly $scope: ng.IScope,
		private readonly $timeout: ng.ITimeoutService
	)
	{
	}

	$onInit()
	{
		//merge incoming config with default options. Note that this won't merge nested objects, it will just overwrite them
		let options = { ...this.defaultOptions, ...this.config };

		//update Id
		options.container = `#gjs-${this.id}`;

		let editor = grapesjs.init(options);

		this.setupEventListeners(editor);

		//angular controllers can respond to this event if required
		this.$scope.$emit('grapesJsEditorReady',
			{
				editor: editor
			});

		this.$timeout(() =>
		{
			editor.render();

			// Beautify tooltips (bootstrap)
			$(`#gjs-${this.id} *[title]`).each(function () {
				var el = $(this);
				var title = el.attr('title').trim();
				if(!title)
					return;
				el.attr('data-toggle', 'tooltip');
				el.attr('data-placement', 'bottom');
			});
		});
	}

	setupEventListeners(editor)
	{
		editor.on('change:changesCount',
			() =>
			{
				this.onChange(editor);
			});

		//add any other event listeners here
	}

	onChange(editor)
	{
		const changesCount = editor.editor.get('changesCount');

		if (!changesCount)
		{
			return;
		}

		//this might get fired outside of an angular context (by grapesjs)
		//$timeout will start a new digest cycle if required - this will force any watches to update

		this.$timeout(() =>
		{
			let data = {
				editor: editor,
				changesCount: changesCount
			}

			this.$scope.$emit('grapesJsContentChanged', data);
		});
	}

}

class GrapesJsComponent implements ng.IComponentOptions
{
	bindings = {
		config: '<',
		id: '@'
	}

	controller = GrapesJsController;
	controllerAs = 'editor';

	template = `<div id="gjs-{{editor.id}}"></div>`;
}

angular.module('angularApp').component('grapeEditor', new GrapesJsComponent());

view.html

<div ng-controller="myController as ctrl">
	<grape-editor id="whatever" config="ctrl.grapesJsConfig"></grape-editor>
</div>