GrapesJS Issues

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

1,399 issues found

πŸ” outdated
#583Nov 28, 2017by gabrigcl2 answers
0 reactions

Event stop:preview doesn't fire

Hi. I need the firing of this event in this situation: I have some elements out of the canvas that need to be hide at preview mode and shown when I exit preview mode. However, the event stop:preview doesn't fire when I exit the preview and turn back to canvas editing. I've made a solution myself that works well, but I...

theanhmx

@artf sorry for this stupid question, but when will the fix available in the npm package? or from which branch i can manually pull the code with this fix and build?

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.

#582Nov 28, 2017by suraj7403 answers
1 reactions

Background image issue

Hi @artf one more issue when using custom manager , what do we set on background images? editor.getSelected().set('src', url) not working on background images. should i replace 'src' with 'background'?

artf

Use this

suraj740

@artf Thank you for the awesome work man! πŸ‘

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.

#581Nov 28, 2017by ppisecky3 answers
1 reactions

Reading component related events

The Editor API wiki lists a set of component-related events that can be listened to (e.g. component:add, component:update). There is however no mention of what sort of event objects the listener receives and how they are structured (what properties do they have and what values can they contain.) When a component gets...

ppisecky

@artf hey thanks for your answer. I was however looking for a more general example of determining if changes happened and what they were - for example something like this: We need to track changes to components in a project so we need some...

artf

Thanks @ppisecky for pointing this out, I updated the source, but basiclly any component-related event just receives the triggered model. About your font-size case, you can set up this listener

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.

#580Nov 28, 2017by faizansaiyed3 answers
3 reactions

Any/Trigger event when any block is dropped inside canvas?

Hey, How can I trigger some event when any new block or content inside canvas is updated? Something like editor.onCanvasUpdate() Thanks!

ryandeba

Hi @fsaiyedOB, I've been able to accomplish this with the component:update event listed here: https://github.com/artf/grapesjs/wiki/API-Editor#available-events My code looks something like

duskhacker

When I asked to find out when the canvas is dirty to provide an indicator, @artf told me:

artf

I'd add also a block specific event

#579Nov 28, 2017by NorthstarTech3 answers
0 reactions

Replacing richtexteditor to ckeditor

I am replacing richtexteditor to ckeditor in grapesjs but its not working. Richtexteditor is still showing. How should I resolve this? My code is: editor.setCustomRte({ enable: function(el, rte) { rte = new CKEDITOR.inline(el, { toolbar: [{ attributes: { "class": "fa fa-image" }, command: "open-dialog" } ] }); return...

ryandeba

Hi @NorthstarTech, I see that your code is including the grapesjs-plugin-ckeditor.js file. Are you also including that plugin when calling grapesjs.init() as shown here?

NorthstarTech

yes I also added the plugin on grapesjs.init() but not working. It gives the error shown below.

ryandeba

I'm not super familiar with the ckeditor plugin, but it does appear to that it is expecting the sharedspace ckeditor plugin (see here). I think you just need to be sure and include that plugin in your CKEditor configuration. Here's a link...

#577Nov 28, 2017by krunal0393 answers
2 reactions

Only allow one component of specific type on editor

is there way to not allow to drop any specific component more than one time on page? I have custom component and user cannot drop it more than one on page, so if component is already added on page then I want to display specific message and not allow to be dropped in editor

ryandeba

Hi @krunal039, My best suggestion would be to listen for the component:add event. In the event listener function you could check to see if the added component is the type that you are looking for, and if more than one of those components n...

bunomonteiro

``` editor.on('component:add', model => { // ... your logic goes here if(remove){ model.destroy(); } });

artf

@krunal039 Ryan's suggestion is the correct way to accomplish your request

#576Nov 28, 2017by ryandeba3 answers
5 reactions

Text content not always editable

Hi @artf, I've noticed that if I add a component that contains a combination of text and an <a> tag, the text is not editable like it normally is. If I replace the <a> tag with a <span>, then I can edit the text just fine. Here's something to illustrate what I mean (note the last 2 lines of code to toggle between a br...

artf

Thanks Daniel, I agree with you and will take care of your suggestions. I just would like to point out, for the 4th case, that you can also indicate explicitly to the editor where is a text component

artf

Should be fixed https://github.com/artf/grapesjs/releases/tag/v0.12.50

duskhacker

I'm running into this too.

#575Nov 27, 2017by NorthstarTech3 answers
0 reactions

Border Width Properties

Is it possible to add border-top, border-right,border-left properties individually under the decoration heading in grapesjs. This would be similar to border radius. For now it only shows the border-width which gives all sided borders. I want only right or left sided borders.

ryandeba

Hi @NorthstarTech, I don't have a code example, but have you looked at https://github.com/artf/grapesjs/wiki/API-Style-Manager#addproperty? There's an example there that adds "min-height" - could you modify that example to fit your needs a...

artf

@NorthstarTech Example for the right border

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.

#574Nov 26, 2017by Snarkly3 answers
3 reactions

Using Grapes with Zeronet.

Is there a way to use grapesjs with zeronet? https://zeronet.io/ You can create sites on zeronet but to add headers, banners and other things you have to get into the CSS and HTML to write code. I hate coding with a passion and would like to use grapesjs on zeronet so I can use grapes drag and drop features to create...

artf

Hi Jeffery, unfortunately, Daniel is right, if you want to use GrapesJS in other projects someone (devs) need to integrate it first. I think you can try at least to ask ZeroNet's devs if they put GrapesJS integration in their Roadmap

duskhacker

@Snarkly GrapesJS is not a drop-in turn-key solution. You'll have to understand (and do) Javascript coding just to get the editor working. Its purpose is for adding a fancy HTML editor to an existing web stack.

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.

#573Nov 26, 2017by NorthstarTech3 answers
1 reactions

Text at specific position in richtexteditor

How to add the text at specific cursor position in richtexteditor? any sample code? Need urgently Thanks,

ryandeba

Hi @NorthstarTech, Can you elaborate on what you mean by "specific cursor position"? Is that the beginning/end of the selection? Or is the target position more dynamic? A code example showing what you have so far (obviously it's OK that it...

artf

Thanks Ryan for the detailed explanation, by the way, I think this is the same as #111 so close as a duplication

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