Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Drag-n-Drop Email Editor Component for Vue.js

NotificationsYou must be signed in to change notification settings

unlayer/vue-email-editor

Repository files navigation

The excellent drag-n-drop email editor byUnlayer as aVuewrapper component. This is the most powerful and developer friendly visual email builder for your app.

Video Overview
Vue Email Editor
Watch video overview:https://youtu.be/MIWhX-NF3j8

Live Demo

Check out the live demo here:https://vue-email-editor-demo.netlify.app/ (Source Code)

Installation

The easiest way to use Vue Email Editor is to install it from Npm or Yarn and include it in your own Vue build process.

npm install vue-email-editor --save

or

yarn add vue-email-editor

Usage

Next, you'll need to import the Email Editor component to your app.

App.vue

<template><divid="app"><divclass="container"><divid="bar"><h1>Vue Email Editor (Demo)</h1><buttonv-on:click="saveDesign">Save Design</button><buttonv-on:click="exportHtml">Export HTML</button></div><EmailEditorref="emailEditor"v-on:load="editorLoaded"v-on:ready="editorReady"/></div></div></template><script>import{EmailEditor}from'vue-email-editor';exportdefault{name:'app',components:{      EmailEditor,},methods:{// called when the editor is creatededitorLoaded(){console.log('editorLoaded');// Pass the template JSON here// this.$refs.emailEditor.editor.loadDesign({});},// called when the editor has finished loadingeditorReady(){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>

Methods

methodparamsdescription
loadDesignObject dataTakes the design JSON and loads it in the editor
saveDesignFunction callbackReturns the design JSON in a callback function
exportHtmlFunction callbackReturns the design HTML and JSON in a callback function

See theexample source for a reference implementation.

Properties

  • editorIdString HTML div id of the container where the editor will be embedded (optional)
  • minHeightString minimum height to initialize the editor with (default 500px)
  • optionsObject options passed to the Unlayer editor instance (default {})
  • toolsObject configuration for the built-in and custom tools (default {})
  • appearanceObject configuration for appearance and theme (default {})
  • projectIdInteger Unlayer project ID (optional)
  • localeString translations string (default en-US)

See theUnlayer Docs for all available options.

Here's an example using the above properties...

App.vue

<template><divid="app"><divclass="container"><divid="bar"><h1>Vue Email Editor (Demo)</h1><buttonv-on:click="saveDesign">Save Design</button><buttonv-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';exportdefault{name:'app',components:{      EmailEditor,},data(){return{minHeight:'1000px',locale:'en',projectId:0,// replace with your project idtools:{// disable image toolimage:{enabled:false,},},options:{},appearance:{theme:'dark',panels:{tools:{dock:'right',},},},};},methods:{// called when the editor is creatededitorLoaded(){console.log('editorLoaded');// Pass your template JSON here// this.$refs.emailEditor.editor.loadDesign({});},// called when the editor has finished loadingeditorReady(){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>

Custom Tools

Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential.Learn More

Custom Tools

Localization

You can submit new language translations by creating a PR on this GitHub repo:https://github.com/unlayer/translations. Translations managed byPhraseApp

License

Copyright (c) 2024 Unlayer.MIT Licensed.

Releases

No releases published

Packages

No packages published

Contributors6

[8]ページ先頭
©2009-2025 Movatter.jp