Hi! I've created a custom trait, and I want to be allowed to change the content of the tags (in this case it's a H1 tag) based on the trait values.. It would be awesome if it can be bi-directional; changes in the traits panel will update the canvas and also changes in the canvas would update the input in the panel. I'...
artf
changes in the canvas What kind of changes? How would you like to change the tag of the element in the canvas?
sircoko
No, i want to change the content. for example <p> $CHANGE_THIS </p>
artf
onUpdate function in the custom trait definition allows you to update the input as you wish (in the example you see how the component parameter is passed and used to update the trait value)
Currently there is only 1 block manager. I wish to move the blocks to the left of canvas. Where I can drag and drop the block from the left and see the style on the right. I will be able to add more new kind of manager either left or right. Are they any example to do this?
adamtang79
is this the correct way? https://codepen.io/artf/pen/MQpZPj
Hi @artf I am trying to add new types of trait Below is my code.It's updating the values in code also but on reload link trait will set to default. Here is my code editor.DomComponents.addType('link', { model: dModel.extend({ defaults: Object.assign({}, dModel.prototype.defaults, { removable: false, traits: [ // strin...
Version: "0.16.18" Are you able to reproduce the bug from the demo? [ X] Yes [ ] No Steps to reproduce the bug in web builder demo: Open the demo and the console, enter editor.Canvas.addFrame({ name: 'Mobile home page', x: 100, // Position in canvas y: 100, width: 500, // Frame dimensions height: 600, // device: 'DEVI...
artf
Thanks @FlowingCloudRTL for the report but the multi-frame feature is still far from being complete so I'm not surprised about the issues. If anyone is interested in bringing this feature further, please let me know
Hello, first of all thanks for a great tool. On my project i hit the problem where I need to disable scripts inside the editor. I found 2 similar issues with this problem - https://github.com/artf/grapesjs/issues/2046 https://github.com/artf/grapesjs/issues/2814. So the problem is quite common and maybe it's better to...
RJCAM
Hi @kuhelbeher I'm still trying to achieve that too, but here's a tip that can help us to achieve it. I'll post here if I figure out a way. See this issue #2772
kuhelbeher
@RJCAM thanks for tip, I tried that, but problem with this approach is that it disables script for component, not the whole template.
artf
Once the editor and its components are loaded it's hard to think about disabling JS, think about a component with custom scripts that binds events all around the DOM (maybe even using some external plugin). The only way it could be possibl...
Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my modal block: The problem with this code is that grapesjs wraps whole content with div wrapper when user drops it on canvas and everything inside this div isn't editable, selectabl...
Ju99ernaut
Maybe use the layers panel or disable the script using a trait as shown on issue #2772
Ju99ernaut
I think the content field is treated as plain text so use the components field instead:
kuhelbeher
@Ju99ernaut thanks for great suggestion. It worked. But now I have different problem - how can I select "Open modal" button for styling or modifying? When I click "Open modal" button it opens modal. Can I somehow prevent firing this event?...
Hey @artf, Steps: Open Canvas with GrapesJS, select any of the components, then click on Go to Random, I get an error that says "Cannot read property 'models' of undefined". This only happens if I call the editor.destroy() before navigating to a different page. But if I remove the destroy, it works fine... Demo: https...
artf
Thanks @cartifon should be fixed in the next release
Nelida27
Hello, I have the same problem now that I moved to latest version. Should I call editor.destroy()?
Hi, I have Button-Link custom component created, and when I dragged into canvas for the first time component is detecting its attributes and styles. But after saving the component and reloads the page, custom component type is missing from that component instead its showing Link type component. How to preserve the cus...
DmitryTar1
You should add some type to your component and then parse it in isComponent For example the similar button link const components = editor.DomComponents; const link = components.getType('link'); components.addType('custom-link-button', { mo...
Ju99ernaut
@krishnaeverestengineering How are you saving and loading your work
artf
Read the documentation please https://grapesjs.com/docs/modules/Storage.html
Hey, we are currently using grapejs to create liquid templates (shopify syntax). The way its currently implemented will leave the template, for example `{{ name }}, unrendered within the editor. This is due to the fact, that even if the gjs-html gets interpolated by the server after a store/load cycle, the editor stil...
artf
Well, if you load back the HTML you'll lose all the component information (kind of explained here). As an analogy, try to think about Photoshop files and JPG as an output. If you load back the JPG you won't see the layers used in your Phot...
I am using GrapesJs to define Freemarker FTL templates. I am seeking an issue when my custom component HTML has been changed after inserted into canvas or imported through Import template component using newsletter plugin. So my original HTML content looks like: into which corrupts my template. Is there a way to bypas...
tomazkramberger
@tomazkramberger did you find a solution to this problem? @ShenolHusein Yes, i did. Here is the link to solution https://stackoverflow.com/questions/63475404/html-editor-removes-freemarker-tags-inside-table-tag
ShenolHusein
@tomazkramberger did you find a solution to this problem?