Module for simple form and input field bindings in 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.
yarn add quill-form
npm i quill-form
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.
<body>
...
<form action="#" method="get">
<div id="editor-container"></div>
</form>
...
<script src="/path/to/quill.min.js"></script>
<script src="/path/to/quill-form.js"></script>
<script>
var editor = new Quill('#editor-container', {
modules: {
form: true
}
});
</script>
...
</body>
Specify one option or more to override defaults.
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
}
}
});
FAQs
Quill Extension for Form Bindings
We found that quill-form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A surge of AI-generated vulnerability reports has pushed open source maintainers to rethink bug bounties and tighten security disclosure processes.
Product
Scan results now load faster and remain consistent over time, with stable URLs and on-demand rescans for fresh security data.
Product
Socket's new Alert Details page is designed to surface more context, with a clearer layout, reachability dependency chains, and structured review.