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