I have a problem with video component. I select provider and add the source of the video and then save the html, but when i load the html again to the editor video component source gets replaced with < svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 24 24" style="fill: rgba(0,0,0,0.15); transform: scal...
artf
Hi @olgertpysqyli you should follow this and rely on JSON data for editing https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates
Hello.. I need to put af custom name on my components. I can do that by adding data-gjs-custom-name="myname" but how do i do that on allready inserted elements? I tried to editor.SelectorManager.getAll().each(selector => $('h1').attr("data-gjs-custom-name","h1")); but its not working. How is it possible to put a name...
artf
I can do that by adding data-gjs-custom-name="myname" Use name instead of custom-name (this one is used for Layers when you edit them), so data-gjs-name="myname"How is it possible to put a name on all h1, for example? You can create a cust...
[QUESTION] Hi! I'm retrieving dynamic html,css and js codes from the database. How can I create Blocks with this? Currently, this is my code, ``` editor.BlockManager.add($aBlock['name'], { id: $aBlock['name'], label: $aBlock['name'], category: $aBlock['category'], content: $aBlock['html'], style: $aBlock['css'], scrip...
cristianumali22
Hi @pouyamiralayi , thus, doing, content: '<div></div><style></style>' will seperate the HTML from CSS in the download code feature of GrapesJS? Note that in every blocks of code, there is different HTML, CSS and JS. Is the css of, example...
pouyamiralayi
@cristianumali22 your code looks fine and it is not executed before grapesjs initialization because you are passing the reference and not actually calling it! i suggest using the grapesjs cli because it is doing all the setups for you and...
pouyamiralayi
@cristianumali22 please consider putting both your `html and css inside the content` property like this: for including scripts, you must define a new component type and then proceed to component & js Cheers!
I want to make an external html element able to be dragged into GrapesJS, like how you can drag in a block and it will add something. I have a sample, with a div with draggable="true", a regular div and an image. The image drags in fine and if you select the regular div's text and drag that in it works, but the div wi...
artf
@Davidvlv HTML5 D&D doesn't work like that, adding draggable="true" is not enough. This just tells the browser "Hey you can drag me!", but you have also to specify WHAT do you want to drag (using dataTransfer.setData API). Here is your exa...
sdrebel
Have u tried this? editor = grapesjs.init({ ....... dragMode: 'absolute', // 'absolute' | 'translate' ...... }) And also you can set drag mode for each component. https://grapesjs.com/docs/api/component.html#index
Davidvlv
Hi @sdrebel This doesn't solve my problem. I have attached a video showcasing the jsfiddle - note the div with draggable="true" doesn't drag into the editor. grapesjs import draggable.zip
Is it possible to add an extra button to call any other action inside the default asset manager? Something like this: <img width="895" alt="Screen Shot 2020-02-21 at 16 45 45" src="https://user-images.githubusercontent.com/26910184/75078089-48385600-54ca-11ea-9ad0-6279e7a8b20e.png">
Hello, We are having a major issue - our layouts use copious amounts of display: flex; flex-direction: column;, and this is causing extreme amounts of lag in Chrome and Safari browsers (not Firefox). If the flex-direction style is set to row, there is no slowdown at all. Sample: https://jsfiddle.net/gkeft254/ click on...
artf
Yeah, it's definitely slower, not sure what is really happening but at the first guess, it might be this function which checks if the component is a block (eg. div) or an inline element (eg. span) https://github.com/artf/grapesjs/blob/1214...
Hello, is there a way to set a modal's width, its currently set to 850px by CSS, but I would like to create a dialog with a small amount of text and its too big for this: But it would be great to get this: Without overriding the CSS, because I would still like to use large modals. I checked the source code and the doc...
ronaldaug
For those who don't know how to use modal attributes. You can add option opts.attributes to modal's open method as below. Because I didn't find how to use it in the documentation here.
kaoz70
OK, what I'm thinking is to create a function to be able to set the width like: setWidth('400px'), and also a method to set custom attributes: setAttributes({'data-custom-attribute': 123}). I think 2 functions are needed because the width...
kaoz70
Hello, sorry I'm piled with work now, if @sunnykgupta can give this a shot it would be great.
I see that the version numbers are incremented, but the package is not published on npm after 0.15.15. Time for a 0.16 😃 Other issue about npm: https://github.com/artf/grapesjs/issues/2568 (not sure if related)
artf
It might happen to see a new build available in the dev repository but that means the version is not yet stable to be published 😉
Hi @artf, Working with Grapesjs has been great so far. It's easy to use once we understand it. I just have one suggestion, is it possible to include grids and scale options in the editor?
artf
What do you mean by grids and scale?
sdrebel
Hi @artf, Attached the image. Something like this
artf
No, this is not available and not even planned, but if someone wants to try to integrate it (even via a plugin) please let me know
Good day! how can am I going to create a sub-category to from the parent category? Is it possible like the image attached? PS. Image is only edited to show what I wanted to do.