alincc / quill-placeholder-module

A quill module for adding placeholders

quill-placeholder-module

Quill module for adding placeholders. Demo

Install

npm install --save quill-placeholder-module

Usage

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):

<div id="toolbar">
  <select class="ql-placeholder">
    <option value="foo">Foo</option>
    <option value="required">Required</option>
  </select>
</div>
<div id="editor"></div>

And include the css from dist/toolbar.css.

The markup will contain (with default options) <span class="ql-placeholder-content" data-id="placeholder-id" data-label="placeholder-label">...</span>

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