3,464 parsed GitHub issues — 370 solved · 90 open. Search, filter and explore battle-tested answers.
644 issues found
🔍 componentsHello, I have written a custom GrapesJS component. So what I'm trying to achieve with this custom component is, if I place 2 components of the same type in the GrapesJS canvas and on editing the style of one component through style manager should automatically update the style of the other component. Is there a way to...
Hi, I have a question, when I create a custom type component from the editor, what would be the next step to show that component in my application? Currently I am saving the component data in firebase with the firestore plugin, the attributes that are stored in the object are the following: gjs-assets, gjs-components,...
Ju99ernaut
onRender simply specifies what should happen when you successfully place a component onto the canvas, whereas script is code that will be generated in your html inside script tags. Something like:
Ju99ernaut
I think in a production environment all you need is the html and css code generated by grapesjs.
robertraf
I understand that part, but if I want to render the component I have created it doesn't work. I'll explain a little, I have created a type of component that renders data from an endpoint, if I use the html and css code it doesn't work. Cus...
Hi, I'm currently trying to start the editor "fromElement", setting the following html inside the container: But when executed, grapesjs creates components inside the <p> tag even after setting the data-gjs-type attribute as text. What I'm trying to do is to present the paragraph to be edited as a single component. Yo...
alesub
@artf just to clarify: this bug is based on the expected behaviour you described on this comment: https://github.com/artf/grapesjs/issues/576#issuecomment-348550694 And how the divs with text behave on the demo page. Please let me know if...
alesub
Hi, any luck reviewing this issue? What got me lost is this doesn't happen on the demo page, any bold or italic text doesn't become a separate component after saving or reloading. Any insight will be greatly appreciated, Thanks!
artf
Closing this one as now this is the default behavior. There is also a possibility to customize the behavior via disableTextInnerChilds option added from https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.2
I am researching how to make a template with server side expressions that will repeat a component (foreach) or completely remove it (if). My backend parses templates with mvel. What I am thinking is to add a couple of settings to all or some select elements. For example, to a <div> of a Cell, so it looks like this: <d...
Ju99ernaut
To surround an element take look at toHtml, you can search it in the issues for examples. In any case I don't think it's a good idea to replace the default component type, I'd suggest creating a new component that extends the default type...
fedd
The docs for components might be helpful I've written my code based on this article. It says,Updating component types is quite easy, let's see how: .... // The defaults property is handled differently // and will be merged with the old def...
artf
@fedd you can add your new traits in model.init function
DescriptionThe bug is reproduced on the current demo Expected behavior When a tooltip is removed its css is removed What happens instead ? When a tooltip is removed its css is not removed Steps to reproduce on the demo Clear the canvas Drag a tooltip Remove the tooltipClick on Import button on top toolbar , the toolti...
artf
Yeah, I think you're right, probably replacing with might fix the issue, would you like to check and create a PR? :)
meyerco
@artf Maybe this code to keep the code generic ?
artf
@meyerco 😅 yeah sure, sorry, it was a copy-paste from my try
I am currently working on a web application for which we integrate this project as GUI editor to customize the environments. Our GUI components are loaded and parsed from the database. We can identify e.g. a button, data grid, etc. by an ID (e.g. 17190fbd-13d6-430f-bb32-1a09d2151a77). These components are then built f...
dintifla
a short update: I managed to get the the selectors in the right order when using selectors.unshift(idSelector) instead of selectors.add(idSelector) in above sample. Now i still have the issue with the missing space between the id- and the...
artf
Hi @dintifla SelectorManager is not meant to work like that (you can only have a mix of classes .class1.class2 but not with IDs), but honestly I don't understand what is your goal of using the SelectorManager at all. If you need to query a...
dintifla
Hi @artf Thanks for your reply. In the end it is not just about querying a component, but generate the CSS for it. I don't need the HTML since my application is designed in a rich client application, stored in an abstract representation in...
Hello, i would like to extend the image type with some options, specially with a redirect option on click. I tried this solution after the editor initialization (i precise that i work in full javascript and non Node.js environment) : editor.DomComponents.addType('image', { isComponent: el => el.tagName == 'img', model...
Lerdouille
Hi again, here is the final solution to create a a href image : Now i have to found how to check the URL integrity when you want to update the href variable Best regards
felipesotero
I have the same need in my project. I tried creating a block, but I couldn't get the initial popup to "pop". I tried creating a component with a plugin, but there's too much work that I can't understand how it can connect to each other. An...
artf
You've added this listener change:url but the name of the trait is name: 'href', so just change it with change:href
Good morning, please I need help to create templates and then load them, I really cannot do anything, I want to be able to save templates, later load them, I have been days without trying, I am new to programming I have followed everything to the letter , and really the only thing that I am missing are the templates p...
Ju99ernaut
At the bare minimum you need commands for saving the templates and opening a modal that shows the saved templates, and to handle loading a template onto the editor. To save a template using local storage you can use something like To open...
Whenever i am trying to add multiple traits of type text with all different conditions and on different tags/attributes but it will take only last one at every traits conditions. Please help me out with the solution. Below is the code editor.DomComponents.addType('text', { isComponent: el =>( (el.attributes&&el.attrib...
amitbhoj777
Got the solution. we need to extend type text in traits. Thankyou. editor.DomComponents.addType('paraJustify', { isComponent: el => ((el.attributes && el.attributes.paraJustify && el.attributes.paraJustify.value)), extend: 'text', model: {...
Hi I was trying to use grapesjs on visualsource pages. Following is the init function - initEditor: function(){ var self = this; this.editor = grapesjs.init({ container: '#gjs', fromElement: true, height: '500px', width: 'auto', storageManager: false, panels: { defaults: [] }, blockManager: { appendTo: '#blocks', bloc...
artf
Create a reproducible demo please
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...