1# Editor Layout
2 
3Build a rich text editor with toolbars, slash commands, mentions, and drag-and-drop.
4 
5## When to use
6 
7- Note-taking apps, CMS editors
8- Collaborative editing interfaces
9- Any rich text editing need (supports JSON, HTML, and Markdown)
10 
11## Component tree
12 
13```
14UEditor
15├── UEditorToolbar (fixed / bubble / floating)
16├── UEditorDragHandle
17├── UEditorSuggestionMenu
18├── UEditorMentionMenu
19└── UEditorEmojiMenu
20```
21 
22## Basic editor
23 
24```vue
25<script setup lang="ts">
26const content = ref({
27  type: 'doc',
28  content: [
29    {
30      type: 'heading',
31      attrs: { level: 1 },
32      content: [{ type: 'text', text: 'Hello World' }]
33    },
34    {
35      type: 'paragraph',
36      content: [{ type: 'text', text: 'Start writing...' }]
37    }
38  ]
39})
40</script>
41 
42<template>
43  <UEditor v-slot="{ editor }" v-model="content">
44    <UEditorToolbar :editor="editor" />
45    <UEditorSuggestionMenu :editor="editor" />
46    <UEditorMentionMenu
47      :editor="editor"
48      :items="[
49        { label: 'Benjamin', avatar: { src: 'https://github.com/benjamincanac.png' } },
50        { label: 'Sébastien', avatar: { src: 'https://github.com/atinux.png' } }
51      ]"
52    />
53    <UEditorEmojiMenu :editor="editor" />
54    <UEditorDragHandle :editor="editor" />
55  </UEditor>
56</template>
57```
58 
59> If you encounter prosemirror-related errors, add prosemirror packages to `vite.optimizeDeps.include` in `nuxt.config.ts`.
60 
61## Key components
62 
63- `UEditor` — rich text editor. `v-model` accepts JSON (default), HTML, or Markdown via `content-type` prop. Default slot provides `{ editor, handlers }` — `editor` is the Tiptap instance, `handlers` contains action functions for toolbar/menus.
64- `UEditorToolbar` — toolbar with `layout`: `'fixed'` (default), `'bubble'` (on selection), `'floating'` (on empty lines).
65- `UEditorDragHandle` — block drag-and-drop handle.
66- `UEditorSuggestionMenu` — slash command menu (type `/` to open).
67- `UEditorMentionMenu` — `@` mention menu.
68- `UEditorEmojiMenu` — emoji picker (type `:` to open).
69 
70## Toolbar modes
71 
72```vue
73<!-- Fixed (default) — always visible at top -->
74<UEditorToolbar :editor="editor" />
75 
76<!-- Bubble — appears on text selection -->
77<UEditorToolbar :editor="editor" layout="bubble" />
78 
79<!-- Floating — appears on empty lines -->
80<UEditorToolbar :editor="editor" layout="floating" />
81```
82 
83## Content types
84 
85```vue
86<!-- JSON (default) -->
87<UEditor v-model="jsonContent" />
88 
89<!-- HTML -->
90<UEditor v-model="htmlContent" content-type="html" />
91 
92<!-- Markdown -->
93<UEditor v-model="markdownContent" content-type="markdown" />
94```
95 
96## With document sidebar
97 
98Combine with Dashboard layout for a multi-document editor:
99 
100```vue [layouts/editor.vue]
101<template>
102  <UDashboardGroup>
103    <UDashboardSidebar collapsible resizable>
104      <template #header>
105        <UButton icon="i-lucide-plus" label="New document" block />
106      </template>
107 
108      <template #default="{ collapsed }">
109        <UNavigationMenu
110          :collapsed="collapsed"
111          :items="documents.map(doc => ({
112            label: doc.title,
113            to: `/editor/${doc.id}`,
114            icon: 'i-lucide-file-text'
115          }))"
116          orientation="vertical"
117        />
118      </template>
119    </UDashboardSidebar>
120 
121    <slot />
122  </UDashboardGroup>
123</template>
124```
125 
126```vue [pages/editor/[id].vue]
127<script setup lang="ts">
128definePageMeta({ layout: 'editor' })
129 
130const content = ref({ type: 'doc', content: [] })
131</script>
132 
133<template>
134  <UDashboardPanel>
135    <template #header>
136      <UDashboardNavbar title="Editor">
137        <template #right>
138          <UButton label="Save" icon="i-lucide-save" />
139        </template>
140      </UDashboardNavbar>
141    </template>
142 
143    <UContainer class="py-8">
144      <UEditor v-slot="{ editor }" v-model="content">
145        <UEditorToolbar :editor="editor" />
146        <UEditorSuggestionMenu :editor="editor" />
147        <UEditorEmojiMenu :editor="editor" />
148        <UEditorDragHandle :editor="editor" />
149      </UEditor>
150    </UContainer>
151  </UDashboardPanel>
152</template>
153```
154