Script tag create JSON error
Question
Hi. I'm creating blocks in Grapesjs and I need to use JS on them for hover effect and more.. Everything works fine for the creation, store, load and the style of each blocks. I have a problem when I add the <script></script> tag to my block. It works fine when I drag the block for the first time but when I store and reload the page (so i load what i stored in db) I'm having a JSON error..
Here is my code :
editor.BlockManager.add('block-category', {
label: `<div class="gjs-fonts gjs-f-b1 gjs-one-bg gjs-four-color-h"><div class="gjs-block-label">Bloc Catégorie</div></div>`,
content:
`<style>
.mdc_category_img_large {
width: 100%;
}
.mdc_category_img_large img {
width: 100%;
}
.mdc_category_content_container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
}
.mdc_category_img_medium img {
max-width: 100%;
}
.mdc_category_content {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
align-items: flex-start;
flex-direction: column;
}
.mdc_category_title {
text-transform: uppercase;
font-weight: bold;
color: #ffb8b1;
font-size: 16px;
}
.mdc_category_title span {
display: block;
}
.mdc_category_text {
margin-top: 5px;
}
.mdc_category_btn_container {
width: 80%;
text-align: center;
margin-top: 15px;
}
.mdc_category_btn {
color: #000;
background-color: #ffb8b1;
text-decoration: none;
border-radius: 50px;
padding: 10px 20px;
}
.mdc_category_large_hover_content {
display: none;
border: solid 1px #a8c1b3;
}
.mdc_active {
display: flex;
}
.mdc_category_img_large:hover > .mdc_arrow_container > .mdc_arrow.mdc_right::before {
transform: rotate(135deg);
margin: -3px 0 0 -5px;
}
.mdc_category_img_large:hover > .mdc_arrow_container > .mdc_arrow.mdc_right::after {
width: 0;
height: 15px;
border-width: 0 2px 0 0;
margin-left: -1px;
margin-top: -8px;
}
.mdc_arrow_container {
position: absolute;
right: 0;
bottom: 0;
}
.mdc_arrow {
width: 35px;
height: 35px;
margin: 20px;
display: inline-block;
position: relative;
}
.mdc_arrow::before {
content: '';
display: block;
width: 10px;
height: 10px;
top: 50%;
left: 50%;
border-style: solid;
border-color: #00bab9;
border-width: 2px 2px 0 0;
position: absolute;
transform-origin: 50% 50%;
}
.mdc_arrow.mdc_right::before {
transform: rotate(45deg);
margin: -6px 0 0 -4px;
transition: transform 0.1s;
}
.mdc_arrow::after {
content: '';
display: block;
top: 50%;
left: 50%;
border-style: solid;
border-color: #00bab9;
position: absolute;
transform-origin: 50% 50%;
}
.mdc_arrow.mdc_right::after {
width: 15px;
height: 0;
border-width: 2px 0 0 0;
margin-left: -10px;
margin-top: -2px;
transition: 0.1s;
}
.mdc_arrow.mdc_arrow_circle {
background: rgba(255, 255, 255, 1);
border: solid 2px #00bab9;
border-radius: 50px;
}
.mdc_category_large_hover_content_item {
display: flex;
align-items: center;
padding: 10px 20px;
}
.mdc_category_large_hover_content_item_price {
display: block;
}
.mdc_category_large_hover_content_item_values {
width: 50%;
margin-left: 50px;
}
@media screen and (max-width: 767px) {
.mdc_category {
padding: 0 30px;
}
.mdc_category_btn_container {
width: 100%;
}
.mdc_category_large_hover_content {
flex-wrap: wrap;
}
}
@media screen and (min-width: 768px){
.mdc_category_content_container {
flex-direction: row;
align-items: flex-start;
}
.mdc_category_content {
width: 50%;
margin-left: 30px;
}
.mdc_category_img_medium {
width: 50%;
}
.mdc_category_title {
font-size: 18px;
}
.mdc_category_text {
width: 80%;
}
.mdc_category {
padding-left: 30px;
padding-right: 30px;
}
}
</style>
<div class="mdc_category" data-gjs-draggable="#wrapper">
<div class="mdc_category_img_large">
<img src="/modules/mdthematics/views/templates/front/category_large.png" />
</div>
<div class="mdc_category_large_hover_content">
<div class="mdc_category_large_hover_content_item">
<img src="/modules/mdthematics/views/templates/front/mini-photo.png" />
<div class="mdc_category_large_hover_content_item_values">
<span class="mdc_category_large_hover_content_item_description">Chaise de cuisine assise et dossier en bois structure en métal - Snack Connubia</span>
<span class="mdc_category_large_hover_content_item_price">À partir de 199€<sup>00</sup></span>
</div>
</div>
<div class="mdc_category_large_hover_content_item">
<img src="/modules/mdthematics/views/templates/front/mini-photo.png" />
<div class="mdc_category_large_hover_content_item_values">
<span class="mdc_category_large_hover_content_item_description">Chaise de cuisine assise et dossier en bois structure en métal - Snack Connubia</span>
<span class="mdc_category_large_hover_content_item_price">À partir de 199€<sup>00</sup></span>
</div>
</div>
</div>
<div class="mdc_category_content_container">
<div class="mdc_category_img_medium">
<img src="/modules/mdthematics/views/templates/front/category_medium.png" />
</div>
<div class="mdc_category_content">
<span class="mdc_category_title">Une chaise de cuisine <span>fonctionnelle et pratique</span></span>
<p class="mdc_category_text">La fabrication des chaises de cuisine évolue avec le temps. A l'heure actuelle, il n’est plus question de se contenter d’un meuble fonctionnel au look classique, on recherche l'esthétique. Afin de répondre à la demande, il existe, désormais, un large choix de chaises de cuisine. Que vous souhaitiez des chaises de cuisine modernes, rétro ou contemporaines, elles ont chacune un charme fou.</p>
<div class="mdc_category_btn_container">
<a class="mdc_category_btn" href="">Voir les chaises de cuisine</a>
</div>
</div>
</div>
<script>
$(".mdc_category_img_large").hover(function () {
$(".mdc_category_large_hover_content").addClass("mdc_active");
}, function () {});
$(".mdc_category_large_hover_content").mouseleave(function () {
$(this).removeClass("mdc_active");
});
</script>
</div>`,
attributes: {
title: ''
}
});
Here is my error :
More info : I did add the allowScripts: true line and It seems to come from the gjs_components content that i stored in db..
Thanks for help..
Answers (3)
Sorry, I tried to follow the tips in the stackoverflow post but nothing works.. still got that error even if I escaped the / from the </script> tag
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1763
Add <Style> tag in block content objects (not a string)
Browser = ChromeGrapesJS = Latest version ( 0.14.52 ) I am trying to create a block includes nesting content object with script, style, typ...
Issue #1566
Default style for custom blocks
Hi, I'm using GrapesJS to a page builder inside a Prestashop website. The idea is to set default template stored in DB with custom Blocks....
Issue #511
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 w...
Issue #846
Error when I tried to add rows to a table
Hi guys I'm starting to use Grapesjs and I have a problem, I am trying to add 3 new commands to create tables, add rows and cells, the tabl...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.