在Vue应用程序中嵌入GrapesJS MJML

Question

我正在尝试将GrapesJS MJML集成到基于Vue的应用程序中，但我无法正确地配置它。编辑器似乎已经加载，但是，我得到的结果如下：

https://imgur.com/voGh642

• MJML未正确呈现
• MJML块不可用

这就是我如何在Vue中初始化GrapesJS MJML的方式：

<template>
    <section>
        <div id="gjs"></div>
        <div id="blocks"></div>
    </section>
</template>

<script>
    import grapesjs from 'grapesjs';
    import 'grapesjs-mjml';
    import 'grapesjs/dist/css/grapes.min.css';

    export default {
        name: 'dashboard',
        data: function () {
            return {
                editor: null
            }
        },
        mounted: function () {
            this.editor = grapesjs.init({
                fromElement: 1,
                container : '#gjs',
                plugins: ['grapesjs-mjml'],
                pluginsOpts: {
                    ['grapesjs-mjml']: {/* ...options */}
                },
                blockManager: {
                    appendTo: '#blocks',
                    blocks: [
                    ]
                }
            });
        }
    }
</script>

我应该手动加载这些块吗？所有提示都是欢迎的。

Answer 1

它不起作用，我几个月来一直在努力让它起作用。最好的方法就是将所需的MJML组件转换为HTML，并创建自己的GrapesJS块。