I'm not sure if this is a bug, or if I'm just misunderstanding usage. Click component1 -> add class1 --> click the checkmark to deselect class1 on component1. Click component2 -> add class1 class1 will already be deselected. If you click the checkmark, then click component1, the checkmark for class1 is now selected on...
artf
No, it's not for disabling classes on components (in that case you have to remove it) but for changing the selector in Style Manager, so you can change what you need to style
Hi there! the currently used structure of grapesjs is based on leveraging backbonejs model-view concept for implementing the Virtual Dom inside the ecosystem of grapesjs. Virtual Dom is a great practice which has a vast area of applications and benefits; but the downside of virtual dom is the actual gap between virtua...
artf
Yes @lexoyo the final goal here would be to stop relying on Backbone's View and migrate all editor UI elements to web components. In the end, there will be @grapesjs/core (no UI) and @grapesjs/core-ui with a set of reusable and extendable...
lexoyo
Ok that's interesting :) I can't wait to see that and i will contribute as much as i can
lexoyo
Nice idea I use lit-html quite lot, it's the same approach but also adds web components when/if needed But i don't get where would backbone stop? And what would be without it. I guess it is a question that is broader about what @artf annou...
Notice some probleme with addType functionality If I create some custom type like this: When we add component widget on page , it work good But after save content to the server and reload page custom type doesn't apply because Parser don't have this type^ use only default types, so in widget type don't call isComponen...
I'm trying to mount a readonly component (draggable, droppable etc all set to false) and allow the user to edit child components inside. For example if I have the following content I want to load all of this content inside of the component, and allow the user to drag new blocks where it would say "EDIT ME"
pouyamiralayi
hi there! you can set draggable property of the target component this way: this way, it will only be draggable inside the Slot. the same can be done for readonly type. if you need further help for your specific case, i would appreciate a f...
pouyamiralayi
Hi there! if you mean injecting the component into the editor without user interactions, you can use: more on this hereallow the user to drag new blocks where it would say "EDIT ME" if you mean making the readonly component editable again,...
tom-sherman
@pouyamiralayi Thanks! I've implemented a Slot component and overriding the attributes inside of the init method The issue I'm having now is that the use is able to drag an item above the readonly header for example. Is there a way to prev...
@raghuv9 please, read carefully this guide https://grapesjs.com/docs/modules/Storage.html#setup-the-server You can't just request a document page, you HAVE TO CREATE a server-side script which outputs a JSON in a CORRECT FORMAT. And please...
this is how i tried to load my gitpage but its not working mounted() { const LandingPage = { html: '', css: null, components: null, style: null, }; this.editor = grapesjs.init({ container: "#gjs", canvas: { styles: [], }, fromElement: true, components:'' , style: '', plugins: [], pluginsOpts: { "gjs-preset-webpage": {...
jcarizza
Hello @raghuv9 first think that you cant make a request with AJAX because the CORS. Ypu need to grab the content in other way (maybe in the backend) and renderize in the editor with. editor.component(<your-content>).
hello i'm using grapesjs with vue wrapper i'm unable to load a webpage using urlLoad: of grapesjs im facing cors issue,i'm pretty new to grapesjs please help me out Thanks in advance . here is my code --------------------------------------------------------------------------------------------------------- import grape...
pouyamiralayi
hi! you need a rule set like this: in your server security policy with origin set to what ever address you deploy your grapesjs client, default to localhost in above case.
pouyamiralayi
and in your storageManager configuration change the params entry like this: cheers.
raghuv9
and in your storageManager configuration change the params entry like this: cheers. hi still im facing the same issue here is my code i have included all the changes suggested by you please let me know where i'm doing wrong mounted() { con...
hello i am pretty new to grapejs i want to load a local html file in the assets folder into grapesjs editor ,pls tellme how i can load local html file thanks in advance .. here is my code ---------------------------- import grapesjs from 'grapesjs'; import 'grapesjs/dist/css/grapes.min.css'; import 'grapesjs-preset-ne...
pouyamiralayi
hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content'). more info here cheers.
nikolabtt
Browser (GrapesJS is executed in browser) should not be able to access arbitrary file from host machine file system. If that was allowed, you would be able to add some JS to a web page and be able to steal files from your users. If you wan...
raghuv9
hi! beside reading the content of the file that heavily depends on your environment, (if you are in a node environment you can use 'fs' module), you can use editor.setComponents('your html content').more info herecheers. No actually i'm tr...
Hi @artf, can you please tell me what is the fastest and easies way to extract component styles. I have template and in this template you can edit part of header, footer and add content between them. I don't store the whole template just the content in the middle, header & footer. component structure is easy I loop th...
abozhinov
I don't see a problem with media queries. The rules are detected by selector and everything works fine. I add class and set style only for mobile and it works.
artf
Yeah, styles are in a different container (editor.CssComposer.getAll()) so it's a bit harder and there is no API for extracting all matching styles. What I'd suggest doing something like this BTW this is not a final solution, definitely, y...
Hello and thank you for GrapesJS. It's awesome. I do have a question that I haven't been able to find an answer to. I'm using PHP/Yii and MySQL db. Your example for external storage config:storageManager: { type: 'remote', urlStore: 'http://endpoint/store-template/some-id-123', urlLoad: 'http://endpoint/load-template/...
smik3
Is there any reason why you can't use PHP to save it directly as a JSON file rather than on the database?
arievanden
I probably could, but we need to saved to DB. I'm OK, a developer figured it out for me, but it would be great to have some more detailed code examples for use with php/mySQL. Your docs are great, but this would be a nice addition to your...
artf
My problem is that I'm trying to get the HTML to JSON conversion formatted properly GrapesJS, by default, generates 4 types of data: HTML, CSS, Components (JSON from HTML), Styles (JSON from CSS) So you shouldn't do any kind of conversion....