How to add an option for js code in grapesjs?

Question

Now I want my JS code also to be exported? How is this done? I have seen that in the block manager if we edit the content as follows

editor.BlockManager.add("sample input field", {
  label: "input-field",
  category: "sample",
  content: {
            script:"my script"
           }
});

the script is embedded in my HTML file but if I edit it as follows

content:` some HTML code
<script type="text/javascript" myscript></script>`

I do not get the script content in my HTML file....how to get the script embedded in the content? Why is it not being displayed in the extracted HTML file?

How did you solve it? – Muhammad Mabrouk Jun 26 '21 at 22:18 — Muhammad Mabrouk, Jun 26 '21 at 22:18

score 4 · Answer 1 · answered Jan 28 '20 at 23:50

4

You need to use the allowScripts config option when initializing your grapesjs editor.

const editor = grapesjs.init({
    ... // the rest of your grapesjs config
    allowScripts: 1,
});

Scripts are disabled by default, but this option turns them on.

answered Jan 28 '20 at 23:50

GiorgiosJames

742
7
11

can we add script with styles? – Sarthak Raval Nov 23 '21 at 06:13

score 0 · Answer 2 · answered Feb 20 '20 at 11:56

Create a custom code. You can check the default view code, in that buildEditor function is there where all config is done. Along with HTML, CSS, pass Js also

const oHtmlEd = buildEditor('htmlmixed', 'hopscotch', 'HTML', editor);
const oCsslEd = buildEditor('css', 'hopscotch', 'CSS', editor);
const oJSlEd = buildEditor('js', 'hopscotch', 'JS', editor);

score 0 · Answer 3 · answered Nov 23 '21 at 06:28

0

const editor = grapesjs.init({
  canvas: {
        scripts: ['https://.../somelib.min.js'],
        // The same would be for external styles
        styles: ['https://.../ext-style.min.css'],
       }
   });

Source

answered Nov 23 '21 at 06:28

Sarthak Raval

1,001
1
10
23

How to add an option for js code in grapesjs?

3 Answers3