如何使用vue-email-editor?

t9aqgxwy  于 2023-01-09  发布在  Vue.js
关注(0)|答案(1)|浏览(273)

我正在尝试将vue-email-editor集成到我的源代码中。我按照说明进行了操作,但仍然不能集成vue-email-editor。下面是我的操作方法和我得到的错误:
步骤1:npm install vue-email-editor --save
步骤2:在应用程序版本中

<template>
  <div id="app">
    <div class="container">
      <div id="bar">
        <h1>Vue Email Editor (Demo)</h1>

        <button v-on:click="saveDesign">Save Design</button>
        <button v-on:click="exportHtml">Export HTML</button>
      </div>

      <EmailEditor
        :appearance="appearance"
        :min-height="minHeight"
        :project-id="projectId"
        :locale="locale"
        :tools="tools"
        :options="options"
        ref="emailEditor"
        v-on:load="editorLoaded"
        v-on:ready="editorReady"
      />
    </div>
  </div>
</template>

<script>
  import { EmailEditor } from 'vue-email-editor';

  export default {
    name: 'app',
    components: {
      EmailEditor,
    },
    data() {
      return {
        minHeight: '1000px',
        locale: 'en',
        projectId: 0, // replace with your project id
        tools: {
          // disable image tool
          image: {
            enabled: false,
          },
        },
        options: {},
        appearance: {
          theme: 'dark',
          panels: {
            tools: {
              dock: 'right',
            },
          },
        },
      };
    },
    methods: {
      // called when the editor is created
      editorLoaded() {
        console.log('editorLoaded');
        // Pass your template JSON here
        // this.$refs.emailEditor.editor.loadDesign({});
      },
      // called when the editor has finished loading
      editorReady() {
        console.log('editorReady');
      },
      saveDesign() {
        this.$refs.emailEditor.editor.saveDesign((design) => {
          console.log('saveDesign', design);
        });
      },
      exportHtml() {
        this.$refs.emailEditor.editor.exportHtml((data) => {
          console.log('exportHtml', data);
        });
      },
    },
  };
</script>

然后我运行源代码并得到错误:

Uncaught TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:166893:41)
    at app.js?id=ee06f5f7860fd239b953:186888:68
    at app.js?id=ee06f5f7860fd239b953:187073:2
    at ./node_modules/vue-email-editor/dist/vue-email-editor.common.js (app.js?id=ee06f5f7860fd239b953:187075:12)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./frontend/src/App.vue?vue&type=script&lang=js& (app.js?id=ee06f5f7860fd239b953:117639:74)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./frontend/src/App.vue?vue&type=script&lang=js& (app.js?id=ee06f5f7860fd239b953:110481:194)
    at __webpack_require__ (app.js?id=ee06f5f7860fd239b953:64:30)
    at ./frontend/src/App.vue (app.js?id=ee06f5f7860fd239b953:110445:91)

参考链接:https://github.com/unlayer/vue-email-editor
我已经搜索了很多,但没有一个解决方案,可以帮助我修复这个错误。如果有人已经成功集成,请给我一个解决方案,以修复上述错误。谢谢。

2ul0zpep

2ul0zpep1#

here也报告了这个问题,它说要将版本降级到1.0.0才能工作。
这是vue-email-editorversion 1.0.0codesandbox demo

  • (无法创建代码段,因为此库的CDN不可用。)*

相关问题