在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块。