如何在grapesjs中为js代码添加选项？答案

【问题标题】：How to add an option for js code in grapesjs?如何在grapesjs中为js代码添加选项？
【发布时间】：2020-04-21 18:55:06
【问题描述】：

现在我希望我的 JS 代码也被导出？这是怎么做到的？如果我们按如下方式编辑内容，我已经在块管理器中看到了这一点

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

脚本嵌入在我的 HTML 文件中，但如果我按如下方式编辑它

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

我没有在我的 HTML 文件中获取脚本内容....如何获取嵌入到内容中的脚本？为什么提取的 HTML 文件中没有显示？

【问题讨论】：

你是怎么解决的？

标签： javascript extract grapesjs

【解决方案1】：

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

Source

【讨论】：

【解决方案2】：

创建自定义代码。您可以检查默认视图代码，在该 buildEditor 函数中完成所有配置。除了HTML、CSS，还传Js

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

【讨论】：

【解决方案3】：

你需要在初始化你的grapesjs 编辑器时使用allowScripts 配置选项。

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

默认情况下禁用脚本，但此选项将其打开。

【讨论】：

我们可以添加带有样式的脚本吗？