Issue #1246Opened June 28, 2018by Jogai0 reactions

[Question] How to preserve the Id attribute with toHTML

Question

The changelog states

Added the possibility to output custom attributes in toHTML method

How do we use this feature? I cant find the corresponding issues, or any info on the options for the toHTML method in the wiki.

I used this function in 0.14.20 and earlier to post the html to the server and do some more processing on the html & css, but now the id's are not in the html anymore. I like to set it to preserve classes and id's.

Answers (3)

artf• June 30, 20180 reactions

but now the id's are not in the html anymore

Can you explain better your case because this new feature shouldn't change the previous behavior.

BTW to explain this new option let's take for example a component that on component.toHTML() returns this:

<section id="some-id">
	<h1>Hello!</h1>
</section>

So now, for example, you can do this:

component.toHTML({
	attributes(component, attr) {
		if (attr.id == 'some-id') {
			attr['some-attr'] = 'some-value';
		} else if (component.get('tagName') == 'h1') {
			attr.class = 'h1';
		}
		return attr;
	},
});

to return

<section id="some-id" some-attr="some-value">
	<h1 class="h1">Hello!</h1>
</section>

Jogai• July 2, 20180 reactions

You're probably right. It's not this feature that's changed that behavior. Maybe its a bug, you can change the title of the issue if you confirm it.

My test case:

Template:

<head>
    <meta charset="utf-8">
	<style>div{margin:0 auto;}</style>
</head>
<div style="width:500px; border:2px solid black;">
	<div style="width:400px;height:400px; border:2px solid red;">
	</div>                     
	<div style="width:300px;height:300px; border:2px solid green;">
	</div>                    
	<div style="width:200px;height:200px; border:2px solid blue;">
	</div>
</div>

Version 0.14.21 html output (from grapesjs.com/demo.html):

<meta charset="utf-8"/>
<div class="c3945">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

Version 0.14.21 html output

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
#iht0ek{
  width:400px;
  height:400px;
  border:2px solid red;
}
#i9ry44{
  width:300px;
  height:300px;
  border:2px solid green;
}
#igqj8h{
  width:200px;
  height:200px;
  border:2px solid blue;
}
div{
  margin-top:0px;
  margin-right:auto;
  margin-bottom:0px;
  margin-left:auto;
}
.c3945{
  width:500px;
  border:2px solid black;
}

The css have the proper id's, but the html doesn't have them.

In my local environment is still on 0.14.20 and the output is including the id's in both html & css:

HTML:

<meta charset="utf-8"/>
<div id="izai">
   <div id="iupd"></div>
   <div id="invg"></div>
   <div id="itzz"></div>
</div>

CSS

* {
     box-sizing: border-box;
}
 body {
    margin: 0;
}
#izai{
    width:500px;
    border:2px solid black;
}
#iupd{
    width:400px;
    height:400px;
    border:2px solid red;
}
#invg{
    width:300px;
    height:300px;
    border:2px solid green;
}
#itzz{
    width:200px;
    height:200px;
    border:2px solid blue;
}
div{
    margin-top:0px;
    margin-right:auto;
    margin-bottom:0px;
    margin-left:auto;
}

artf• July 5, 20180 reactions

Thanks @Jogai, you're actually right, there is a bug (will be fixed for the next release), but I'd like to suggest to try this option which should also correct the current behaviour:

grapesjs.init({
	...
	// Usually when you update the `style` of the component this changes the
  	// element's `style` attribute. Unfortunately, inline styling doesn't allow
  	// use of media queries (@media) or even pseudo selectors (eg. :hover).
  	// When `avoidInlineStyle` is true all styles are inserted inside the css rule
	avoidInlineStyle: true,
})

One day or another, probably, this will be true by default, as without it you can't style single component on different devices or in different states (eg. :hover)

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[Question] How to preserve the Id attribute with toHTML

Question

Answers (3)

Related Questions and Answers

[BUG]Set href for link block not editable once initialized

Issue in wiki from the last release

Border Color Issue

[Bug] Trait - Change Video Provider issue

Paid Plugins That Match This Issue

Browse Plugin Categories