GrapesJS Issues

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

829 issues found

🔍 question
#1916March 24, 2019by sunhillbd2 answers
0 reactions

[QUESTION] How to change the dragging nature?

Hi, We have been working with GrapesJs for sometime. I know you have already been asked about the designer mode (Free drag) and you said it was on the roadmap. What I want to ask is, do you have any rough guideline on how we can achieve the free drag? Should we go for integrating any 3rd party library or plugin? thank...

artf

Take a look here please https://github.com/artf/grapesjs/issues/1890 for now I can't add more about this topic

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.

#1912March 21, 2019by simplecommerce2 answers
0 reactions

[QUESTION] Custom component default children

Hi, I am trying to understand how I can achieve the following.Create a component with a default content as children.Create a block to add that component to the canvas.Edit the component children to anything else and save the HTML result.Reload the component in the editor later on and continue editing. My issue is the...

artf

@simplecommerce a working example of a custom component with default children (it uses local storage) https://jsfiddle.net/t5yw48cs/ Try to review the way you store/load templates, maybe the issue is there https://grapesjs.com/docs/modules...

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.

#1911March 21, 2019by sakshigarg92 answers
0 reactions

[Question] Is Knockout.js compatible with Grapesjs?

I'm trying to implement an attr binding on one of my components using Knockout.js. It works perfectly fine otherwise but the same implementation does not work in a grapesjs-preset-webpage format. What could the issue be?

artf

Sorry @sakshigarg9 but this question is out of scope of this issue tracker

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.

#1910March 20, 2019by HenriqueVilela2 answers
0 reactions

Raplace the build prop name

I have a question about how i can replace this texts to translate them sorry for the lack of professionalism

HenriqueVilela

now I find the method, I just used getProperty () and set the name, it was not working, but then I put a stylemanager.render and it worked editor.StyleManager.getProperty('sector', 'float').set({ name: 'Flutuação', }); and then editor.Styl...

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.

#1908March 20, 2019by ProxiBlue3 answers
1 reactions

[question] Cannot read property 'indexOf' of undefined

I found a previous result here: https://github.com/artf/grapesjs/issues/1772 however I can still not get it to work, using the most basic setup, as per your guide, and the answer given in that question. My script: and the page is simply: which results in and no functionality. Any help/advise?

artf

Any suggestions? If you can't remove prototype from the project the only possible solution I see is to put the editor in an iframe The same has been happening in my project as well, though I'm not using prototype.js, I hope there is a solu...

ProxiBlue

Ok, so I figured out the issue is prototype.js! The project I am working on also loads prototype, and that is the root cause. I have tried numerous ways to prevent this, as per https://learn.jquery.com/using-jquery-core/avoid-conflicts-oth...

faaizalikhan1

The same has been happening in my project as well, though I'm not using prototype.js, I hope there is a solution to this, any help would be appreciated!

#1907March 19, 2019by u-ashikov2 answers
0 reactions

[QUESTION]: Drag and drop external html to editor ?

I have created a component which is heading and a block element for it. I have set the draggable property to be section html element. If I try to drag and drop external heading html element to the editor, it is dropped, but if I try to drag and drop the heading block element (which I have defined in the editor), it is...

artf

I have set the draggable property to be section html element. it is not allowed to drop if it is outside the section. Should it work this way, or it is a bug ? Well, if you set draggable: 'section' it means you can drag that heading compon...

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.

#1905March 19, 2019by yrbn3 answers
2 reactions

[QUESTION] Not editable block after import template

Have the same issue like in 1408. You said that JSON should be imported instead of the HTML. Can you tell me please how to import JSON template? I can't find the solution. On 'storage:store' I fetch an object: { assets: "", components: "", css: "", html: "", styles: "" } Then I run command: let emailTemplateStr = edit...

yrbn

Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution: editor.setComponents(JSON.parse(value.components)); editor.setStyle(JSON.parse(value.styles));

anish2690

@artf if I use <strong>text </strong> importer template will fail and convert text element into box sample template to reproduce the issue. #1906

svalenciano81

Sorry, I found the solution when was reading my own question))) components and styles are strings. For those, who is searching for solution:editor.setComponents(JSON.parse(value.components));editor.setStyle(JSON.parse(value.styles)); what...

#1902March 18, 2019by JoeriAben3 answers
0 reactions

[QUESTIONS] Disable/change build-in components behavior

Hey, Trying to get GrapesJs work for a project I'm currently working on. But is there a way to disable the built-in components that convert div & span into editable components (or change the isComponent so I can add a class/data flag). Because I don't want all div's & span's editable only the ones I say need to be edi...

simplecommerce

@JoeriAben did you try this? https://grapesjs.com/docs/modules/Components.html#improvement-over-addtype

artf

Create a custom text-editable component by extending the text one. Then extend the text component by setting editable to false. Now in your template use data-gjs-type="text-editable"

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.

#1901March 18, 2019by fmr4112 answers
0 reactions

[QUESTIONS] Set border weight at hover

Is it possible to change the weight of border when hover, I have searched for the ".gjs-hovered" class in the css file but did not find it, I have also tried using setStyle "editor.setStyle('.gjs-hovered{outline:"4px solid #3b97e3 !important;"}');" but still nothing has changed, Thank's

artf

You don't need to use editor.setStyle if you need to customize the UI of the editor, just include this CSS after the GrapesJS one

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.

#1897March 16, 2019by sandromattei3 answers
0 reactions

[Question] view vs code

Hello...and sorry for my english! First of all, congratulations for this fantastic framework. I'm trying to use GrapeJS to create my own wordpress editor and I have a doubt. If in my code I use a wordpress "shortcode", how can I preview this shortcode in grapeJS but leaving the html code unchanged? thanks a lot

artf

I don't know what kind of API WordPress allows you to use for shortcodes but if it's possible I'd render them and put inside the editor as blocks

sandromattei

sorry, maybe I explained myself wrongly. I would like to insert a shortcode in the code (eg [my shortcode param1 = value1 param2 = value2 /] and render an html output instead (eg &lt;div class = "param1" id = "param2"&gt; &lt;/div&gt;)

artf

Well if you need to do that on runtime you should create a custom component which on render makes an async call to Wordpress to ask to render that shortcode (again, I know nothing about WP API so I'm not sure if it's possible)