I'm using the latest version, 0.15.9, and I'm new to this fantastic project! I'm currently learning a lot, starting from scratch. Please let me know if you prefere such questions on Stack Overflow or elsewhere. I'm trying to export/import the content by myself, without using the "Storage" API. I see the store() functi...
electrotype
I think I got it using: Then: let export = editor.store(); And: importFrom(export); That said, it doesn't feel totaly "right" to me. I would like a version of the functions where you can specify the exported Json object directly!
artf
Using custom storage is actually the best wayI would like a version of the functions where you can specify the exported Json object directly! Well, no one limits you to update your exportToLoad
hey @artf i installed grapes js through npm [ "grapesjs": "^0.15.9"] and i'm using vue with grapes js , here is my code ------------------------------------------------------------------------------------------------------------ import grapesjs from 'grapesjs'; import 'grapesjs/dist/css/grapes.min.css'; export default...
pouyamiralayi
@raghuv9 creating a custom vue component for grapesjs: and to actually use it: check this repo for more info. cheers!
Hi, I am trying to implement multiple pages. With multiple pages, I would like to share the header and footer among all pages to keep consistency, so I think the approach is to save them separately. Is this possible? Any advice?
hellocaio
This is what I am thinking: const html = $(editor.getHtml()); const header = html.find("header").html(); const footer = html.find("footer").html(); But I don't like the fact that I am using jQuery :/.... any work around this?
artf
I'm not sure is a good idea detaching them in that way. Probably the best approach would be to have something like "Symbols" to keep components in sync but it's not yet implemented in GrapesJS. For now, I'd suggest working on those compone...
I have a question. When css property is added to StyleManager configuration, for example I added color and set defaults to green (just for test): name: 'Typography', open: false, buildProps: ['color'], properties:[{ name: 'Font color', property: 'color', defaults: "green"}, … Looks like it does not affect text color o...
artf
Hi @angyLe the style manager just builds properties, in a kind of "blind-way", and some of their properties don't affect directly the target (component/rule). In this case the defaults it's more like a hint to show to the user when the pro...
angyLe
I didn't want to make properties different then in specification. I just wanted to set default value for existing properties. For example i want that width of the text box will be 100px, so when it is added to canvas it will be 100px . I t...
balchen
@artf I'm sorry, I couldn't understand your answer (@angyLe and I work together on implementing grapesjs in our system, so I know what the question was). When I read your answer, it is my understanding that you are saying the following: 1)...
I am using This works but only for blocks which are added/drag-dropped to the editor manually after it is initialized. If we supply components when we call grapesjs.init({..., components: [..]}), the components defined in components do not have the traits. How can we apply traits to initially loaded components too, no...
artf
currently there is a problem on storing custom types unless they are defined inside a plugin. Not a problem 😬, you just need to load custom types before the content and using plugins is the only wayI can't add all possible such elements a...
varadero
This is how it can be reproduced:Go to https://jsfiddle.net/nwsy6mv1/3/Open blocks and place "1 Column" blockClick inside the column and go to "Settings"You will see the drop-down trait with label "Trait label"At this time the grapesjs com...
pouyamiralayi
Hi @varadero please define your custom type as a plugin. cheers!
how can i remove the link, button blocks from the section components because there is a conflict between it and ckeditor toolbar, I can create a link from ckeditor so i want now to hide the link and button components from grapsjs.
Hi, Which browsers are supported by GrapesJS? I couldn't find information about it on website / docs. I need to know it before adding GrapesJS to company project which supports i.a. IE 11 and Safari. Thanks :)
artf
You can see it here https://github.com/artf/grapesjs/blob/041904f1f3364b05b5908f0da2a0e2460a292aa4/package.json#L69-L73
I apologize for the length of this question! It's a whole new component an I'm almost done writing it, I just need a little bit of help and I believe this could be useful for others. I am creating a date select input that uses the daterangepicker lib. gathers all date type fields via the options. I have , , , and fiel...
artf
Most of the logic you're doing in handleDateInputsOptions should be inside your component script. Your dateInputsSelect prop contains the input type, so use the interpolation in your script then apply the logic of handleDateInputsOptions....
Hello, I've been looking to completely disable the badges that appear on hover, but I can only seem to disable it fro the wrapper with the following code: domComponents: { wrapper: {badgable: false} }, Is there a similar way to completely disable them? Thanks in advance!
fredrickreuben
You can use canvas: { customSpots: { hover: true }, },
artf
Probably in your case the easiest solution would be to hide it via CSS
Hello, everyone! I know my question is highly possibly stupid to most of experts here. I am new to making website and I am building a web app on my own with Django and by accident I found that I can use GrapesJS to deal with the frontend. I don't really need fancy thing but just need to get something like the demo wit...
pouyamiralayi
get something like the demo if you want the exact thing as demo, the source is here put the plugins in there please see this thread cheers!