英文:
Vuejs: How to use vue-email-editor?
问题
我试图将vue-email-editor集成到我的源代码中。我按照说明进行了操作，但仍然无法集成vue-email-editor。以下是我的操作步骤以及我遇到的错误：
步骤1：npm install vue-email-editor --save
步骤2：在App.vue中
<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, // 替换为您的项目ID
tools: {
// 禁用图像工具
image: {
enabled: false,
},
},
options: {},
appearance: {
theme: 'dark',
panels: {
tools: {
dock: 'right',
},
},
},
};
},
methods: {
// 编辑器创建时调用
editorLoaded() {
console.log('editorLoaded');
// 在此处传递您的模板JSON
// this.$refs.emailEditor.editor.loadDesign({});
},
// 编辑器加载完成后调用
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
我已经搜索了很多，但没有找到可以帮助我解决这个错误的解决方案。如果有人成功集成过，请给我提供解决上述错误的方法。谢谢。
英文:
I'm trying to integrate vue-email-editor into my source. I followed the instructions but still can't integrate vue-email-editor. And here is how I do it and the error I'm getting:
Step 1: npm install vue-email-editor --save
Step 2: In App.vue
<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>
And then I run source and get the error:
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)
Reference links : https://github.com/unlayer/vue-email-editor
I have searched a lot but there is not a solution that helps me to fix this error. If anyone has successfully integrated, please give me a solution to fix the above error. Thanks.
答案1
得分: 1
这个问题也在这里报告了，并且建议将版本降级到1.0.0以使其可用。
这是带有1.0.0版本的vue-email-editor的codesandbox演示。
（我无法创建代码段，因为此库的CDN不可用。）
英文:
This issue is also reported here, and it says to downgrade the version to 1.0.0 to make it workable.
Here is the codesandbox demo of vue-email-editor with version 1.0.0.
(I could not create snippet because CDN of this library is not available.)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论