javascript - How to add an option for js code in grapesjs? - Stack Overflow

admin管理员组

文章数量:1414614

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

Share Improve this question Follow asked Jan 3, 2020 at 7:25 pragnya tatapragnya tata 8744 silver badges88 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptHow to add an option for js code in grapesjsStack Overflow