EmailEditor

EmailEditor is the highest-level way to embed the Vuemail editor. It creates the editor, mounts the default editor UI, and exposes an API for exporting HTML, plain text, and JSON through a template ref and its events. Use it when you want a batteries-included editor. If you need full control over the provider, overlays, or extension list, compose the editor from the lower-level APIs instead, starting with EditorProvider.

EmailEditor works out of the box, but ships unstyled. To style the default bubble menus, slash command menu, and inspector, import the default theme separately:

import '@vuemaildev/editor/themes/default.css';

See styling for details on customizing the editor’s appearance.

Import

import '@vuemaildev/editor/themes/default.css';
import { EmailEditor, type EmailEditorRef } from '@vuemaildev/editor';

Signature

const EmailEditor: new () => ComponentPublicInstance<EmailEditorProps> & EmailEditorRef;

A Vue component that takes the props below, and whose template ref exposes the EmailEditorRef.

Default behavior

When rendered without a custom extensions prop, EmailEditor configures:

If on-upload-image is provided, the image upload extension is appended automatically.

Props

Content

Initial editor content. Accepts TipTap JSON or an HTML string.

EditorThemeInput

default:"'basic'"

Built-in theme preset or custom theme object used by the default EmailTheming extension. Changing it creates the editor again with the new theme.

boolean

default:"true"

Toggles read-only mode for the editor content.

string

Overrides the default placeholder text. When omitted, paragraphs show Press '/' for commands.

Configures when the default text bubble menu should stay hidden.

Extensions

Replaces the default extensions array. Use this when you want more control over the editor schema or plugin list.

(file: File) => Promise<{ url: string }>

Enables image upload for paste, drop, and image insertion flows. Resolve with the final hosted image URL. See Image Upload for setup patterns and Image Upload API for the lower-level composable, commands, and types.

string

Applied to the underlying editor container element.

string[]

default:"['button', 'horizontalRule']"

Prevents the default text bubble menu from appearing when one of these node types is active.

string[]

default:"['link']"

Prevents the default text bubble menu from appearing when one of these mark types is active.

Events

(ref: EmailEditorRef) => void

Emitted on every content update. The handler receives the same helper object exposed through the template ref.

(ref: EmailEditorRef) => void

Emitted once after the editor instance is mounted and ready.

Slots

slot

Additional UI rendered with the editor, once it’s created, which can use the editor through useCurrentEditor(). It renders as a sibling of the editor content area, which makes layouts like split-pane editors and inspector sidebars work naturally.

Ref API

interface EmailEditorRef {
  getEmail(): Promise<{ html: string; text: string }>;
  getEmailHTML(): Promise<string>;
  getEmailText(): Promise<string>;
  getJSON(): JSONContent;
  readonly editor: Editor | null;
}

() => Promise<{ html: string; text: string }>

Serializes the current document to email-ready HTML and plain text in one call.

() => Promise<string>

Returns only the HTML export.

() => Promise<string>

Returns only the plain text export.

() => JSONContent

Returns the current TipTap JSON document.

Editor | null

The underlying TipTap editor instance. null until the editor is ready.

Before the editor is ready, the export methods resolve to empty output and getJSON() returns an empty document with type: 'doc' and an empty content array.

Example

<script setup lang="ts">
import '@vuemaildev/editor/themes/default.css';
import { EmailEditor, type EmailEditorRef } from '@vuemaildev/editor';
import { ref, useTemplateRef } from 'vue';

const emailEditor = useTemplateRef<EmailEditorRef>('email-editor');
const html = ref('');

async function handleExport() {
  if (!emailEditor.value) return;
  html.value = await emailEditor.value.getEmailHTML();
}

function onReady(editorRef: EmailEditorRef) {
  console.log(editorRef.getJSON());
}

function onUpdate(editorRef: EmailEditorRef) {
  console.log(editorRef.editor?.isEmpty);
}
</script>

<template>
  <div>
    <EmailEditor
      ref="email-editor"
      content="<h1>Welcome</h1><p>Edit this email.</p>"
      theme="basic"
      @ready="onReady"
      @update="onUpdate"
    />

    <button type="button" @click="handleExport">Export HTML</button>

    <textarea v-if="html" readonly :value="html" rows="12" />
  </div>
</template>

Overview

Features

Advanced

API Reference

Import

Signature

Default behavior

Props

bubble-menu options

Events

Slots

Ref API

Example

See also

​Import

​Signature

​Default behavior

​Props

​bubble-menu options

​Events

​Slots

​Ref API

​Example

​See also

Import

Signature

Default behavior

Props

bubble-menu options

Events

Slots

Ref API

Example

See also