How to support bootstrap

[dreamhuo]

Hi, I want to edit the bootstrap template with grapesjs, but it doesn't work. How to do reference bootstrapJS in grapesjs? And let both work.

[dreamhuo]

thanks

[artf]

You can place the bootstrap's <link> directly inside your template (same question #27).

[dreamhuo]

[dreamhuo]

Look at the pictures, for example：
Add
<script src="dist/jquery-3.2.1.min.js"></script> <script src="demo/assets/js/bootstrap.min.js"></script>
in grapesjs is not work.
It's normal to delete it.

[dreamhuo]

<div id="gjs">
      <!--code…-->
      <script src="dist/jquery-3.2.1.min.js"></script>
      <script src="demo/assets/js/bootstrap.min.js"></script>
 </div>

[artf]

@dreamhuo adding JS is slightly different from adding CSS (same as #51) and as in this case, it breaks stuff. I'd suggest you adding JS after the render

editor.addComponents(`
<script src="dist/jquery-3.2.1.min.js"></script>
<script src="demo/assets/js/bootstrap.min.js"></script>
`)

or even better try to load your template via config

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: `
        <div>...</div>
        <script src="dist/jquery-3.2.1.min.js"></script>
        <script src="demo/assets/js/bootstrap.min.js"></script>
      `,
      style: '.txt-red{color: red}',
  });
</script>

[dreamhuo]

Master, on your way, I always make mistakes here:
Uncaught SyntaxError: Invalid or unexpected token

[dreamhuo]

[dreamhuo]

The same is true of the addComponents method.

[dreamhuo]

@artf
Hi Master, I solved the mistake，splitting the script：

But code is not neat, is there a better way?

[artf]

Seems like browser's parser issue, can't do a lot, you might try with '<\/script>' if you want

[dreamhuo]

Thank you very much for your patience. @artf

[shimulch]

I have faced same issue. But escaping / character solved my problem.
ex.

editor.addComponents('<script src="../somejs.js"><\/script>')

[lock]

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.