django - GrapesJS 设置链接“src”占位符 onLoad

Question

我实现了一个小的 GrapesJS 编辑器，它允许编辑 Django/Jinja2 模板。GrapesJS 默认尝试获取src我的元素的图像：

<a href="{{product_url}}" target="_blank"><img src="{{image_url}}" width="130"/></a>

每次我将 HTML 模板加载到 GrapesJS 编辑器时都会发生请求： http://localhost:8000/%7B%7Bimage_url%7D%7D 404 (Not Found)

尽管有这个 404 调用，GrapesJS 编辑器也能正常工作。但我想处理对图像的请求。因此，而不是 GrapesJS 进行默认调用，http://localhost:8000/%7B%7Bimage_url%7D%7D我想呈现一个占位符图像让我们说：https://placekitten.com/200/300

我目前拥有的：

editor = grapesjs.init({
    container: '#gjs',
    assetManager: {},
});

editor.setComponents('<a href="{{product_url}}" target="_blank"><img src="{{image_url}}" width="130"/></a>');

// querySelector is returning an empty Array of Nodes
editor.on('load', () => {
    const body = editor.Canvas.getBody().ownerDocument;
    body.querySelectorAll('a').forEach(function(el) {
        let link = el;
        link.setAttribute('src', "http://via.placeholder.com/350x150");
    });
    editor.store();
});