Skip to content

Instantly share code, notes, and snippets.

@mrsweaters
Forked from thecodefish/controller.ts
Created September 18, 2018 20:55
Show Gist options
  • Save mrsweaters/f63cc835e082709eb83f597ca9f57f17 to your computer and use it in GitHub Desktop.
Save mrsweaters/f63cc835e082709eb83f597ca9f57f17 to your computer and use it in GitHub Desktop.
AngularJS component example for loading GrapesJS editor
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}`);
});
}
}
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());
<div ng-controller="myController as ctrl">
<grape-editor id="whatever" config="ctrl.grapesJsConfig"></grape-editor>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment