# Quill Editor Field

The Quill Editor field provides a rich text editor for your CRUD forms. It's built on top of the [Quill.js](https://quilljs.com/) library.

## Basic Usage

```php
CRUD::addField([
    'name'  => 'content',
    'label' => 'Content',
    'type'  => 'quill',
]);
```

## Available Options

### Basic Options

- `theme` (string): The theme to use. Defaults to 'snow'. Other option is 'bubble'.
- `toolbar` (array): Customize the toolbar options. See below for details.
- `modules` (array): Additional Quill modules to include.

### Default Toolbar

The default toolbar includes:
- Basic formatting: bold, italic, underline, strike
- Blockquote and code block
- Headers (1-6)
- Lists (ordered and bullet)
- Subscript and superscript
- Indentation
- Text direction
- Font size
- Text color and background
- Font family
- Text alignment
- Clean formatting

## Customizing the Toolbar

You can customize the toolbar by passing a custom configuration:

```php
CRUD::addField([
    'name'    => 'content',
    'label'   => 'Content',
    'type'    => 'quill',
    'options' => [
        'theme' => 'snow',
        'modules' => [
            'toolbar' => [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{'header': 1}, {'header': 2}],
                [{'list': 'ordered'}, {'list': 'bullet'}],
                [{'indent': '-1'}, {'indent': '+1'}],
                ['link', 'image', 'video'],
                ['clean']
            ]
        ]
    ]
]);
```

## Using the Bubble Theme

To use the bubble theme instead of the default snow theme:

```php
CRUD::addField([
    'name'    => 'content',
    'label'   => 'Content',
    'type'    => 'quill',
    'options' => [
        'theme' => 'bubble',
    ]
]);
```

## Handling Images

By default, images can be pasted or dragged into the editor. To handle image uploads, you'll need to implement a custom image handler. Here's an example:

```javascript
// In your custom JavaScript file
var quill = new Quill('#editor', {
    // ... options ...
    modules: {
        toolbar: [
            // ...
            ['image']
        ]
    }
});

// Handle image uploads
quill.getModule('toolbar').addHandler('image', function() {
    var range = quill.getSelection();
    var value = prompt('What is the image URL?');
    quill.updateContents(
        new Delta()
            .retain(range.index)
            .delete(range.length)
            .insert({image: value}, {alt: 'Image'})
    );
});
```

## Styling

The editor comes with basic styling. You can customize the appearance by adding your own CSS:

```css
/* Custom styles for the Quill editor */
.ql-container {
    min-height: 200px;
    font-size: 16px;
}

/* Customize the toolbar */
.ql-toolbar {
    border-radius: 4px 4px 0 0;
    border: 1px solid #ddd;
}

.ql-container {
    border-radius: 0 0 4px 4px;
    border: 1px solid #ddd;
    border-top: none;
}
```

## Events

The editor emits several events you can listen to:

- `text-change`: Fires when the contents of the editor change
- `selection-change`: Fires when the selection changes
- `editor-change`: Fires for both text and selection changes

Example:

```javascript
quill.on('text-change', function(delta, oldDelta, source) {
    if (source === 'user') {
        console.log('User made changes:', delta);
    }
});
```

## Requirements

- Quill.js v1.3.6 (included automatically)
- No additional dependencies required

## Troubleshooting

### Editor not initializing
- Make sure you have included all required JavaScript and CSS files
- Check the browser console for any JavaScript errors
- Ensure the target element exists in the DOM when initializing

### Styling issues
- The editor's CSS might be overridden by your application's styles
- Use more specific CSS selectors to override default styles
- Check for CSS conflicts with other libraries

### Image uploads not working
- The default implementation only supports direct image URLs
- Implement a custom image handler for upload functionality
- Make sure your server accepts the image uploads and returns a valid URL
