GrapesJS Issues

Search parsed GitHub issues, see highlighted answers, and open the original discussion when needed.

3464 issues found

#519November 14, 2017by enricribas3 answers
0 reactions

No Blocks by default

Using this code I get an editor but there are no blocks. I also do not get the icons for the screen size but other icons are there. As you can see the css is getting loaded as the general layout is correct. What am I missing. I am using Vue but don't think it matters since I am simply running the code in the mounted c...

ryandeba

@enricribas As far as I know, there are no default blocks built into the core of grapesjs, however there are plugins available that will add some blocks for you. Check out https://github.com/artf/grapesjs-blocks-basic. I believe the "scree...

enricribas

I see, thank you. The readme seems to imply that that out of the box, it's more set up but I guess things have been moved to a plugin system, which is nice. 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.

#518November 14, 2017by HarshOB3 answers
0 reactions

change only component body not whole page body.

Hello @artf As we discussed in issue #374. setComponents will set the body and replace all the contents that are present on the page with a new select page from the list. What if I want to set the body to only that component without changing the whole content of the page?

artf

You can replace the content of the model

HarshOB

How can I replace the content of a component with specific value like "Hello"?

artf

Tried with this model.components('Hello')?!?

#516November 13, 2017by ateshuseyin3 answers
0 reactions

How to embed setting panel into style manager panel.

In grapesjs.com/demo.html settings panel is embedded into style manager panel. I want the same thing but I could not find how can it be.

ateshuseyin

I found it inside grapesjs-preset-webpage.js. I think this should be a feature. Issue can be closed for now.

artf

Sure @ateshuseyin The UI management with Panels API will be refactored soon and I'll add appendTo option on modules which should indicate where panels should be rendered

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.

#514November 13, 2017by krunal0392 answers
0 reactions

template/ Blocks/ Components

We have requirement to create custom templates for different areas and all templates has below 4 variables anchor link, anchor target, image source, image hover text, title. We want to create one custom component and it will provide mechanism to select variables via traits. Is there way to provide template via block a...

artf

Well, with data-gjs-* attribute you can even use objects (JSONs) but, for bigger templates, I'd recommend block definition via an object instead

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.

#513November 13, 2017by krunal0393 answers
0 reactions

Model and returned html issue

I have below code to create custom component and wants to retrieve updated html via editor.html() but return wrong html, I am sure I am missing something again. we need below template returned 482 Codeplex: Template function createPCBoxComp(comps, defaultModel, defaultView) { comps.addType('pcBox', { // Define the Mod...

artf

@krunal039 It's not an issue, it's just how you've defined a custom type. If you define traits on div you will get them there. If you need to update some nested component you can always access it from the component itself

krunal039

@artf thanks for reply, if you can please point me to any sample?

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.

#511November 13, 2017by bungambohlah3 answers
2 reactions

Cannot edit the content after update it via block manager API

Hello @artf sorry for my last issue, I must create a new issue, my problem is got error like this EDIT : sorry i just fixed my last issue with script : Updated Script but the content (link element only) cant edit or add some component with grapesjs, how to fix that? thank you @artf :+1:

artf

@edwardjiawei just change content (used only for text content) with components @bungambohlah You should not do this el.insertAdjacentHTML( 'beforeend', contentDynamic ); If you replace the DOM you remove also its attached models If you nee...

bungambohlah

Thaks a lot @artf i got some idea and little tricky for what to do in the model level, thank you so much, you saved my day :rofl:

edwardjiawei

Similar issue, nested element is not being detected To setup simple flow to drag and drop table, so user can drag the row Block to make the table for second row, but the td in the row is not editable, not selectable for styling ``` bm.add(...

#510November 12, 2017by asvine-p3 answers
6 reactions

Add new class programatically

Hello Artf, I want to edit the styles of components (mostly imported html) without modifying all components with the same class. I tried to add a random named class programmatically like this: this.editor.on('component:selected', function(model) { if (model && model.length > 2) { const uuid = this.s4(); // generate ne...

artf

@wemod123 editor.getWrapper().addClass('my-class')

artf

@IrinaCodixis from the https://github.com/artf/grapesjs/releases/tag/v0.14.52 we've added setRule/getRule methods, so to add some CSS rule programatically you should do this:

artf

You mean something like model.set('style', {...})? This adds an inline style on the component

#509November 12, 2017by asvine-p3 answers
0 reactions

Span are not editable as text

Hello Artf, I have a problem when importing some html templates. I was initially not able to see span texts. But after helping the editor reconizing them, i'm not able to edit them as texts. let domc = this.editor.DomComponents; let textType = domc.getType("text"); domc.addType('span', { // Define the Model model: tex...

artf

For editable contents, you have to use content

asvine-p

Hello artf, I have replaced "components: el.innerHTML" by "content: el.innerHTML" but the content is still not editable. Here is my code: ' let domc = this.editor.DomComponents; let textType = domc.getType("text");' domc.addType('span', {...

bakgat

``` return {type: 'Span', src: el.src, tagName: el.tagName.toLowerCase(), // components: el.innerHTML, content: el.innerHTML, editable: true }

#507November 12, 2017by roytang3 answers
0 reactions

uploadFile being called twice on drop file?

I have an editor initialized as so: If I add an image to the canvas and try to upload a new image by dragging it into the drop area in the modal, the uploadFile function is called twice. Uploading by clicking on the upload area and selecting a file from the windows dialog works fine, it only calls the function once.

artf

@roytang I can't reproduce it with the current version https://codesandbox.io/s/p554z8yv7j

duskhacker

@roytang Explicitly disabling the full-width editor dropzone (dropzone: 0) fixed this for me. Using version 0.12.30

kickbk

Got the same and @roytang's comment is true, disabling dropzone takes care of it. always using the latest version of course.