GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

336 issues found

πŸ” style-manager
#3240Jan 18, 2021by marcepoblet2 answers
0 reactions

UndoManager: combination between undo and redo is not working properly, lost some styles

https://user-images.githubusercontent.com/64096863/104953457-35adf180-59a5-11eb-85bd-2f84ffa24d83.mp4 The styles of the text and button blocks are lost after deleting them from the template, and undo the changes and redo them several times. The issue is that the styles applied from the blocks, are lost after apply the...

artf

It should be fixed in the latest release, please follow the issue template properly and ensure to use the latest version before submitting a bug

GJSBlock

Thanks for reporting this, @marcepoblet. Thanks for sharing your report about UndoManager: combination between undo and redo is not working properly, lost some styles. To help the team investigate and prioritize this: Please provide: A min...

#3238Jan 18, 2021by sizhousama3 answers
1 reactions

How to load external javascript,i tried all methods,Useless

I write html strings as blocks, and need to introduce a lot of external scripts and styles, but I tried all the methods, when I drag the block to the canvas, the script does not take effect, but styles can be loaded,I hope to get help。Load by appendchildinit load by canvas:{scripts:[...]} who can help me?

harsh201

@sizhousama I am loading scripts/stylesheets via canvas while initializing grapesjs editor and it works for me. More details can be found here. Hope it helps!

sizhousama

The console shows loaded

GJSBlock

Thanks for reporting this, @sizhousama. Great question about [Question]: How to load external javascript,i tried all methods,Useless. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...

#3235Jan 15, 2021by AnnaSu1 answer
0 reactions

"component:update" does not trigger when components are moved

Taken from https://github.com/artf/grapesjs/blob/dev/src/editor/index.js#L33 component:update - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback reproduce the buguse move API to move componenthttps://grapesjs.com/docs/api/component.html#moveclick arrow up/...

GJSBlock

Thanks for reporting this, @AnnaSu. The issue with "component:update" does not trigger when components are moved appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and...

#3231Jan 13, 2021by vatte214 answers
2 reactions

How to change gjs-ckeditor-format component

hi guys, we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components. I wanna know , could we change this option? I want to make my own custom component with for example [data-gjs-type]="anyDiv" and have the same functionality like in [data-gjs-type]="text". maybe someone knows how to change th...

Abhisheknanda1344463

@vatte21 To make your component editable.You've to extend the text type in your component like this way

vatte21

@Abhisheknanda1344463 Thank you! Ill try

abulka

@Abhisheknanda1344463 your code fragment gives me an error Uncaught ReferenceError: type is not defined on the line where is type defined?

#3228Jan 12, 2021by Abhisheknanda13444631 answer
0 reactions

Component Value is not changing

Hi @artf I've added a new component here is the code on selecting the h1 and h2 tag it's changing the value in the HTML section as you can see in the video but the content is not updating according to the tag. could you please help me with this? Thanks https://user-images.githubusercontent.com/20657737/104281764-03e3e...

GJSBlock

Thanks for reporting this, @Abhisheknanda1344463. Great question about Component Value is not changing. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specifi...

#3225Jan 9, 2021by Abhisheknanda13444632 answers
0 reactions

How to Update Style from checkbox Trait?

Hi @artf I am trying to update the style using the checkbox trait but it's not calling the function. Here is the code I really appreciate any insight that you can provide! Thanks

Abhisheknanda1344463

@artf Got it silly-Mistake move the init function in the model itself. Closing the issue

GJSBlock

Thanks for reporting this, @Abhisheknanda1344463. Great question about How to Update Style from checkbox Trait?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for yo...

#3223Jan 7, 2021by ianef3 answers
2 reactions

Create the canvas from a URL

I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in the editor based on Bootstrap 4 and other components like FontAwesome Pro and custom blocks based on these. I use Symfony's Webpack-Encore bundle to generate the scripts and style f...

ianef

That's a real shame. I didn't say anything about fetching from another site, what I wanted to do was keep it consistent with the rest of the project. Oh well, I'll keep looking elsewhere for an editor that integrates better with the curren...

artf

Hi Ian, if you need to load HTML content from a URL I can only suggest fetching it server-side and initialize the editor with that content (loading external resources in the browser would mostly hit the cross-origin issue), so, for how bro...

GJSBlock

Thanks for reporting this, @ianef. Great suggestion about FEAT: Create the canvas from a URL! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative ap...

#3222Jan 7, 2021by bgrand-ch3 answers
0 reactions

How to refresh/re-render after new node added?

I manually add a new node into a rendered component. The visual result is OK, but impossible to save, because my style isn't with the auto-generated GrapesJS ID. To manually resolve this poblem, I double-click on the component to enter to it and I click outside in the canvas body. Then, the GrapesJS ID and data-gjs-ty...

bgrand-ch

Optimized TextEditor.vue file: But the problem persist:βœ”οΈ span node replaces the previous content of selection, with font-family and color styles.❌ span node isn't recognized by GrapesJS, because there isn't GrapesJS auto-generated styles...

bgrand-ch

ℹ️ Don't works directly with HTML, works only with JSON. Component = JSON node (html element + GrapesJS data) Sources:https://grapesjs.com/docs/modules/Components.htmlhttps://grapesjs.com/docs/api/component.html

GJSBlock

Thanks for reporting this, @bgrand-ch. Great question about How to refresh/re-render after new node added?. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...

#3219Jan 6, 2021by Abhisheknanda13444632 answers
0 reactions

Add Type for block and css with class name

Hi @artf I am stuck on one thing I want to add one block in which I want to add style with the class name also Here is my code -: This give me the exact thing what I wanted like HTML-code in the HTML section and style part in the style section but I want to add a new trait for the same and how can I define type in thi...

artf

and make yourself a favor, stop defining entire sections in blocks, use a component-oriented approach so your blocks will be mainly like this:

GJSBlock

Thanks for reporting this, @Abhisheknanda1344463. Thanks for sharing your report about Add Type for block and css with class name. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbo...

#3218Jan 5, 2021by bgrand-ch4 answers
2 reactions

How to add new HTML element with inline styles?

I would like to add a new HTML element, with inline styles, around the rte.selection(). With the following example, the HTML is OK, but probably not the JSON part:

artf

@bgrand-ch what do you mean by "probably"? πŸ˜…

bgrand-ch

@artf thanks for your quick response πŸ™‚ update dependencies to 0.16.30 resolves my problem πŸŽ‰

bgrand-ch

https://github.com/artf/grapesjs/issues/3069 πŸ€”

Browse all topics