Issue #3244💬 AnsweredOpened January 21, 2021by nithinpillalamarri1230 reactions
style-managercomponentstypescript

Grapes js version v0.16.34 giving unexpected script code after loading saved html

快速解答by nithinpillalamarri123

kindly any one help me to get out of this issue editor.setComponents(html text ); not working the script as expected after loading from saved template html while drag and drop its working after saving and again loading that html with editor.setComponents(html text ); then the existing script replacing the symbols like...

Read full answer below ↓

Question

代码片段HTML
attaching code:
while saving the html:

<div class="gjs-row">
  <div class="gjs-cell">
    <div class="gjs-row">
      <div class="gjs-cell">
        <div id="i6x6">
          <div id="bsrne9exd5" style="height:300px"  tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
      <div class="gjs-cell">
        <div id="ibc4">
          <div id="3drqn6v2q5" style="height:300px"  tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>var items = document.querySelectorAll('#i6x6');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var columnDefs = [{
        headerName: 'Make', field: 'make',sortable: true, filter: true}
                        , {
                          headerName: 'Model', field: 'model',sortable: true, filter: true}
                        ,{
                          headerName: 'Price', field: 'price',sortable: true, filter: true}
                       ];
      var rowData = [{
        make: 'Toyota', model: 'Celica', price: 35000}
                     ,{
                       make: 'Ford', model: 'Mondeo', price: 32000}
                     ,{
                       make: 'Porsche', model: 'Boxter', price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById('bsrne9exd5');
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
  var items = document.querySelectorAll('#ibc4');
  for (var i = 0, len = items.length; i < len; i++) {
    (function(){
      var columnDefs = [{
        headerName: 'Make', field: 'make',sortable: true, filter: true}
                        , {
                          headerName: 'Model', field: 'model',sortable: true, filter: true}
                        ,{
                          headerName: 'Price', field: 'price',sortable: true, filter: true}
                       ];
      var rowData = [{
        make: 'Toyota', model: 'Celica', price: 35000}
                     ,{
                       make: 'Ford', model: 'Mondeo', price: 32000}
                     ,{
                       make: 'Porsche', model: 'Boxter', price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById('3drqn6v2q5');
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
</script>



after saving the code become:

<div class="gjs-row">
  <div class="gjs-cell">
    <div class="gjs-row">
      <div class="gjs-cell">
        <div id="iepv">
          <div id="4h942l66s5" tg="DataGrid" tagname="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
      <div class="gjs-cell">
        <div id="iiih">
          <div id="l6r4s71nr5" tg="DataGrid" tagname="DataGrid" class="ag-theme-alpine">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="loader" class="loader text-center d-none">
  <div id="ie5kf" class="spinner-border text-primary">
  </div> 
  <div id="iqy34">Processing.........
  </div>
</div>
<input type="hidden" id="solutionName" name="solutionName" value="finalTest"/>
<input type="hidden" id="templateId" name="templateId" value="29742b00-897b-4f4e-9a58-4c8c63b9a8d8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script src="/utils.js"></script>
<script id="script_initial">$(document).ready(function(event){
    utils.initialize()}
                                             );
</script>
<script>var items = document.querySelectorAll(&#039;#iepv&#039;);
  for (var i = 0, len = items.length; i &lt; len; i++) {
    (function(){
      var columnDefs = [{
        headerName: &#039;
        Make&#039;
        , field: &#039;
        make&#039;
        ,sortable: true, filter: true}
                        , {
                          headerName: &#039;
                          Model&#039;
                          , field: &#039;
                          model&#039;
                          ,sortable: true, filter: true}
                        ,{
                          headerName: &#039;
                          Price&#039;
                          , field: &#039;
                          price&#039;
                          ,sortable: true, filter: true}
                       ];
      var rowData = [{
        make: &#039;
        Toyota&#039;
        , model: &#039;
        Celica&#039;
        , price: 35000}
                     ,{
                       make: &#039;
                       Ford&#039;
                       , model: &#039;
                       Mondeo&#039;
                       , price: 32000}
                     ,{
                       make: &#039;
                       Porsche&#039;
                       , model: &#039;
                       Boxter&#039;
                       , price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById(&#039;4h942l66s5&#039;);
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
  var items = document.querySelectorAll(&#039;#iiih&#039;);
  for (var i = 0, len = items.length; i &lt; len; i++) {
    (function(){
      var columnDefs = [{
        headerName: &#039;
        Make&#039;
        , field: &#039;
        make&#039;
        ,sortable: true, filter: true}
                        , {
                          headerName: &#039;
                          Model&#039;
                          , field: &#039;
                          model&#039;
                          ,sortable: true, filter: true}
                        ,{
                          headerName: &#039;
                          Price&#039;
                          , field: &#039;
                          price&#039;
                          ,sortable: true, filter: true}
                       ];
      var rowData = [{
        make: &#039;
        Toyota&#039;
        , model: &#039;
        Celica&#039;
        , price: 35000}
                     ,{
                       make: &#039;
                       Ford&#039;
                       , model: &#039;
                       Mondeo&#039;
                       , price: 32000}
                     ,{
                       make: &#039;
                       Porsche&#039;
                       , model: &#039;
                       Boxter&#039;
                       , price: 72000}
                    ];
      var gridOptions = {
        defaultColDef: {
          resizable: true }
        ,columnDefs: columnDefs,rowData: rowData};
      var gridDiv = document.getElementById(&#039;l6r4s71nr5&#039;);
      new agGrid.Grid(gridDiv, gridOptions);
    }
     .bind(items[i]))();
  }
</script>

editor.setComponents(HTML String);  changing  ' to  &#039; like all the symbols like < or >are changin to browser undestanding way kindly help me out to resolve this

Answers (3)

nithinpillalamarri123• January 21, 2021

kindly any one help me to get out of this issue editor.setComponents(html text ); not working the script as expected after loading from saved template html while drag and drop its working after saving and again loading that html with editor.setComponents(html text ); then the existing script replacing the symbols like ' < > with browser related codes and this is happening in version v0.16.34 only

ClaudeCode• May 17, 2026

Thanks for reporting this, @nithinpillalamarri123.

Thanks for sharing your report about grapes js version v0.16.34 giving unexpected script code after loading saved html. To help the team investigate and prioritize this:

Please provide:

  1. A minimal reproducible example (CodeSandbox/JSFiddle)
  2. Your GrapesJS version number
  3. Browser and OS information
  4. Any error messages from the browser console
  5. Steps to reproduce the issue

What helps most:

  • Minimal code example (not your full project)
  • Screen recording or screenshot showing the issue
  • Expected vs actual behavior clearly stated
  • GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.

Related Questions and Answers

Continue research with similar issue discussions.

Issue #3116

[HELP WANTED] How to load css that can viewed in code viewer and also exported while saving

Hi :wave: I am trying to load some CSS within the editor as part of the theme, I am able to link stylesheets as part of loading but the pro...

2 answersUpdated November 9, 2020

Issue #6152

CSS added via custom code persists after custom code component is removed

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...

4 answersUpdated October 9, 2024

Issue #3512

Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin

Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...

3 answersUpdated July 6, 2021

Issue #5090

Component script function runs twice after page save

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 112.0.5615.137 (Official Build) (arm64) Re...

2 answersUpdated May 8, 2023

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

预设插件组成部分方块资产指挥I18n层次风格存储RTE通讯网页场地建设者