Hello, not sure exactly where this should go, but here goes. I'm creating a builder for making long menus for restaurants that will be printed. My question is, does anyone have any in the wild examples of making a page-size bounding box for each page of a "menu"? lets say i have 150 types of beer. i'd like to make eac...
Ju99ernaut
You can make use of css properties break-before or break-after. You can maybe create a page break block that you add manually after every page, check out grapesjs-plugin-page-break, or you can break before or after a certain element.Always...
Version: 0.16.40 Bug: Error: Cannot read property 'style' of null https://prnt.sc/s0bqer How to reproduce it: Goto https://grapedrop.com Drag a Typed component and observe into canvas Expect:No error
artf
Related to https://github.com/artf/grapesjs/issues/2656#issuecomment-610333308. Should be fixed in the next release
Hi i am using grapejs for our project and my editor design is below. My question is how to stop autofocus panel views container. it only show when i click the panel buttons. It always open when we drop a element to canvas or click a element in canvas.
Ju99ernaut
When you select a component in the canvas When you start dragging a block onto the canvas
When I add an image attribute to the page I noticed that inside of the component the image has attributes to it. When I call my images into the asset manager I do it like the following: However, the height and width aren't available when the image gets added to the canvas. I've tried to get the sizes by doing: compone...
artf
@awaredigital probably the best solution would be to follow the suggestion to listen up to src changes, then find the right asset and update attributes accordingly
pouyamiralayi
Hi @awaredigital checkout #2696 comment which is updating the styles whenever the `src` changes. Cheers!
andy-aware
Hi @pouyamiralayi, thanks for the answer but that isn't what I'm looking to do. I'm looking to add height and width to the image element itself. So for example at the moment, the image goes in like this: <img src="http://placehold.it/350x2...
Hi All, More of a general question of if anyone has managed to make the whole canvas (or in fact the wrapper) a Vue element, meaning that you could drag some a custom div like '<timer></timer>' and it renders correctly? I've attempted this, I made the wrapper the vue element (el), and it did work when 'importing' HTML...
adamwpe
Thanks @noogen for your detailed reply. Yh, think you are right and stick with components - I'm not too sure if the ToHtml if the right solution is for me or not, because I don't want to manage two types of system, on rending correctly wit...
noogen
My answer is to best stick with custom scripts. I've done custom components using lodash template here: https://github.com/niiknow/grapesjs-components-farmer/blob/master/src/index.js#L2. A string is expected from thetoHtml method - https:/...
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn't appear on canvas and DOM. If I remove isComponent function from component definition, it works as expected. Could I get help with this?
artf
@kuhelbeher your code is correct (except is extend: 'cell', and not extends: 'cell',), unfortunately, there is a bug (or a bad logic) applied on the row component, so, for now, I'd suggest adding this as a patch: and now it should work: ht...
noogen
@kuhelbeher because your component is a table per your content definition above and not a td as defined in your addType of tagName property?
kuhelbeher
@noogen I don't think the problem is with this. I tried to define component and block like this: But the problem remains - td tag (and all what is inside of it) doesn't appear on canvas, Maybe I'm doing something wrong? I am trying to crea...
I have integrated the code edit option in the Web builder.Using editor.getHtml() to get the current HTML content and populate in the code editorWhile saving the code from the code editor, I am using editor.setComponents() to set the edited content to the builder canvas. IssuesOn Saving the html from the code editor, i...
pouyamiralayi
@jenter #1331 comment and #2644 comment are good examples. Also checkout #2664 comment which is a pitfall to avoid! Cheers!
noogen
@sathyanarayananaCES First, to echo others that it is best to use get/setComponents and get/setStyle to save the content of the editor. If I understand your usage correctly, that you want HTML for htmlCodeEditor and be able to import back...
pouyamiralayi
Hi @sathyanarayananaCES you must call `editor.getComponents and editor.getStyle in order to retrieve the components details; then you can return to the stored state by calling editor.setComponents and editor.setStyle` with the result of ab...
Are you using the latest release (older versions are NOT supported)? Yes.Are you facing the bug with your local copy of GrapesJS or with the current demo? Both of them.Steps to reproduce:Drag a component then change its background color from inputOpen color picker immediatelyThen click to outside color picker (anywher...
longdoan7421
Hi @artf, After seeing around the colorpicker, I think the problem is that the spectrum doesn't have the same value as model when user changes input. So I attempted to sync the value of spectrum and model, and it could fix the issue. Here...
longdoan7421
I found out that this bug also happen if you change the input with any value, then immediately open colorpick then cancel it by clicking outside (not canvas).
Hello, I'm working on an integration of my localization system (i18n) with grapes.js. The idea is to have a data field, which will hold the i18n string. If the data attribute is set, grapes.js will take the string and make it visible in a settings field. If the settings field is altered, the data attribute is also alt...
artf
@teawithfruit if you expect something in your saved HTML page (outside of the GrapesJS editor) the only thing I see it can do is: So it does nothing, probably you're another victim of thinking that scripts inside GrapesJS editor will work...
pouyamiralayi
Hi @teawithfruit there are a couple of issues with your code: 1) you don't have access to `this as the model inside component script`: Component & Js docs 2) if your use case is to control an attribute, you don't have to provide a custom t...
teawithfruit
Thank you for the very helpful the answer! This is my updated Block/Component. Right now I've got just one more problem. The script function I've added to the component is not called in the saved html page. If I add the block to the canvas...
I added my block like this below Then drag this block and drop to canvas, and show HTML code with export-template command. πOK, this is what I expected. BUT, HTML class doesn't appear on the element inside of the editor, so it's not applied style for .main-title. <img width="793" alt="γΉγ―γͺγΌγ³γ·γ§γγ 2020-03-20 2 36 53" sr...