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