Vue3 Quill Editor

A simple and powerful rich text editor powered by Quill.js 2.0.3 and Vue.js 3

Features

• Vue 3 Composition API Support: Built specifically for Vue 3
• Quill 2.0.0: Latest version of Quill.js with improved performance
• Advanced Table Support: Rich table functionality with quill-table-up
• v-model Support: Two-way data binding with reactive updates
• Customizable Toolbar: Easy toolbar configuration
• TypeScript Ready: Full TypeScript support
• Lightweight: Minimal dependencies, maximum performance

Installation

npm install

Basic Usage

<template>
  <div>
    <VueEditor v-model="content" placeholder="Start typing..." />
    <div v-html="content"></div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const content = ref('<p>Hello World!</p>')
    
    return {
      content
    }
  }
}
</script>

Table Features

Vue3 Editor includes advanced table functionality powered by quill-table-up:

🚀 quill-table-up Features

• Multiple cell selection and operations
• Enhanced table context menus
• Cell merging and splitting
• Column and row operations
• Drag and drop table resizing
• Copy/paste table content
• Multilingual support

Using Tables

The table module is automatically registered and available in the toolbar:

<template>
  <VueEditor 
    v-model="content" 
    :editorToolbar="tableToolbar"
    placeholder="Create tables with ease..."
  />
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')

// Toolbar with table-up module
const tableToolbar = [
  ['bold', 'italic', 'underline'],
  [{ header: [1, 2, 3, false] }],
  [{ 'table-up': [] }], // Advanced table functionality
  ['link', 'clean']
]
</script>

Table Module Configuration

The editor automatically configures the table module:

// quill-table-up configuration
'table-up': {
  language: 'en_US',
  menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
  toolbarTable: true
}

Table Usage Examples

Basic Usage

<template>
  <VueEditor 
    v-model="content" 
    :editorToolbar="tableToolbar"
  />
</template>

<script setup>
import { ref } from 'vue'

const content = ref('')

// Use table-up module
const tableToolbar = [
  ['bold', 'italic'],
  ['table'], // Advanced table functionality
  ['clean']
]
</script>

Table Features

Feature	Available
Interface	Modern button
Multi-cell selection	✅
Context menus	✅
Cell merging	✅
Drag resize	✅
Basic operations	✅

API Access

// Get table module
const tableUp = quill.getModule('table-up')
tableUp.insertTable(3, 3) // Insert 3x3 table
tableUp.deleteTable() // Delete current table

Props

Prop	Type	Default	Description
modelValue	String	''	The HTML content of the editor
placeholder	String	''	Placeholder text when editor is empty
disabled	Boolean	false	Whether the editor is disabled
editorToolbar	Array/Object	defaultToolbar	Custom toolbar configuration
editorOptions	Object	{}	Additional Quill editor options

Events

Event	Description	Payload
ready	Fired when editor is ready	quill instance
text-change	Fired when content changes	HTML content
update:modelValue	v-model update event	HTML content

Custom Toolbar

<template>
  <VueEditor 
    v-model="content" 
    :editorToolbar="customToolbar"
  />
</template>

<script>
export default {
  data() {
    return {
      content: '',
      customToolbar: [
        ['bold', 'italic', 'underline'],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        ['link', 'image']
      ]
    }
  }
}
</script>

Development

# Install dependencies
npm install

# Start development server
npm run serve

# Build for production
npm run build

License

MIT