@ateshuseyin @artf - Thanks for the great plugin. We started to use Grapes js in our project as an editor for building responsive email templates. In order to achieve responsive emails , we have two choices.MJML - https://mjml.io/ - working in Major email clientsCustom HTML/CSS - https://webdesign.tutsplus.com/tutoria...
artf
Is it possible to reduce the size? Can't do much about it, the size is big because I had to bundle the MJML core inside it, as there is no client-side bundle for it.Shall I proceed with this MJML or custruct my own components using Custom...
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, I tried to figure this out by myself, but I'm feeling I'm going a little bit in circles. So I hope you will have some time to read this through and help me with the problem. I get an html template with multiple custom component tags => <custom-component-tag></custom-component-tag><custom-component-tag></custom-co...
FrciSmrci
@artf Thank you once again, will debug with this in mind. :)
artf
Hi, I'd say this is the same as #260 so your const value = document.createElement('div'); which is purely a DOM element, without a binded model, is blocking the editor to select its custom-component parent. Solution:
artf
The highlight is applied via gjs-comp-selected class which uses outline property, so check via inspector what is going on, probably you have some kind of reset property on them (eg. outline: none;)
When html attributes are true or false, the should either exist or not exist. For example, required. This don't have a value in HTML5. Valid (not required): Valid (required): Invalid (not required): Invalid (required): When the HTML grapes is then rendered outside Grapes and the input is checked if it's required, this...
nojacko
@artf Thanks for the quick solution but it doesn't appear to work. Both inspecting the Grapes source and calling getHtml() return required="true" and required="false". I'm guessing because the attribute is a boolean value represented as a...
artf
probably the same as https://github.com/artf/grapesjs/issues/912#issuecomment-373208517
mikereem
I think commit 9a71368 is not enough. It writes boolean attributes without their values to the html output fine. But when the output is read again by the editor, then the boolean attributes are not initialized. If the boolean attribute was...
This is a piece of code that i am an using: this.editor = grapesjs.init(this.config) const commandManager = this.editor.Commands commandManager.get('preview').run(this.editor) I want the editor to go into preview mode immediately upon loading. It does go into preview mode but the offsets are still displaying. Hovering...
artf
Yeah, you should make use of this
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.
Hi everyone, Is it possible to set focus in a section html with Grapes, like as an anchor? I have a panel button and it just select the section that I want but not focus to element. Here is the code: panel.addButton('options', [{ id: 'link', className: 'fa fa-th-list', command: function linkChap(e) { editor.DomCompone...
artf
If for focus you mean scrolling the view to the component, unfortunately, there is no such a method, but you can actually implement it by relying on editor.Canvas.getBody().scrollTop
Amir2828
Did you manage to make it work?
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.
Is it possible to have custom style property UI per element. For example, consider that I want the font-size to be shown as textbox for text components and as a radio for a custom component of mine. The font-size property can be in the same sector. How can this be achieved?
artf
Yes, I've used the same trick for the flex grid. In your Style Manager configuration create a property in this way then in your custom component model require the property
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.
Hi, I've been taking a look inside of the dom_components, but cant seem to figure out how to manually override the styling aspect. I need a way for the component to be able to save all new styles into the style tag instead of the actual css class. (Try moving a component that was styled with force css) and it removes...
ryandeba
Hi @Owchzzz, It seems to be baked into the core of GrapesJS that components will not have a style tag - see this example where it is explicitly removed. I'm not sure if modifying this behavior would completely solve your use case, but you...
Amir2828
So did you mange to find any complete solution that leaves the style tags intact with no changes?
amenk
The solution by @ryandeba seems to influence only the use of inline style attributes like <div style="...">. (but for me those were also not filtered out without overwriting that prototype. We are having the problem that is filtered out, n...
What do I do with gjs-assets, gjs-components, gjs-css, gjs-html, and gjs-style? and how do I load these things to my editor?
artf
gjs-html and gjs-css are your final results, so probably you would print them on some page for the end user. gjs-components and gjs-style contains the JSON data about your template so you have to use those if you need to edit the template...
josefph
@artf would there be problems if I would just insert the saved html and css to the editor to edit it? and not use the gjs-components and gjs-style?
artf
@pranzikkin if you use custom elements and you care about the consistency with editing your templates, well yeah, you'll get problems
Again, congratulations on the great job. We have heavily extended Grapes and we managed to add almost all the functionality we need. We plan to use it for mobile first pages. So we have set up the Device manager to default to "Mobile Portrait". Styling is done through classes, and we have extended all components to cr...
chthomos
I figured out how to make it mobile first and it solves my issue for now: Set the editor config.mediaCondition: 'min-width' and on deviceManager: [ {name: 'Mobile portrait', width:'320px',widthMedia:'0px'} {name: 'Tablet', width:'568px',wi...
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.
Hi everyone, let say i've added block <form> on canvas. When i adding next <form> (second time) , need to check: if weather this component already present on canvas, call function implodeComponents(presentedComp, recentlyAddedComp){} But, On event editor.on('component:add'... i can work only with recently added compon...
konstantin55000
Thanks for your attention. I just read the doc. And ended up with this solution: editor.on('component:add', function(currentComp) { if (currentComp.attributes.tagName == "form"){ var modelList = (domComps.getComponents()).models; var prese...
ionic666
@konstantin55000 hi ,bro ,domComps.getComponents() is getting all models,i just want to get button.how can i do it?thanks
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.