如何在GrapeJS画布中同时添加外部脚本与内部脚本？

因为GrapeJS的canvas.scripts配置仅支持外部脚本URL数组，无法直接传入内联代码，你可以通过以下方式实现需求：

方法一：初始化完成后动态插入内联脚本 #

利用GrapeJS的Canvas API获取编辑器iframe的文档对象，手动创建并插入script标签：

const editor = grapesjs.init({
    container: '#gjs',
    canvas: {
        scripts: ['https://somelink.js', 'https://anotherlink.js']
    },
});

// 等待编辑器初始化完成
editor.on('ready', () => {
    // 获取canvas的iframe文档
    const canvasDoc = editor.Canvas.getDocument();
    // 创建script元素
    const scriptEl = canvasDoc.createElement('script');
    // 写入运行时提取的脚本内容
    scriptEl.textContent = `function alertMe() { alert('Ninja') }`;
    // 将脚本添加到canvas文档的body中
    canvasDoc.body.appendChild(scriptEl);
});

方法二：封装复用函数（适合多脚本场景） #

如果需要添加多个运行时脚本，可以把插入逻辑封装成函数，方便调用：

const editor = grapesjs.init({
    container: '#gjs',
    canvas: {
        scripts: ['https://somelink.js', 'https://anotherlink.js']
    },
});

// 封装插入内联脚本的函数
function addInlineScript(editor, scriptContent) {
    const canvasDoc = editor.Canvas.getDocument();
    const scriptEl = canvasDoc.createElement('script');
    scriptEl.textContent = scriptContent;
    canvasDoc.head.appendChild(scriptEl);
}

// 编辑器就绪后批量添加脚本
editor.on('ready', () => {
    addInlineScript(editor, `function alertMe() { alert('Ninja') }`);
    addInlineScript(editor, `function logMessage() { console.log('GrapeJS inline script works!') }`);
});

处理脚本依赖问题 #

如果你的内联脚本依赖已添加的外部脚本，可以监听canvas:scripts:load事件，确保外部脚本加载完成后再插入内联代码：

editor.on('canvas:scripts:load', () => {
    const canvasDoc = editor.Canvas.getDocument();
    const scriptEl = canvasDoc.createElement('script');
    scriptEl.textContent = `function alertMe() { alert('Ninja') }`;
    canvasDoc.body.appendChild(scriptEl);
});

内容的提问来源于stack exchange，提问作者Prabhakaran