Vue 可拖动 Unlayer 电子邮件编辑器 - vue-email-editor

Vue 可拖动 Unlayer 电子邮件编辑器 - vue-email-editor
插件名称 vue-email-editor
发布时间 2021年6月12日
插件作者 unlayer

一个功能强大且对开发人员友好的电子邮件编辑器,可以通过拖放轻松创建专业的时事通讯。

安装和下载:

# Yarn
$ yarn add vue-email-editor

# NPM
$ npm i vue-email-editor

使用

1. 导入并注册电子邮件编辑器。

import { EmailEditor } from 'vue-email-editor'
export default {
  components: {
    EmailEditor
  },
}

2. 将邮件编辑器添加到您的应用模板。

<EmailEditor ref="emailEditor" v-on:load="editorLoaded" />
<button v-on:click="saveDesign">保存</button>
<button v-on:click="exportHtml">导出 HTML</button>
export default {
  name: 'app',
  components: {
    EmailEditor
  },
  methods: {
    editorLoaded() {
      this.$refs.emailEditor.editor.loadDesign({});
    },
    saveDesign() {
      this.$refs.emailEditor.editor.saveDesign(
        (design) => {
          console.log('saveDesign', design);
        }
      )
    },
    exportHtml() {
      this.$refs.emailEditor.editor.exportHtml(
        (data) => {
          console.log('exportHtml', data);
        }
      )
    }
  }
}

3. 可能的选项和道具。有关完整配置,请参阅https://unlayer.com/

// 传递给Unlayer编辑器实例的选项
options: Object,

// 项目ID
projectId: Number,

// 内置和自定义工具的配置
tools: Object,

// 外观和主题配置
appearance: Object,

// 翻译字符串
locale: String,

// 最小高度
minHeight: {
  type: String,
  default: '500px',
},

变更日志:

v0.8.0 (06/10/2021)

  • 更新