Skip to main content
The MtTextEditor component provides a full-featured rich text editor with WYSIWYG editing, code mode, and extensive formatting options.

​
Import

import { MtTextEditor } from '@meteroid/component-library';

​
Props

​
modelValue
string
required
The HTML content of the editor.
​
label
string
A label for your text editor field.
​
isInlineEdit
boolean
default:"false"
Enable inline edit mode with bubble menu.
​
disabled
boolean
default:"false"
Add disabled state to the editor.
​
placeholder
string
Add placeholder text to the editor.
​
showToolbar
boolean
default:"true"
Control toolbar visibility. Set to false to hide the toolbar completely.
​
codeMode
boolean
default:"false"
Control code editor mode. Set to true to show the code editor instead of WYSIWYG.
​
customButtons
Array<CustomButton>
default:"[]"
Custom buttons to be added to the toolbar.
​
excludedButtons
string[]
default:"[]"
Excluded buttons from the toolbar.
​
tipTapConfig
object
default:"{}"
Add custom configuration for the TipTap editor.
​
error
object
An error in your business logic related to this field.

​
Events

​
update:modelValue
(value: string) => void
Emitted when the content changes.
​
update:codeMode
(value: boolean) => void
Emitted when switching between code and visual mode.

​
Slots

​
contextual-buttons
slot
Custom contextual buttons in the footer. Receives editor and buttons props.
​
footer-left
slot
Content in the left side of the footer. Receives editor prop.
​
footer-right
slot
Content in the right side of the footer. Receives editor prop. Defaults to character count.

​
Usage

​
Basic Editor

<script setup>
import { ref } from 'vue';
const content = ref('<p>Hello world!</p>');
</script>

<template>
  <mt-text-editor 
    v-model="content"
    label="Content"
  />
</template>

​
With Placeholder

<template>
  <mt-text-editor 
    v-model="content"
    label="Description"
    placeholder="Enter your description here..."
  />
</template>

​
Inline Edit Mode

<template>
  <mt-text-editor 
    v-model="content"
    is-inline-edit
  />
</template>

​
Code Mode

<script setup>
import { ref } from 'vue';
const content = ref('<p>Edit HTML directly</p>');
const isCodeMode = ref(true);
</script>

<template>
  <mt-text-editor 
    v-model="content"
    :code-mode="isCodeMode"
    @update:code-mode="isCodeMode = $event"
  />
</template>

​
Custom Toolbar Buttons

<script setup>
const customButtons = [
  {
    name: 'custom-action',
    label: 'Custom Action',
    icon: 'regular-star-xs',
    action: (editor) => {
      console.log('Custom action triggered');
    },
  },
];
</script>

<template>
  <mt-text-editor 
    v-model="content"
    :custom-buttons="customButtons"
  />
</template>

​
Exclude Toolbar Buttons

<template>
  <mt-text-editor 
    v-model="content"
    :excluded-buttons="['bold', 'italic', 'table']"
  />
</template>

​
Custom Footer Content

<template>
  <mt-text-editor v-model="content">
    <template #footer-left="{ editor }">
      <mt-button size="small" @click="saveContent">
        Save Draft
      </mt-button>
    </template>
    <template #footer-right="{ editor }">
      Last saved: {{ lastSavedTime }}
    </template>
  </mt-text-editor>
</template>

​
Without Toolbar

<template>
  <mt-text-editor 
    v-model="content"
    :show-toolbar="false"
  />
</template>

​
Features

​
Formatting Options

  • Text: Bold, Italic, Underline, Strikethrough
  • Headings: H1-H6
  • Lists: Bullet lists, Numbered lists
  • Alignment: Left, Center, Right, Justify
  • Text Style: Superscript, Subscript, Code
  • Colors: Text color picker
  • Links: Insert and edit links
  • Tables: Create and edit tables
  • Images: Insert images
  • Code blocks: Syntax highlighting
  • Blockquotes: Quote formatting
  • Horizontal rules: Visual separators

​
Editor Modes

  • WYSIWYG Mode: Visual editing with toolbar
  • Code Mode: Direct HTML editing with syntax highlighting
  • Inline Mode: Bubble menu that appears on selection
  • Fullscreen Mode: Expand editor to full screen

​
Accessibility

  • Keyboard shortcuts for common formatting
  • Screen reader support
  • Focus management within editor
  • ARIA labels for toolbar buttons
  • Semantic HTML output
  • Table navigation with arrow keys
  • Link editing accessible via keyboard

Build docs developers (and LLMs) love

Get started for freeTalk to us