#2922July 27, 2020by RJCAM3 answers
Hi, so, in this issue #2861 we can get all the css of a selected element and it's children with: But if I want to get all the css but without specific component and it's children or exactly the inverse of the above Is there a way to do this?
mcottret
Hi @RJCAM ! I don't think there's a built-in way to achieve this, but building on top of the answer you linked, you can recursively concatenate all the components' CSS, filtering out the selected one & its children like the following (assu...
mcottret
@RJCAM I'm sorry I just noticed that my previous answer wasn't working because retrieving the CSS of a component with children also included the children's CSS (it hence produced duplicated styles, as well as including the selected compone...
RJCAM
Hi @mcottret, thanks for your response I think your right, I'm going to edit your code to make it work as I expect I really appreciate your help, thank you!
#2921July 27, 2020by Davidvlv3 answers
Version: 0.16.18 Are you able to reproduce the bug from the demo? [x ] Yes: https://jsfiddle.net/ju1a0onx/ What is the expected behavior? Autosave should always call the "store" command after a style change, even when the classes are disabled What is the current behavior? When you disable all classes on an element (Or...
artf
Thanks for the report, there is a bug with the editor.load method, which could be currently patched in this way Actually, if you have used editor.load() only because it doesn't load on start, that because you have to define your custom sto...
Joshmamroud
@Davidvlv I'm experiencing the same issue. I believe it's a combination of the avoidInlineStyles: 1 in the config and no class being selected. It seems to work as expected with avoidInlineStyles: 0
Davidvlv
I've tried it out, and that setting does stop it from not saving when it should, but it introduces some other issues on our end with how we're using the output later on. We turned on avoidInlineStyles to avoid these issues.
#2920July 26, 2020by wfcheng3 answers
I am trying to replace the default RTE in grapesjs with summernote. I got some help from the author of summernote and got this codepen to work somewhat, but the summernote author concluded that: But grapejs p element is a content in iframe. In other words, there is a structure where a p tag exists in an iframe and ui...
wfcheng
Made some more changes and now the summernote toolbar appears correctly but only bullet formatting works. The new codepen is here. @artf Any pointers would be greatly appreciated.
timramseyjr
@wfcheng Did you ever get anywhere with this? The codepen includes the canvas script/styles which adds the resources inside the iframe, so I was a little confused what summernote author was referring to.
wisecheng38
@timramseyjr I ended up just adding more buttons to the RTE toolbar to allow applying font styles and color on selected text, even though the grapesjs documentation recommends to use the style manager. I found that it is more user friendly...
#2919July 26, 2020by BerkeAras2 answers
Version: 0.16.18 Are you able to reproduce the bug from the demo? [X] Yes: https://codesandbox.io/s/empty-night-8q733?file=/index.js [ ] No What is the expected behavior? The Element "Link Button" should not be in a div. There should not be a div, just a 'a' tag What is the current behavior? Custom blocks are wrapped...
mcottret
Hi @BerkeAras ! As shown on the Getting Started page, you can specify a tagName property when defining custom Blocks & Components to override the default div tag. Cheers !
artf
You're passing a description for a component (<div> as default) and then adding inner content (<a> tag) to that component
#2918July 25, 2020by neon123453 answers
Text imported directly to the wrapper is not removed from the canvas with the component. To verify one can import simple texts multiple times to the demo and watch how they combine instead of replacing the previous one. Adding this seems to help: editor.DomComponents.addType('textnode', { model: { removed() { var el =...
artf
I don't follow your example, can you illustrate exact steps to reproduce, please?
neon12345
Go to the newsletter demo at https://grapesjs.com/demo-newsletter-editor.html and use the "Import template" function with simple text like "hello" but no html (or combine it with html and text on the root level). Repeat this and the text o...
artf
Thanks @neon12345, I was able to find the issue and it should be fixed in the next release
#2917July 24, 2020by cartifon3 answers
Hey @artf, I'm trying to hide style properties based on the selected element. for example, when I drag and drop an image on my GrapesJS, I would like to show only the width property, but the unstylable/stylable attributes are not working. Version: "grapesjs": "^0.16.18", Are you able to reproduce the bug from the demo...
mcottret
Hi @cartifon ! I believe the stylable attribute only works on Components & not Blocks as in your example. The following should do the trick: Cheers !
cartifon
I have another question, would the unstylable work in the same way?
cartifon
Hey @mcottret, thanks for the help. Yes, it does work with that! Maybe the documentation should be more clear on that.
#2916July 24, 2020by mcottret2 answers
Version: 0.16.12 Are you able to reproduce the bug from the demo ? [ ] Yes [x] No (it does not include a custom RTE) What is the expected behavior ? When using a custom RTE, the generated / exported code should correspond to the RTE's generated code What is the current behavior ? The generated code corresponds to the...
artf
Your solution seems to be correct 👍 a PR would be really helpful
mcottret
Awesome ! artf/grapesjs-plugin-ckeditor#39 & #2977 opened.
#2915July 24, 2020by maxaggedon1 answer
React-pdf is cited in the docs but I don't see any other mention of it anywhere... Does someone know if a working project was ever made using grapesjs as a pdf template builder ? Any info about how to integrate both would highly appreciated =)
artf
You can create custom components and reflect the behavior of React-PDF components (similar to what we've done with MJML) so it's about understanding how custom components work.
#2914July 23, 2020by BerkeAras2 answers
What are you trying to add to GrapesJS? Adding custom styles (like background) to element using ID. Is there an alternative at the latest version? [ ] Yes (descripe the alternative) [X] No Is this related to an issue? [ ] Yes (Give a link to the issue) [X] No
artf
The proper way would be this:
mcottret
Hi @BerkeAras ! Apparently it is undocumented but editor.Components.allById() might be what you're looking for, eg: Hope this will help, cheers :) !
#2913July 23, 2020by neon123452 answers
The output of "JSON.stringify(editor.getComponents())" shows that the src of an image is stored twice. { "type": "image", "void": true, "status": "selected", "content": "", "attributes": { "id": "iy3c7", "src": "data:image/png;base64,..." <--- 1. }, "src": "data:image/png;base64,...", <--- 2. "activeOnRender": 0, "ope...
artf
@longdoan7421 I think we can delete it in toJSON method when the src is equal to attribute.src and ensure is loaded back correctly on load
longdoan7421
Hi @artf, I just took a quick look through ComponentImage. I think it is possible to drop the src property in image model and replace the code which use src in ComponentImage and ComponentImageView with the attribute.src. But I am not sure...