https://github.com/Datananas/quill-placeholder-autocomplete

brings autocomplete to Quill Placeholder module
https://github.com/Datananas/quill-placeholder-autocomplete

javascript quill quill-editor

Last synced: about 1 month ago
JSON representation

brings autocomplete to Quill Placeholder module

• Host: GitHub
• URL: https://github.com/Datananas/quill-placeholder-autocomplete
• Owner: Datananas
• License: apache-2.0
• Created: 2018-01-08T12:22:19.000Z (almost 7 years ago)
• Default Branch: development
• Last Pushed: 2018-09-28T15:29:11.000Z (about 6 years ago)
• Last Synced: 2024-10-01T12:20:11.936Z (2 months ago)
• Topics: javascript, quill, quill-editor
• Language: JavaScript
• Size: 301 KB
• Stars: 9
• Watchers: 6
• Forks: 12
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-quill - quill-placeholder-autocomplete-module - brings autocomplete to "quill-placeholder-module" (Uncategorized / Uncategorized)

README

        
# quill-placeholder-autocomplete

brings autocomplete to [quill-placeholder-module](https://github.com/jspaine/quill-placeholder-module)

## CI status

[ ![Codeship Status for Datananas/quill-placeholder-autocomplete](https://app.codeship.com/projects/19a30040-d83b-0135-4786-2a3c011fd6eb/status?branch=master)](https://app.codeship.com/projects/263594)

## Install

+ using NPM:

  ```

  npm install --save quill-placeholder-autocomplete-module quill-placeholder-module

  ```

+ using yarn:

  ```

  yarn add quill-placeholder-autocomplete-module quill-placeholder-module

  ```

## Usage

```js

import getPlaceholderModule from 'quill-placeholder-module';

import getAutocompleteModule from 'quill-placeholder-autocomplete-module';

Quill.register('modules/placeholder', getPlaceholderModule(Quill,  {

  className: 'ql-placeholder-content',        // default

}));

Quill.register('modules/autocomplete', getAutocompleteModule(Quill));

const placeholders = [

  {id: 'foo', label: 'Foo'},

  {id: 'required', label: 'Required', required: true}

]

var quill = new Quill('#editor', {

  modules: {

    toolbar: {container: `#toolbar`},

    placeholder: {

      delimiters: ['{', '}'],                   // default

      placeholders

    },

    autocomplete: {

      getPlaceholders: () => placeholders       // factory

      container: '#completions',                // can also be return of `document.querySelector` or kept `undefined`

      triggerKey: '#',                          // default

      endKey: '#',                              // optional

      debounceTime: 0,                          // 0: disabled (default)

      onOpen: () => console.log('opened'),                                      // optional

      onClose: (placeholder) => console.log('user choosed:', placeholder),      // optional

      fetchPlaceholders: (query) => fetch(...).then(...)                        // optional

      onFetchStarted: (query) => console.log('user searching for:', query),     // optional

      onFetchFinished: (results) => console.log('possible results:', results),  // optional

    }

  },

  placeholder: 'Compose an epic...',

  theme: 'snow'

});

```