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?

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?

• javascript
• extract
• grapesjs

• How did you solve it? – Muhammad Mabrouk Commented Jun 26, 2021 at 22:18

3 Answers 3

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

Context:

The original method for this was deprecated as of this mit

As per the hint in the deprecation ment, 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.

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);

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

Source