Closed aliassad closed 7 years ago
Jquery added Please don't close this issue without fixing it
What is on the right-hand side of 'instanceof'?
Unable to figure out this think now i am using AngularJS to test this liberary work with AngularJS 1 or not
Unable to figure out
If the error is in console just click on it and show the part which throws the error
I think you're doing something wrong, @aliassad
This is how I got to use grapesjs with Angular 2/4 Angular:
1) npm install grapesjs --save
. jQuery will be installed for you
2) on .angular-cli.json, add the source of both style and script of grapesjs and jQuery script:
// ...
apps: {
// ...
"styles": [
"styles.scss", // your styles
"../node_modules/grapesjs/dist/css/grapes.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/grapesjs/dist/grapes.min.js" // ORDER MATTERS!
]
}
3) call grapes on your module:
import { Component, OnInit } from '@angular/core';
declare var grapesjs: any; // Important!
@Component({
selector: 'app-awesome-component',
template: '<div id="gjs"></div>'
})
export class AwesomeComponent implements OnInit {
// ...
ngOnInit() {
grapesjs.init({
container : '#gjs',
components: '<div class="txt-red">Hello world!</div>',
style: '.txt-red{color: red}',
});
}
}
--
I'd close this issue if these steps above work (which is the Angular way of dealing with 3rd party libraries). It is somewhat confusing to configure grapesjs on an Angular project, but it works.
I faced @aliassad's problem when I was importing jQuery@2.2.4 on the index.html
. It could be that jQuery's version is your problem
Obs: it works if you import jQuery@3.2.1 on the index.html
. But please, don't.
Oops. Just now realized he was talking about Angular 1 :see_no_evil:
thanks @andre-bonfatti-movile for your examples, might be useful for someone else @aliassad try to update the grapesjs to the latest version, I've made some errors a little bit more verbose (eg. missing jQuery). For now, I close this one
Thanks @andre-bonfatti-movile :)
I think you're doing something wrong, @aliassad
This is how I got to use grapesjs with Angular 2/4 Angular:
npm install grapesjs --save
. jQuery will be installed for you- on .angular-cli.json, add the source of both style and script of grapesjs and jQuery script:
// ... apps: { // ... "styles": [ "styles.scss", // your styles "../node_modules/grapesjs/dist/css/grapes.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/grapesjs/dist/grapes.min.js" // ORDER MATTERS! ] }
- call grapes on your module:
import { Component, OnInit } from '@angular/core'; declare var grapesjs: any; // Important! @Component({ selector: 'app-awesome-component', template: '<div id="gjs"></div>' }) export class AwesomeComponent implements OnInit { // ... ngOnInit() { grapesjs.init({ container : '#gjs', components: '<div class="txt-red">Hello world!</div>', style: '.txt-red{color: red}', }); } }
--
I'd close this issue if these steps above work (which is the Angular way of dealing with 3rd party libraries). It is somewhat confusing to configure grapesjs on an Angular project, but it works.
I faced @aliassad's problem when I was importing jQuery@2.2.4 on the
index.html
. It could be that jQuery's version is your problemObs: it works if you import jQuery@3.2.1 on the
index.html
. But please, don't.
You help a lot thanks a million
I think you're doing something wrong, @aliassad
This is how I got to use grapesjs with ~Angular 2/4~ Angular:
npm install grapesjs --save
. jQuery will be installed for you- on .angular-cli.json, add the source of both style and script of grapesjs and jQuery script:
// ... apps: { // ... "styles": [ "styles.scss", // your styles "../node_modules/grapesjs/dist/css/grapes.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/grapesjs/dist/grapes.min.js" // ORDER MATTERS! ] }
- call grapes on your module:
import { Component, OnInit } from '@angular/core'; declare var grapesjs: any; // Important! @Component({ selector: 'app-awesome-component', template: '<div id="gjs"></div>' }) export class AwesomeComponent implements OnInit { // ... ngOnInit() { grapesjs.init({ container : '#gjs', components: '<div class="txt-red">Hello world!</div>', style: '.txt-red{color: red}', }); } }
--
I'd close this issue if these steps above work (which is the Angular way of dealing with 3rd party libraries). It is somewhat confusing to configure grapesjs on an Angular project, but it works.
I faced @aliassad's problem when I was importing jQuery@2.2.4 on the
index.html
. It could be that jQuery's version is your problemObs: it works if you import jQuery@3.2.1 on the
index.html
. But please, don't.
Will give this a try, thanks anyway!
@andre-bonfatti-movile Thanks for that answer. I tried te same way around and grapejs loads but the components or we say plugins don't load. Any workaround that is available for that? Thanks in advance
Thanks for the amazing comment @andre-bonfatti-movile. I cant find .min.js. If it is the case for anyone use the below code
"scripts": [ "../node_modules/grapesjs/dist/grapes.js" ]
I've the same problem, i've installed grapejs
with npm
, but no dist
folder inside.
@tmmschmit grapesjs
not grapejs