GrapesJS Issues

Search parsed GitHub issues, see highlighted answers, and open the original discussion when needed.

3464 issues found

#2998September 3, 2020by svalenciano813 answers
0 reactions

Insert HTML+CSS inline into [help wanted)

I have the nice ckeditor 4 editor built into grapesjs with this components: grapesjs: 0.15.8 grapesjs-preset-newsletter: 0.2.20 ckeditor.js: 4 grapesjs-plugin-ckeditor - 0.0.9 My project generates newsletters (HTML + CSS) to be storage in database. This newsletter it can be edited and save it again as many times as yo...

Abhisheknanda1344463

Hi @svalenciano81 Did you try this? var cmdGetCode = cmdm.get('gjs-get-inlined-html');

svalenciano81

Hi @Abhisheknanda1344463 I need the reverse process. I have the code inline and I need to separate it into components and styles separate.

artf

To load back your templates you shouldn't use the HTML/CSS, you have to store and load the JSON https://grapesjs.com/docs/modules/Storage.html#store-and-load-templates

#2996September 3, 2020by kAvItHa-cL1 answer
0 reactions

Modal customization

Hi, Is it possible to customize how modal appears something like properties window in visual studio. Instead of open modal , on focus should show details on window aside

artf

I don't think you should use the modal in this case, you can create your panel/div, set a listener on component selection component:selected and render there your properties

#2995September 3, 2020by jayeshmotwani2 answers
1 reactions

QUESTION: Float Left/right removes the component from the container

I have observed that whenever I align a component left or right (float left or float right), that component comes out of the parent container, however If I make it to 'None' it comes back inside the container in it's last position. I found this on live demo too. Refer the attached screenshots Could you please let me k...

Ju99ernaut

The float property collapses the parent div. You can use this for reference.

artf

Yeah, unfortunately, that is how weird the float works, so if you're creating a builder for non-tech people avoid that property 😬

#2991September 2, 2020by Abhisheknanda13444633 answers
3 reactions

Editor.getSelected() giving me undefined.

Hi @artf I want to append dynamic pages to the specific link trait. Here is what i am using. const component = editor.getSelected(); component.getTrait('link').set('options', [ { value: 'opt1', name: 'New option 1'}, { value: 'opt2', name: 'New option 2'}, ]); This is giving component is undefined in the console becau...

Ju99ernaut

You can check if component.getTrait('href') gets anything first:

Abhisheknanda1344463

Thank you so much @Ju99ernaut Now,It working perfectly. Really appreciate your help. Closing this issue.

Ju99ernaut

You can add that to each component type using:

#2990September 1, 2020by Joshmamroud3 answers
0 reactions

QUESTION: Is there a way to use different variations of the same style property?

Note: This is in the context of the Style Manager. Is there a way to use different variations of the same style property? For example when I use the text-align property on a non-text node component I'd like the label to read "Align Content" with the options of "left", "right" and "center". However, when the "text-alig...

Ju99ernaut

I don't think that's possible using the API, also does text-align work for non-text components? You'll probably want to use the align-content property from flexbox

artf

You should try to use Component's stylable-require property to show the particular style property (marked with toRequire) and unstylable for the one you don't need.

Joshmamroud

@artf Thank you for your response. In this case, I would still have an issue using the align-content property with flex columns and rows. For columns, I'd like the options to read: Top, Center, and Bottom and for rows I'd like the options...

#2989August 31, 2020by Abhisheknanda13444632 answers
0 reactions

How to append button in custom div

Hi @artf Is there any way to append all the defaults buttons of grapesjs in custom div like the same way we are append the style manager. here https://codepen.io/artf/pen/MQpZPj Thanks

artf

As you can see from the example, you can specify the Panel target via el: '#' option, which then should be able to contain your buttons

Abhisheknanda1344463

Hi @artf Could you please confirm this-way panels: { id: 'options', el: '#blocks'} I tried this is not working or do i need to create new button again for my new panel? Am i missing something? Thanks in Advance

#2988August 31, 2020by Abhisheknanda13444631 answer
0 reactions

Trying to override of link trait

Hi @artf I am trying to add new types of trait Below is my code.It's updating the values in code also but on reload link trait will set to default. Here is my code editor.DomComponents.addType('link', { model: dModel.extend({ defaults: Object.assign({}, dModel.prototype.defaults, { removable: false, traits: [ // strin...

Abhisheknanda1344463

It worked after placing a code in plugin.

#2987August 31, 2020by thusharaprimus2 answers
0 reactions

XX Language support

Need to support the Arabic language.

artf

Would you like to create a PR?

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...

#2986August 31, 2020by FlowingCloudRTL1 answer
0 reactions

BUG: Addframe method not working with the component props

Version: "0.16.18" Are you able to reproduce the bug from the demo? [ X] Yes [ ] No Steps to reproduce the bug in web builder demo: Open the demo and the console, enter editor.Canvas.addFrame({ name: 'Mobile home page', x: 100, // Position in canvas y: 100, width: 500, // Frame dimensions height: 600, // device: 'DEVI...

artf

Thanks @FlowingCloudRTL for the report but the multi-frame feature is still far from being complete so I'm not surprised about the issues. If anyone is interested in bringing this feature further, please let me know