在 Vue 应用程序中嵌入 GrapesJS MJML答案

【问题标题】：Embedding GrapesJS MJML in a Vue application在 Vue 应用程序中嵌入 GrapesJS MJML
【发布时间】：2020-01-08 08:12:12
【问题描述】：

我正在尝试将 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>

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

【问题讨论】：

标签： vue.js vuejs2 grapesjs

【解决方案1】：

它不起作用，我已经尝试了几个月才能让它起作用。您可以做到的最好的是将您需要的 MJML 组件转换为 HTML 并制作您自己的 GrapesJS 块。

【讨论】：