Quick start

Render your first editor with v-model in under a minute.

A minimal editor

RichEditor.vue

<script setup lang="ts">
import { ref } from 'vue'
import { EchoEditor, BaseKit, History, Heading, Bold, Italic, Underline, Link, BulletList, OrderedList } from 'vue-echo-editor'
import 'vue-echo-editor/style.css'

const content = ref('<p>Hello <strong>Echo Editor</strong>!</p>')

// Create the extensions once — never inside a computed or a template expression
const extensions = [BaseKit, History, Heading, Bold, Italic, Underline, Link, BulletList, OrderedList]
</script>

<template>
  <EchoEditor v-model="content" :extensions="extensions" :max-height="480" />
</template>

BaseKit is required: it provides the document model, paragraphs, placeholder, character count and the bubble menu. Everything else is opt-in — the toolbar is built from the extensions you register, in the order you register them.

Choose an output format

<EchoEditor v-model="html" output="html" :extensions="extensions" />
<EchoEditor v-model="json" output="json" :extensions="extensions" />
<EchoEditor v-model="text" output="text" :extensions="extensions" />
<EchoEditor v-model="md" output="markdown" :extensions="[...extensions, Markdown]" />

Every extension accepts spacer (a separator before its button) and divider (a separator after it):

const extensions = [
  BaseKit,
  History,
  Heading.configure({ spacer: true }),
  Bold,
  Italic,
  Underline,
  Link.configure({ spacer: true }),
  BulletList,
  OrderedList,
]

Hide an extension's button while keeping its functionality with toolbar: false:

Bold.configure({ toolbar: false }) // Mod-B still works

Access the Tiptap editor

<script setup lang="ts">
import { shallowRef } from 'vue'
import type { EditorInstance } from 'vue-echo-editor'

const editor = shallowRef<EditorInstance>()
</script>

<template>
  <EchoEditor :extensions="extensions" @create="({ editor: e }) => (editor = e)" />
  <button @click="editor?.chain().focus().toggleBold().run()">Bold</button>
</template>

You can also use a template ref: editorRef.value.editor.

Next steps

On This Page

A minimal editor
Choose an output format
Group toolbar buttons
Access the Tiptap editor
Next steps

Quick start

A minimal editor

Choose an output format

Group toolbar buttons

Access the Tiptap editor

Next steps

Configuration

Extensions

Nuxt

Markdown