On this page
Text Editor
The Text Editor component is used for rich-text editing. It is based on Tiptap.
Usage
The TextEditor component is very flexible in terms of layout and features. It provides building blocks like menus and slots for building any type of editor experience you might want.
Here is a basic version with fixed menu at the top.
vue
<template>
<TextEditor
editor-class="prose-sm border max-w-none rounded-b-lg p-3 overflow-auto h-64 focus:outline-none"
:fixedMenu="true"
:content="content"
@change="(val) => (content = val)"
:mentions="mentions"
/>
</template>
<script setup>
import { TextEditor } from 'frappe-ui'
let mentions = [
{ label: 'Husain Wrenn', value: 'hwrenn0@spotify.com' },
{ label: 'Gwenore Fitter', value: 'gfitter1@foxnews.com' },
{ label: 'Ricard Claussen', value: 'rclaussen2@imgur.com' },
{ label: 'Rickard Higford', value: 'rhigford3@multiply.com' },
{ label: 'Lazarus MacKey', value: 'lmackey4@prlog.org' },
{ label: 'Karrah Ege', value: 'kege5@prweb.com' },
{ label: 'Seward Godin', value: 'sgodin6@msu.edu' },
{ label: 'Milzie Sanches', value: 'msanches7@senate.gov' },
{ label: 'Walt Arrington', value: 'warrington8@tripod.com' },
{ label: 'Seline Bonifas', value: 'sbonifas9@hibu.com' },
]
</script>
If you are on Vue version 3.2 or earlier, you need to add this line in your main.js file:
js
app.config.unwrapInjectedRef = true
You can read more about it here: https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity
Props
| Name | Default | Value | Description |
|---|---|---|---|
content | null | String | HTML string to set as the initial value in the editor |
placeholder | null | String | Placeholder text to show when the content is empty |
editorClass | null | String | Object | Array | Valid CSS class values |
editable | true | Boolean | Enable/disable editing |
fixedMenu | null | true | false | Array | See customizing menu |
bubbleMenu | null | true | false | Array | See customizing menu |
floatingMenu | null | true | false | Array | See customizing menu |
extensions | null | Array | Tiptap extensions |
starterkitOptions | null | Object | Options to pass to the Starterkit Extension |
mentions | null | Array | Array of {label, value} for mentions list |
Customizing Menu
There are three types of menus available for the editor.
- Fixed Menu: Menu that is always visible at a fixed place
- Bubble Menu: Menu that shows up when you select some text
- Floating Menu: Menu that shows up on a new line
You can choose to use any of these or a combination of these in your editor. Here are some examples of customized editors:
Fixed menu with custom buttons
You can customize which buttons show up in the menu by passing an array of button names. You can find the list of all buttons available here.
vue
<template>
<TextEditor
editor-class="!prose-sm border max-w-none rounded-b-lg p-3 overflow-auto h-64 focus:outline-none"
:fixedMenu="fixedMenuMinimalButtons"
:content="content"
@change="(val) => (content = val)"
/>
</template>
<script setup>
import { TextEditor } from 'frappe-ui'
let content = ref('[initial html content]')
let fixedMenuMinimalButtons = [
'Paragraph',
['Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'],
'Separator',
'Bold',
'Italic',
'Separator',
'Bullet List',
'Numbered List',
'Separator',
'Link',
'Blockquote',
'Code',
]
</script>
Minimal editor with bubble menu
Setting bubbleMenu to true will show a bubble menu on text selection. You can also pass a list of button names, just like the previous example.
vue
<template>
<TextEditor
editor-class="!prose-sm border max-w-none rounded-lg p-3 overflow-auto h-20 focus:outline-none"
:bubbleMenu="true"
:content="content"
@change="(val) => (content = val)"
/>
</template>
<script setup>
import { TextEditor } from 'frappe-ui'
let content = ref('[initial html content]')
</script>
Floating menu and bubble menu
You can combine multiple menus. You can also pass an array of button names.
vue
<template>
<TextEditor
editor-class="!prose-sm border max-w-none rounded-lg p-3 overflow-auto h-20 focus:outline-none"
:floatingMenu="true"
:bubbleMenu="true"
/>
</template>
<script setup>
import { TextEditor } from 'frappe-ui'
</script>
Comment Editor
An example of how to use slots and various features of the TextEditor to make a customized editor experience.
There are three slots available: top, bottom and editor. The top and bottom are slots for placing menus at the top or bottom of the editor. If you are using these slots, you must import and render the Menu components manually. They are available to import as TextEditorFixedMenu, TextEditorBubbleMenu, and TextEditorFloatingMenu.
The editor slot renders the TextEditorContent component, you can override it and render the TextEditorContent component if you want some custom behaviour.
vue
<template>
<Input class="mb-2" type="checkbox" v-model="editable" label="Editable" />
<TextEditor
class="rounded-lg border p-4"
:editor-class="['prose-sm max-w-none min-h-[6rem]']"
:content="content2"
@change="(val) => (content2 = val)"
:starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
placeholder="Write something..."
:editable="editable"
>
<template v-slot:editor="{ editor }">
<TextEditorContent
:class="[editable && 'max-h-[6rem] overflow-y-auto']"
:editor="editor"
/>
</template>
<template v-slot:bottom>
<div
v-if="editable"
class="mt-2 flex flex-col justify-between sm:flex-row sm:items-center"
>
<TextEditorFixedMenu
class="-ml-1 overflow-x-auto"
:buttons="fixedMenuMinimalButtons"
/>
<div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
<Button appearance="primary"> Submit </Button>
</div>
</div>
</template>
</TextEditor>
</template>
<script setup>
import {
TextEditor,
TextEditorFixedMenu,
TextEditorContent,
Button,
Input,
} from 'frappe-ui'
let content = ref('Highly customized editor')
let editable = ref(true)
let fixedMenuMinimalButtons = [
'Paragraph',
['Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'],
'Separator',
'Bold',
'Italic',
'Separator',
'Bullet List',
'Numbered List',
'Separator',
'Link',
'Blockquote',
'Code',
]
</script>