3,464 parsed GitHub issues — 370 solved · 90 open. Search, filter and explore battle-tested answers.
644 issues found
🔍 componentshi, thanks for your great project. I have a problem confused recently. I want to import some react components to my projects,I changed this Jsx to html through renderToStaticMarkup method,and get the result <button type="button" class="ant-btn ant-btn-primary"><span>test</span></button> and I also import this class by...
artf
Do grapeJS provide support moving component within a block.If yes, please redirect to some material? Moreover I want to restrict the component from moving outside the block? Is it possible to do so? I see GrapeJS do provide drag and drop feature. Can you point me where I can start that too?
artf
Start by checking all the properties available on Component instance, especially (for your case) draggable and droppable
I want to change the names of the default components that you can drag and drop onto the canvas, so that it shows different names in the layer manager and other places, mainly because of translation into other language. Examples: Body, Text, Row, Link, Image, etc. How would I do that?
giorgiosjames
It seems the display name for a component in the canvas and the layer manager is the block's type id, with the first letter upper-cased. From what I can tell, then only way to change this is to make a new type extending the old one, with a...
artf
You can update their names in this way. IMPORTANT: place the code in a plugin otherwise, you risk to the see updated names only with newly added components
lajby95
Thanks. This works nicely when adding new components, but say I load a preset html+css using editor.setComponents(html) and then start editing that later. The preset's HTML tags get the various component names (Text, Box, Image etc.) assig...
I have created a component var comps = editor.DomComponents; var defaultType = comps.getType('default'); var defaultModel = defaultType.model; var defaultView = defaultType.view; comps.addType('module', { model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { droppable: false, edit...
mksmanish79
I am able to fix this by creating plugin
When I save my page in a database refresh, the html and css are set like so $.ajax({ url: "../feeder.php", type: 'POST', processData: false, contentType: false, data: fd, success: function(result){ var response = JSON.parse(result); html = response.html; css = response.css; //editor.CssComposer.getAll().reset(); edito...
artf
@alikabeer32 follow the BUG template please, without a demo it's hard to understand the issue
I am trying to save the template data into the database. Currently I have it working successfully. It posts the Assets, Components, Styles, Html, and CSS data (just like how it saves into the browser's localStorage) to a PHP script. As I found out, the Components part ( editor.getComponents() ) contains the Html struc...
alikabeer32
Is your javascript code actually getting set? It might be because the framework, by default, doesn't set js when you run editor.setComponents(yourhtml); const editor = grapesjs.init({ ... allowScripts: 1, }); this might help you. All the b...
lajby95
@alikabeer32 Hmm, that seems to have solved the problem. Thanks!
Hi @artf , I have created some custom components with traits. I save the file and reload not able to see the attributes in the editor and in preview mode. However those attributes can be seen in the code manager. Is there anyway to make show it? If i give any event based on the attributes events are not getting trigge...
artf
Please read carefully this part https://grapesjs.com/docs/modules/Storage.html if it's still not working, open a bug issue and create a reproducible demo
I'm currently using GrapesJS to build an editor for blog posts in my website. One of the things that I wanted to change from the default behavior was the inability to "unlink" a piece of text that had been converted to a hyperlink using the rte toolbar. So I wrote the following function: The function allows you to uns...
artf
Is this an issue with how components are handled by grapesjs? Could you help me understand why this might be happening and what I can do to address this? Yeah, it's how the built-in text component and RTE work, so I'd just update your resu...
rahuloftheramaneffect
This worked perfectly! Thank you!
I need to limit certain Dom Components to one, because it would cause issues when the page is published - but I can't seem to find a way to delete the component within its own init(). Is there a better way, as it doesn't seem healthy to delete someone before it's fully created. Thanks
artf
It would make sense to move such logic to a parent component
https://github.com/artf/grapesjs/issues/906#issuecomment-381403858 I need to remove the html content from editor.getSelected(). Now I'm using, While I use selectedContent.set('content', ''); it remove all the inner html. But didn't remove the parent tag. For example, Before: <h2 id="it4a"><p>Sample Update Check Done</...
afdallah
Have you seen this #1077 answer by @artf I think it's suited with your case.
prabha-912
Yeah I tried @afdallah, It returns indexOf undefined. Let me try again. Thanks for your response :)
prabha-912
Hi @afdallah @artf I tried the above concept. It works fine in first time. While I try to update second time, it didn't work.