GrapesJS Issues

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

3464 issues found

#569November 24, 2017by markbailey3 answers
0 reactions

Text block content duplication

I have reproduced this on the website demo, so I know it is not due to my coding. If you set a min-height, width to a text block and then delete all the text so it is empty, when you reenter text the text duplicates.

ryandeba

Hi @markbailey, I was able to recreate that issue and submitted a pull request to fix it. The duplicated content only appears to be in the dom, not in the component properties, and forcing the view to render after editing seems to fix it.

markbailey

Hi @ryandeba , thanks for that info and the work around. I look forward to your changes getting merged.

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.

#568November 24, 2017by matthewgertner3 answers
0 reactions

Resize blocks with mouse?

I noticed that in the current demo it is only possible to resize most blocks using the property editor, not by dragging anchors on the block (which is possible with the map element for example). Is this by design or is it simply a feature that has not been implemented yet?

ryandeba

Hi @matthewgertner, I believe this is can be enabled on individual components via the "resizable" property: component.set("resizable", true). It's probably not going to work very well on elements having a display: inline style (a <span> fo...

artf

@matthewgertner Ryan's solution should work, and, yes, I do not apply them by design for reasons already explained by Ryan but you can actually create blocks/components with resizable enabled

matthewgertner

@ryandeba @artf Great, thanks for the suggestion. We're playing with the codebase now so we'll give that a try.

#567November 24, 2017by NorthstarTech3 answers
4 reactions

A component that inserts editable HTML

Would it be possible to create a block that allowed the user to write in responsive HTML either directly on to the template or on the side in the style/layout manager?

ryandeba

Hi @NorthstarTech, I just created a plugin (very early, could use some more work) that you may find helpful: https://github.com/ryandeba/grapesjs-html-block. You should just be able to include that file in your project and include the plug...

ryandeba

@chiqui3d Change the isComponent function to this to prevent the initial internal html from getting parsed by grapesjs into components: The other code I posted should prevent grapesjs from parsing the html after editing through the modal....

ryandeba

I believe this issue has been resolved and could be closed based on the first comment here: https://github.com/ryandeba/grapesjs-html-block/issues/1. @NorthstarTech could you confirm or reply with additional details if you want to keep thi...

#566November 24, 2017by Deepak8133 answers
0 reactions

How to add Custom HTML type in video traits

How to add Custom HTML type in video traits so that user can able to enter the iframe code and it will embed in the html.

artf

I'd say it's a totally different kind of Component.

Deepak813

Did we get this component in next version in video type traits.

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.

#565November 23, 2017by paulroberttaylor-zz3 answers
0 reactions

Custom html elements

Is it possible, and if so how to do it, to use a custom html element e.g. <body> <my-custom-tag/> </body> Which will render specific html for the preview window, but the source will output the custom tag? Thanks, Paul

artf

Yeah you can use different tag names in your custom component

paulroberttaylor-zz

Thanks @artf, that points me in the right direction. If I want the anything that needs to be editable in the block to appear in the custom tag code, how would I achieve that?

artf

You mean something like this?

#564November 23, 2017by paulroberttaylor-zz3 answers
0 reactions

Use external css/fonts for plugin

Hi, I have an idea for an app that I think the people in my field would find useful. Essentially, there is a framework that we use for application development but there is no UI builder for it. It has a fairly large css/icons/svg/fonts asset folder. What I'd like to do is be able to create a plugin that will include t...

artf

Hi Paul, you can inject external styles in this way

paulroberttaylor-zz

Fantastic! Thanks @artf

suraj740

Hi @paulroberttaylor , how you have included fonts inside styles, i am also doing same but nothing change happens const editor = grapesjs.init({ ... canvas: { styles: ['<link href="https://fonts.googleapis.com/css?family=Roboto" rel="style...

#563November 23, 2017by faizansaiyed3 answers
2 reactions

Table <thead> and <tbody> tag gets Omitted

Hello, There is new issue with GrapesJS (maybe). I've created new component using bm.add() in which I've used a table element with <thead> and <tbody> tags. But when getting html using editor.getHtml() method, the <thead> and <tbody> tags gets ommited. Can you please help?

artf

@fsaiyedOB yeah, I've made the table component like this because at that moment of writing the sorter was acting differently and it was messy ordering rows with tbody-like elements around. Currently, dealing with tables it's not my priorit...

ryandeba

Thanks! I'll try to get started on this in the next few days.

ryandeba

Hi @artf - I can probably take a look at this at some point. I've started by just removing the "Clean table rows from non rows" section in the table component (lines 54-68). Can you point me in the right direction of what problems this cau...

#559November 22, 2017by Geczy3 answers
0 reactions

Why is my component selected full width?

Trying to create a custom component, see demo here and code here Drag out two button, then drag out two button + link The two buttons are proper width, but the custom component is some weird full width fixed height thing Why?

artf

the default tagName property is a div, change this in your model

Geczy

Makes sense now, 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.

#558November 22, 2017by suchithmahadi3 answers
0 reactions

Help: Can you please give an example of Chart.js as a block in grapesjs.

@artf can you please give one complete example of a chart using chart.js with traits for changing the colour, values & Data Points.? It would be great if i can get a help.

Geczy

You can use the sandbox demo here https://github.com/artf/grapesjs/issues/559 It lets you modify traits and updates the dom. Should get you started

suchithmahadi

@artf Please help me out.

artf

@suchithmahadi for this kind of question I'd recommend asking on https://stackoverflow.com

#557November 22, 2017by krunal0393 answers
1 reactions

Classes are missing on editor.gethtml()

I can see classes are added on canvas but when I get html via editor.gethtml(), i so some of classes are not included and it is just divs without any classes. attached screenshot with html on canvas and html via editor.gethtml()

Geczy

Don't think gjs- prefixed classes will return

arthuralmeidap

When you use the editor.getHtml it returns just the html . If you need the css too, you can use the editor.getCss().

Geczy

I use newsletter-plugin and const html = window.grapesjs.editors[0].runCommand('gjs-get-inlined-html')