@chahindb7/vue3-editor/README.md

HTML editor using Vue.js 3, and Quill.js, an open source editor with advanced table functionality (quill-table-better)

# 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-better`
- **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

```bash
npm install
```

## Basic Usage

```vue
<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-better`:

### 🚀 quill-table-better 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:

```vue
<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-better module
const tableToolbar = [
  ['bold', 'italic', 'underline'],
  [{ header: [1, 2, 3, false] }],
  ['table-better'], // Advanced table functionality
  ['link', 'clean']
]
</script>
```

### Table Module Configuration

The editor automatically configures the table module:

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

## Table Usage Examples

### Basic Usage
```vue
<template>
  <VueEditor 
    v-model="content" 
    :editorToolbar="tableToolbar"
  />
</template>

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

const content = ref('')

// Use table-better module
const tableToolbar = [
  ['bold', 'italic'],
  ['table-better'], // 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
```javascript
// Get table module
const tableBetter = quill.getModule('table-better')
tableBetter.insertTable(3, 3) // Insert 3x3 table
tableBetter.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

```vue
<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

```bash
# Install dependencies
npm install

# Start development server
npm run serve

# Build for production
npm run build
```

## License

MIT