https://github.com/jspaine/quill-placeholder-module

A quill module for adding placeholders
https://github.com/jspaine/quill-placeholder-module

module placeholder quill template

Last synced: about 1 month ago
JSON representation

A quill module for adding placeholders

• Host: GitHub
• URL: https://github.com/jspaine/quill-placeholder-module
• Owner: jspaine
• License: mit
• Created: 2017-07-08T13:37:16.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-10T07:31:42.000Z (over 6 years ago)
• Last Synced: 2024-10-20T05:43:44.743Z (about 2 months ago)
• Topics: module, placeholder, quill, template
• Language: JavaScript
• Homepage:
• Size: 82 KB
• Stars: 36
• Watchers: 4
• Forks: 16
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-quill - quill-placeholder-module - A quill module for adding placeholders (Uncategorized / Uncategorized)

README

        
# quill-placeholder-module

Quill module for adding placeholders. [Demo](https://codepen.io/jspaine/pen/MozyNp)

## Install

```

npm install --save quill-placeholder-module

```

## Usage

```js

import getPlaceholderModule from 'quill-placeholder-module'

// es5

var getPlaceholderModule = require('quill-placeholder-module').default

// umd

var getPlaceholderModule = PlaceholderModule.default

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

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

}))

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

  modules: {

    toolbar: {container: `#toolbar`},

    placeholder: {

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

      placeholders: [

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

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

      ]

    }

  },

  placeholder: 'Compose an epic...',

  theme: 'snow'  // or 'bubble'

});

```

Define the toolbar menu (a more complete example can be found in the [demo](https://codepen.io/jspaine/pen/MozyNp)):

```html



  

    Foo

    Required

  





```

And include the css from `dist/toolbar.css`.


The markup will contain (with default options) `...`

To transform the output check out https://github.com/jspaine/html-ast-transform