vue.js - 在 Vue 应用程序中嵌入 GrapesJS MJML

Question

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

https://imgur.com/voGh642

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

这就是我在 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>

我应该手动加载 block 吗？欢迎所有提示。

Answer 1

它不工作，我已经尝试了几个月让它工作。尽你所能将所需的 MJML 组件转换为 HTML 并制作你自己的 GrapesJS block 。