I have downloaded the grapesjs-webpage-preset and I want to customize it according to my requirements so I've added my own html and style in the index.html file to make that UI customizable. Now, how can I make a div in my html code read only. I tried adding data-gjs-editable="false" data-gjs-removable="false" to the...
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.
Hey @artf , COuld you give your help on this one? I want to disable the user to able to select the wrapper block (body) but I still want to let them style it. So I was thinking to add a custom sector that would be displayed for all blocks but, the styles applied in that sector would be applied specifically into a css...
arthuralmeidap
There are several drawbacks to my approach but, since on this app we are not using the Selectors for the Style Manager, look what I did; I added a custom target property to my new sector. I started to listen the change:open for each sector...
arthuralmeidap
Just an example: The user has selected a Text Block. On the Style Manager panel, would display as it is today. The css selectors applied to it and the sections like General or Decorations to style it and besides that would have some Global...
artf
Yeah I think it's possible, you should append a new sector with your inputs manually on editor load and on input change update the wrapper style editor.getWrapper().addStyle({ color: yourInputEl.value }) or if you need some specific CSS ru...
Hi, I have two elements with the same classes. I want to apply style changes with style manager to one of these two elements. I add ID but the style applies to the class not to the ID. What can I do?
arthuralmeidap
At the Style Manager painel, you have a way to select/unselect to which css selectors (classes or id) you want to apply the styling. Click on a block and open the Style Manager panel. You will see all selectors applied to that block.
abozhinov
Thanks ... The UI is not user-friendly.
abozhinov
@artf I think the problem is in the ICON. I edit the sources code and replace it with SVG also rewrite the style. Do I have an option to replace the TEMPLATE for each section without editing the source code? <img width="1132" alt="screensh...
Hi, I try to use a new modal but when i change the content, the image modal change too : var modal = editor.Modal; modal.setContent("<div>test</div>"); How can i do to keep the image modal and have an other modal to use in my traits? Thanks
artf
Currently, it's not possible to have multiple editor.Modal instances
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 trying to use angular directive. On any of the block content, for example bm.add('radio-block',{ label:'Basic Form Element', category: c.category, content: '<input type="text" name="username" id="username" ngModel> ' }) on export ngModel will be ngmodel So what will be possible solution so that it display ngModel...
artf
ngModel is converted in ngmodel by the browser (HTML5 doesn't accept uppercase for attributes) You can skip the parser by passing a component object
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'm trying to integrate the library with Angular7, but got problem when moving container <div id="gjs"></div>into the material component (stepper) in this case. I put my code in https://stackblitz.com/edit/angular-qa6gqz (error with grapesjs doesn't happen in my local environment). Can you helkp?
mcrodrig
For future reference: Problem was related to executing the grapesjs.init call before the html was rendered and the <div> inside the mat-step was not available.
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.
Hello @artf I have one block into block manager like As per above script inside the block, i want to add dynamic HTML content while this block is rendered into the UI. I know that i don't need to change DOM. But need to change using model, but i don't know how can i change it using mode by id/class. Can you please hel...
artf
No @AkibDeraiya123 if you're trying to access the model from the script it means you've totally misunderstood its concept, please read carefully here https://grapesjs.com/docs/modules/Components-js.html#basic-scripts script is for the fina...
AkibDeraiya123
Thank you for the response @artf , So, it means i can't load dynamic content into blocks while it will render into the editor? If yes then how can i? Can i replace whole block's html using this.innerHTML = 'New Html content'?
artf
Of course you can, but not via script property. You have to create a custom component and update there its model
Ajax call which is uploading image file in assests folder It's working fine to add an image from the local. But in another scenario, It's not working. Please have a look Drag image block Select an image Delete that image Add the same image again on same the place, "uploadFile" function is not calling It's not allowing...
artf
We have to clear the file input once the image is selected
I had been using editor events and I noticed that component:mount event fires multiple times when a component is dragged from blocks to canvas, you can confirm it in your JSFiddle Starter.
artf
@ateebahmed please don't open issues like this. Follow the template
ateebahmed
okay will reopen it
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 want to select my component whenever it is dragged from blocks to canvas and rendered, I have tried with registering events on component:add, component:mount and calling editor.select(component), passing the component I get from callback, but it is not properly initialize or has properties missing, like its type is...