My intent is to create a block that should allow only image components (I'm using the default one from grapes-blocks-basic) to be dropped inside it. I have the following test code: However, when I run the above code, what happens is that I can't drop an image component inside the Image Container. The green drop cursor...
roytang
This fix works. Thanks!
artf
@roytang your code seems ok, probably the problem is just because your component is "too much empty" so the mouse pointer just can't get in. Try to add a little bit of padding and see if it works
roytang
Mmm. I have image-container styled with width and height 100px. Also, removing the droppable property in the extended model allows me to drop text and images inside it.
This is not a bug but an implementation question. If this is not the right place to ask these questions, please let me know. We're working on an implementation where we want to use GrapesJS to allow users to create an e-mail template. As part of this implementation we are working to create mail-merge functionality: we...
artf
Have you checked API-Rich-Text-Editor? You can add a custom action like this
artf
Probably in the next release, this feature will be available. So textable will be just another property, this will allow any component to be dropped inside Text components. Here is the code of the component from the example above:
mathieuk
Yes, I've used that and I've pretty much got that working. The difference is that I am not using a text placeholder like you are. I'm actually inserting a block (with a corresponding 'type') so that I can further configure these placeholde...
I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also want to modify the HTML in the view (to add some content that I want shown in the editor but not in the saved HTML). I tried something like this: The issue is if I modify the rende...
roytang
I tried the above, as follows: But I'm still unable to edit the text in the h1 and p elements after dropping the component on the canvas. :(
artf
Sorry I didn't notice this you basically remove elements with models and attach a new string as HTML (the editor can't access their models anymore). If you want to add a new component you should do it via models (eg. view.model.append('<di...
artf
You can extend the Text Component instead of the base one
Previously saved css rules using remote method are not showing in Style Manager. remote json response {"gjs-assets":"","gjs-css":"*{box-sizing: border-box;}body{margin:0;}#c743{background-color:#b0aeae;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#c743{background-color:rgb(76, 70, 70);}body...
I'm trying to build a custom resizer for one of my components. It's a grid/column layout based on Flexbox and I want users to be able to resize one column (to a fixed width) and have the other columns fill up the remaining space. I already have a custom component for my column, so I added resizer configuration to it,...
artf
Yeah, you're right. This happens just because functions are not serializable, therefore when grapesjs calls JSON.stringify(Component) are simply ripped off. The solution for your case is to override toJSON method in the custom Component
thecodefish
Thanks @artf that did the trick.
sakshigarg9
@thecodefish How do you change initial state of the Resizer properties? Where does this config go if I'm using the grapesjs-preset-webpage, simply under grapesjs.init{...}? I want to fix a minimum dimension for an image component specifica...
I have a API rest that receives and supplies the contents of the editor items. The entire store created by the editor is saved: assets, components, css, ... Each item is accessible via route (eg editor / page / 4), when loading the route API returns to the content of the item, however when calling the action editor.st...
artf
If for content you mean html/css, probably you're looking for editor.setComponents('<div>...')
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
I am calling a function which is outside the component same as explained in issue #395 but it is returning a string instead of a function I want to call defaults.drawGauge function in script and pass the id that is created dynamically I am stuck please help me out grapesjs.plugins.add('liquid-gauge-plugin', function(e...
artf
If you want a function attached inside the string you have to pass a string
suchithmahadi
Sorry @artf i didn't understood what exactly you are saying, can you please elaborate? Here i want to call the function ("drawGauge" which is in 3rd line) in domComponents script function. Please explain related to the problem given above....
artf
Inside your script property, {[ d ]} will be replaced with a d property of the componet and it can't be a function, so if your final result should be like this: you have to set a string for d
Hello, First of all, thanks for contributing such an amazing js framework. I am very new to grapesjs. And github too. https://github.com/artf/grapesjs/wiki/Components-&-JS#template-related According to grapesjs wiki, I load js links inside the canvas as the above codes and it works fine. But when I try with css links...
artf
You were almost there :)
ronaldaug
Thank you so much @artf , it works like a charm.
coder-strange
You have to include separately while rendering, it won't come in getHtml() or anything.
We want to create some custom components whose style changes according to an external theme css (there can be different themes), and we want those styles to appear in the canvas while editing.
roytang
Please ignore. I ended up injecting the stylesheet link using javascript into Grapes' canvas' iframe // insert external stylesheet into the grapesjs window var iframes = Utilities_GetElementsByClass("gjs-frame", "IFRAME", document.body); f...
artf
You can inject scripts/styles via canvas config option
Due to https://github.com/artf/grapesjs/issues/436, I cannot rely on StorageManager's Remote Load method to load a template from a REST endpoint, so I'm falling back to alternatives as editor.setComponents() and editor.setStyle() (being used within a command, so grapesjs and editor are available). Unfortunately, those...
artf
Hi @santiph well, if the problem is onbeforeunload you can disable it with noticeOnUnload
santiph
Hi @artf I need to warn the user know of any unsaved changes consistently. And skip it when there's nothing new to be saved: When a new empty template is created, right after saving or right after loading a template, no confirmation messag...
santiph
I could test it with remote storage fully: onbeforeunload is disabled, as expected, on closing right after saving. Unfortunately, it's still being displayed on closing right after loading a new template. After a little debugging, loading a...