vue.js - 在 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 块。