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?

Answer 1

Updated: Answer as of Jan 2022 (for grapejs > v0.18.2)

Context:

The original method for this was deprecated as of this commit

As per the hint in the deprecation comment, the new method is to use the parser options, with docs here and code reference here

Latest Solution:

When initializing your grapesjs editor, you need to include the HTMLParser option, including the allowScripts parameter:

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

Original Answer (for grapesjs < v0.18.2)

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.