javascript - 如何在grapesjs中为js代码添加选项？

Question

现在我希望我的 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 文件中？

Answer 1

初始化grapesjs 编辑器时，您需要使用allowScripts 配置选项。

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

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

Answer 2

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

资源

Answer 3

创建自定义代码。您可以检查默认视图代码，在该 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);