#2465December 23, 2019by raghuv91 answer
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!
#2464December 21, 2019by alemenciones1 answer
I have a problem to replace a componente in the same position (top/left), the new component is always added in the positions top: 0px / left: 0px; I'm triyng something like this: But setStyle() is not working this time...
artf
The code, more or less, seems ok, be sure to check styles contains the position properties (and the component has also the absolute position). If it's not working yet try to create a reproducible demo, please
#2463December 21, 2019by Atmiya7353 answers
Hello Team, I m new to grapejs and little bit fresher in JS. What i have to achieve => I have to make display the container in iframe which i m loading for the preview => Blocks section should be out of the ioframe in main page from where i will drag and drop the block within iframe. Which issue i m facing => if i add...
pouyamiralayi
@Atmiya735 take a look at this fiddle which is using custom layout for blocks section. cheers!
Atmiya735
Thanks for help, but i want to implement container section in iframe and blocks section outside of the iframe, and still want to achieve the feature of drag and drop in it. Please help me out in this
pouyamiralayi
@Atmiya735 if you notice in the provided fiddle the blocks section is outside the iframe. cheers!
#2462December 20, 2019by hellocaio2 answers
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...
#2461December 20, 2019by obrazkow3 answers
For example i have component image that wrapped in div. I want to style image with multiple properties(horizontal position, border-radius, etc) When update horizontal position, need to update current element - div When update border-radius, need to update child element - img. Also i have such problem with Trait, i can...
pouyamiralayi
@obrazkow You can access the parent like this: component.parent(); and for the children: const collection = component.components();Also i have such problem with Trait, i cannot update src for img. cheers!
pouyamiralayi
With your solution trait don't know src value and input will be empty at init editor phase. i do not understand what you are talking about!What do you think about my solution with override target in init method you are treating a very simp...
obrazkow
@pouyamiralayi that's exactly what I did, but with such solution selected component have attribute or style that need only for child component.
#2460December 20, 2019by suchiitsme2 answers
Im using editor and generating a html string and saving it to a file. But before saving I have to encode all the &, <, > characters. Please Help
pouyamiralayi
@suchiitsme cheers!
artf
In the next release, we'll escape HTML characters https://github.com/artf/grapesjs/pull/2446
#2459December 18, 2019by kickbk3 answers
I tried to reproduce this on your demo and could not, yet I am having the strangest issue. I was hoping you could point me in the right direction when debugging this. As soon as I store the html in localStorage and refresh the page (you will see a short pause in the screencast), grapesjs magically adds "-2" to every i...
artf
It should only happen when you append an HTML that contains an already defined ID, so the editor increments it to avoid conflicts. Are you sure you don't append the same content twice?! In any case, the function which does the check is her...
artf
Do you use the latest version?
kickbk
@artf, yes I do. 0.15.9, although it's the same with prior versions. I tried to remove all the plugins to keep it all very clean, but still getting this as soon as localStorage is generated. Any ideas why or where this may get generated so...
#2458December 17, 2019by angyLe3 answers
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)...
#2457December 17, 2019by chezhiane1 answer
I am using the bellow versions. "grapesjs": "^0.14.62", "grapesjs-preset-newsletter": "^0.2.20", Believe these are the latest versions available in npm . I am getting the undefined error. See in your earlier posts that the version was incorrect, but mine i believe is current.
pouyamiralayi
@chezhiane you are not using latest version cheers!
#2456December 12, 2019by varadero3 answers
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!