Overview
The Editor component provides a powerful rich text editing experience powered by TipTap. It supports multiple content formats (HTML, Markdown, JSON), extensions, custom toolbars, and integrates seamlessly with forms.
Basic usage
<template>
<UEditor v-model="content" placeholder="Start typing..." />
</template>
<script setup lang="ts">
const content = ref('')
</script>
<template>
<div>
<UEditorToolbar v-model="editor" />
<UEditor v-model="content" @update:editor="editor = $event" />
</div>
</template>
<script setup lang="ts">
import type { Editor } from '@tiptap/core'
const content = ref('')
const editor = ref<Editor>()
</script>
Markdown mode
<template>
<UEditor
v-model="content"
markdown
placeholder="Write markdown..."
/>
</template>
<script setup lang="ts">
const content = ref('# Hello World\n\nThis is **markdown** content.')
</script>
Props
The editor content (HTML, Markdown, or JSON string).
starterKit
boolean | object
default:"true"
Include TipTap’s StarterKit extensions (heading, bold, italic, etc.).
placeholder
string | PlaceholderOptions
Placeholder text or configuration. Can be 'firstLine' or 'everyLine'.
markdown
boolean | object
default:"false"
Enable markdown support. Input and output will be in Markdown format.
image
boolean | object
default:"false"
Enable image support for drag & drop and paste.
mention
boolean | MentionOptions
default:"false"
Enable @mentions with autocomplete.
Additional TipTap extensions to load.
Whether the editor is editable.
autofocus
boolean | 'start' | 'end'
default:"false"
Auto-focus the editor on mount.
JSON content
The Editor can work with JSON content for more structured data:
<template>
<UEditor
v-model="jsonContent"
:content="initialContent"
/>
</template>
<script setup lang="ts">
const jsonContent = ref('')
const initialContent = {
type: 'doc',
content: [
{
type: 'paragraph',
content: [{ type: 'text', text: 'Hello World' }]
}
]
}
</script>
Custom extensions
Add custom TipTap extensions:
<template>
<UEditor v-model="content" :extensions="extensions" />
</template>
<script setup lang="ts">
import { Color } from '@tiptap/extension-color'
import { TextStyle } from '@tiptap/extension-text-style'
import { Highlight } from '@tiptap/extension-highlight'
const content = ref('')
const extensions = [Color, TextStyle, Highlight]
</script>
Events
Emitted when content changes.
Emitted with the editor instance when created.