GrapesJS Issues

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

1,399 issues found

πŸ” outdated
#460Oct 28, 2017by roytang3 answers
2 reactions

When the component's view modifies the HTML, text components are no longer editable

I'm trying to build a custom component that contains some lorem ipsum text in the content, for editing once it's on the canvas. But I also want to modify the HTML in the view (to add some content that I want shown in the editor but not in the saved HTML). I tried something like this: The issue is if I modify the rende...

roytang

I tried the above, as follows: But I'm still unable to edit the text in the h1 and p elements after dropping the component on the canvas. :(

artf

Sorry I didn't notice this you basically remove elements with models and attach a new string as HTML (the editor can't access their models anymore). If you want to add a new component you should do it via models (eg. view.model.append('<di...

artf

You can extend the Text Component instead of the base one

#459Oct 28, 2017by roytang3 answers
1 reactions

Error when including a custom component inside another block

Sorry for the vague title. I'm not sure how to describe this concisely. I have a custom block where i want to restrict that only images can be dropped into a certain part of the block. I tried something like this: However, when I do this, trying to drag the block off the block palette raises the following error: ... g...

roytang

Seeing as how your comment fixed the original error I encountered, I'll close this comment and post a separate one for my questions about usage of the droppable property.

artf

The view is mandatory when you're defining a new Component type

roytang

Thanks! Adding the defaultView did indeed get rid of the error, but I'm still unable to do what I want - I can't seem to drop an image inside the "image-container" part of the sample above. When I try to drop the an image component there,...

#457Oct 28, 2017by mekamleshk2 answers
0 reactions

Two Quick Questions

Hi @artf 1) I have my editor templates like this : I want to change the alignment and also add a back button to the corner left like this one : 2) Don't know for what reason whenever I select text the ckeditor options always appear at the top : I want it to appear besides the selected text like this : Thanks

artf

Check the Panels API or you can just append/remove stuff once the editor is loadedJust tried it the demo and works as expected, probably you have multiple nested text components, where in that case the toolbar appears on top of the highest...

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.

#456Oct 27, 2017by leantorres733 answers
0 reactions

Combobox cross-browser issues

I found that the combobox has different styles on different browsers. Firefox 56.0.2 (64-bits): Chrome: Safari: I think the problem is with Firefox. Also when opening the select, firefox displays some white borders: As Firefox use custom select this gives me issues when changing to a light theme.

santiph

With the light theme enabled, this is what select boxes look like on Firefox for OSx <img width="198" alt="screen shot 2017-10-27 at 19 15 28" src="https://user-images.githubusercontent.com/747646/32127161-47023f32-bb4b-11e7-8f55-b0eeab117...

leantorres73

@artf I can work on it if you give me the indications, or if you want I can propose something.

artf

Thanks @leantorres73 a PR would be great. It's all about CSS and the problem is the <option> styling that should be here: https://github.com/artf/grapesjs/blob/dev/src/styles/scss/gjsinputs.scss (just try to search option) I think it would...

#455Oct 27, 2017by krunal0393 answers
0 reactions

Need help: Ask for user input for text/imageurl/hyperlink

we are building template where it will render div with background image and on hover it will display some text, also there will be hyper link when someone click on it should redirect user to and also title below image for text. We have built template but we could not build in such way where once user drop template we...

artf

check here #286

krunal039

@artf thanks for reply but still I could not understand how to create block with component as component are building block and block will be made of components. we wants to have single window where user can porvide all information on block...

artf

Check out Blocks and Components documentation

#454Oct 26, 2017by Geczy3 answers
3 reactions

Make block manager default open panel?

I tried this code: It works but doing this will hide the device selector in the top left for some reason.

artf

try just with but put it after the render (if you're using autorender: false)

Geczy

Ah, setting it after render works great. Thanks

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.

#453Oct 26, 2017by deffrin3 answers
0 reactions

Previously saved css rules not showing in Style Manager

Previously saved css rules using remote method are not showing in Style Manager. remote json response {"gjs-assets":"","gjs-css":"*{box-sizing: border-box;}body{margin:0;}#c743{background-color:#b0aeae;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#c743{background-color:rgb(76, 70, 70);}body...

artf

Post the grapesjs config and its version

deffrin

Version : 0.12.17

artf

To try with the latest version

#452Oct 26, 2017by thecodefish3 answers
0 reactions

Custom Resizer issue (or maybe how I'm saving/loading components)

I'm trying to build a custom resizer for one of my components. It's a grid/column layout based on Flexbox and I want users to be able to resize one column (to a fixed width) and have the other columns fill up the remaining space. I already have a custom component for my column, so I added resizer configuration to it,...

artf

Yeah, you're right. This happens just because functions are not serializable, therefore when grapesjs calls JSON.stringify(Component) are simply ripped off. The solution for your case is to override toJSON method in the custom Component

thecodefish

Thanks @artf that did the trick.

sakshigarg9

@thecodefish How do you change initial state of the Resizer properties? Where does this config go if I'm using the grapesjs-preset-webpage, simply under grapesjs.init{...}? I want to fix a minimum dimension for an image component specifica...

#451Oct 26, 2017by alexlyul2 answers
0 reactions

Image uploader

Hi. Thank you for so good tool. Have some questions: How should I configure this http://prntscr.com/h214o4 Uploader tool to save images in storage and on the server? Is there any examples/manuals of how it should work? Which answers my server should send? Thank you very much.

artf

Sure, you can find more about it here https://github.com/artf/grapesjs/wiki/Assets#uploading-assets

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.

#450Oct 25, 2017by desprit2 answers
1 reactions

Flex support

In the demo I see "flex" tab which gives us all flex styles. But there is no such tab in current "0.12.17" version. Is it a custom build? p.s. there are many other small differences between demo and available versions. Demo theme looks really amazing.

artf

Hi @desprit the demo extends the core grapesjs library with its own preset (styles and plugins). Probably soon I'll create its own repo By the way, here you find the flex configuration: https://github.com/artf/grapesjs/blob/gh-pages/demo.h...

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.

Browse all topics