如何禁用GrapesJS的embedAsBase64？配置未生效求助

1. 修正基础配置，确保设置生效 #

你的现有配置已设置embedAsBase64: false，但存在几个可能导致失效的细节：

• 移除assetManager里的storageType: ''，空值会干扰默认逻辑
• 若无需自定义AssetManager的UI/逻辑，删掉custom: true，该属性会覆盖默认的嵌入规则

修正后的基础配置：

var editor = grapesjs.init({
    height: '100%',
    container: '#gjs',
    fromElement: true,
    showOffsets: true,
    embedAsBase64: false, // 全局禁用Base64嵌入
    assetManager: {
        embedAsBase64: false, // 针对资源管理器禁用
        // assets: images // 若有预设图片列表，确保列表内的src都是外部URL
    },
});

2. 强制覆盖图片组件默认行为 #

如果基础配置仍不生效，手动修改Image组件的默认属性，确保插入时优先使用外部URL：

// 获取图片组件的类型配置
const imageType = editor.DomComponents.getType('image');
// 重写默认属性，强制使用外部URL模板
imageType.model.prototype.defaults = {
    ...imageType.model.prototype.defaults,
    src: 'https://你的默认图片URL',
    attributes: {
        ...imageType.model.prototype.defaults.attributes,
        src: 'https://你的默认图片URL'
    }
};

3. 处理本地图片上传场景（若需要） #

如果是上传本地图片后要转为外部URL，需配置后端上传接口，让GrapesJS将图片上传至服务器并获取返回的外部URL：

editor.AssetManager.add({
    upload: true,
    uploadText: '上传图片',
    params: {
        // 接口所需的验证参数，如token等
    },
    uploadUrl: 'https://你的后端上传接口地址', // 替换为实际接口地址
    onUpload: (e) => {
        // 处理上传成功的响应，将返回的URL加入资源管理器
        const res = e.detail.response;
        editor.AssetManager.add({
            src: res.url, // 假设接口返回的URL字段为url
            alt: '上传的图片'
        });
    }
});

4. 排查插件或自定义代码的干扰 #

检查你引入的GrapesJS第三方插件，确认是否有插件强制开启了Base64嵌入逻辑，或是自定义代码覆盖了embedAsBase64配置。

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