https://github.com/mindroute/quill-form

Module for form bindings and input fields in Quill
https://github.com/mindroute/quill-form

Last synced: about 1 month ago
JSON representation

Module for form bindings and input fields in Quill

• Host: GitHub
• URL: https://github.com/mindroute/quill-form
• Owner: mindroute
• License: mit
• Created: 2018-09-25T08:37:02.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-27T10:50:35.000Z (about 6 years ago)
• Last Synced: 2024-05-21T15:18:09.869Z (7 months ago)
• Language: JavaScript
• Size: 43.9 KB
• Stars: 10
• Watchers: 7
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-quill - quill-form - Module for automatic form input and submit binding (Uncategorized / Uncategorized)

README

        
# Quill Form

Module for simple form and input field bindings in [Quill](https://github.com/quilljs/quill). Automatically creates hidden input fields for a form and adds submit handling and submit by key (⌘/Ctrl+S). You may also specify your own custom input fields. It creates fields for text, html and delta.

## Installation

#### Yarn

```bash

yarn add quill-form

```

#### NPM

```bash

npm i quill-form

```

 

## Usage

To add quill-form to your Quill, simply add the javascript after quill or import it in your project. Make sure that your editor is placed within a form or specify custom input fields.

```html

  ...

  

    


  

  ...

  

  

  

    var editor = new Quill('#editor-container', {

      modules: {

        form: true

      }

    });

  

  ...


```

 

## Options

Specify one option or more to override defaults.

```javascript

var editor = new Quill('#editor-container', {

  modules: {

    form: {

      htmlField: 'html', // Input name string, HTMLElement or false

      deltaField: 'delta', // Input name string, HTMLElement or false

      textField: 'text', // Input name string, HTMLElement or false

      submitKey: { // Keyboard key binding object or false

        key: 'S',

        shortKey: true

      },

      updateOnBlur: true, // Updates the fields on blur

      updateOnChange: false // Updates the fields on every change

    }

  }

});

```