rte-vue

rte-vue

A fully configurable, ready-to-use Rich Text Editor for Vue 3. Built on TiPTap, this editor provides a seamless WYSIWYG experience with Markdown support, customization slots, and zero-config usage.

Perfect for blogs, CMS, comment sections, or any Vue 3 app needing text editing.

✨ Features

• 🚀 Zero-Config: Just drop it in and it works with v-model.
• 📝 Markdown & JSON: Native support for Markdown input/output (or use JSON).
• 🎨 Component-Scoped Styles: Looks good out of the box, but easily overridable.
• 🔧 Highly Customizable:
  • Configure toolbar items and groups.
  • Override specific buttons or the entire toolbar via Slots.
  • Custom styling for every element.
• 🧱 Block Styling: Headings, lists, links, bold, italic, strike-through out of the box.
• 📎 File Uploader: Import content from .docx, .odt, .odf, and .txt files with a single prop.
• 🦾 TypeScript: Full TypeScript support with exported types.

� Examples

Check out the examples folder for detailed usage scenarios, including:

1. Basic Usage
2. Custom Toolbar Groups
3. Theming with Tailwind CSS
4. Markdown Support
5. Custom Toolbar Buttons (Slots)
6. Form Validation Integration7. Internationalization (i18n)
7. Read-Only Display
8. Chat / Comment Input
9. Programmatic Control

�📦 Installation

npm install rte-vue

⚡ Quick Start

The "It Just Works" Way

<script setup lang="ts">
import { ref } from 'vue';
import { RTextEditor } from 'rte-vue';
import 'rte-vue/dist/style.css'; 

const content = ref('# Hello World');
</script>

<template>
  <RTextEditor v-model="content" />
</template>

Full Configuration Example

<script setup lang="ts">
import { ref } from 'vue';
import { RTextEditor } from 'rte-vue';
import 'rte-vue/dist/style.css';

const myContent = ref('');

const handleSave = (content: string) => {
  console.log('Saved content:', content);
};
</script>

<template>
  <RTextEditor
    v-model="myContent"
    placeholder="Write something amazing..."
    content-format="markdown"
    :heading-offset="1"
    :toolbar-items="['bold', 'italic', 'heading2', 'bulletList', 'link']"
    @save="handleSave"
  />
</template>

📖 Component API

Props

Events

Slots

#toolbar

Completely replace the toolbar area. Scope: { items, groups, isActive(item), isDisabled(item), runCommand(item) }

#toolbar-button

Customize individual buttons while keeping the default layout. Scope: { item, label, active, disabled, runCommand }

🖌️ Styling

The editor comes with minimalist base styles. You can override specific parts using the classNames prop or standard CSS.

Using Utility Classes (Tailwind, UnoCSS, etc)

Because the default styles use the :where() selector (zero specificity), you can pass utility classes directly to the component via the classNames prop and they will work immediately without !important.

<RTextEditor
  :class-names="{
    editorContent: 'bg-zinc-50 border-2 border-red-500 rounded-xl',
    toolbar: 'bg-transparent border-b-0',
    buttonActive: 'bg-blue-100 text-blue-700'
  }"
/>

CSS Classes & Selectors

If you prefer writing custom CSS, you can target the following stable class names.

Since all defaults use :where(.classname), your custom CSS will always win as long as it has a specificity greater than 0 (which is basically any class selector).

/* No !important needed! */
.rte-editor-content {
  background-color: #fdf2f8; 
  border-radius: 12px;
}

📎 File Uploader

Enable the built-in file uploader to let users import content from .docx, .odt, .odf, and .txt files directly into the editor.

Basic Usage

<script setup lang="ts">
import { ref } from 'vue';
import { RTextEditor } from 'rte-vue';
import 'rte-vue/dist/style.css';

const content = ref('');

const onFileUpload = (file: File, html: string) => {
  console.log(`Imported "${file.name}" successfully`);
};

const onFileError = (error: Error) => {
  console.error('File import failed:', error.message);
};
</script>

<template>
  <RTextEditor
    v-model="content"
    :uploader="true"
    placeholder="Upload a file or start typing..."
    @file-upload="onFileUpload"
    @file-error="onFileError"
  />
</template>

When uploader is set to true, three ways to import a file are enabled:

1. Toolbar button — An Upload button appears in the toolbar. Clicking it opens a file picker.
2. Drag and drop — Drag a supported file directly onto the editor. A drop overlay will appear to confirm the target.
3. Paste — Copy a file to the clipboard and paste it into the editor (Cmd/Ctrl+V).

Once a file is imported, its content populates the editor and can be further edited.

Supported File Types

Using parseDocumentFile Standalone

The file parser is also exported for use outside of the component:

import { parseDocumentFile } from 'rte-vue';

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const html = await parseDocumentFile(file);
  console.log(html);
});

⌨️ Shortcuts

• Bold: Cmd/Ctrl + B
• Italic: Cmd/Ctrl + I
• Save: Cmd/Ctrl + S

License

MIT