GitHub - GrapesJS/components-forms: Set of form components and blocks for the GrapesJS editor (original) (raw)
GrapesJS Forms
This plugin adds some of the basic form components and blocks which help in working with forms easier
Available components:form input textarea select option checkbox radio button label
Options
| Option | Description | Default |
|---|---|---|
| blocks | Which blocks to add | ['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'] (all) |
| category | Category name | Forms |
| block | Add custom block options, based on block id. | (blockId) => ({}) |
Download
- CDN
https://unpkg.com/grapesjs-plugin-forms
- NPM
npm i grapesjs-plugin-forms
- GIT
git clone https://github.com/GrapesJS/components-forms.git
Usage
Directly in the browser
Modern javascript
import grapesjs from 'grapesjs'; import gjsForms from 'grapesjs-plugin-forms';
const editor = grapesjs.init({ container : '#gjs', // ... plugins: [gjsForms], pluginsOpts: { [gjsForms]: { /* options / } } // or plugins: [ editor => gjsForms(editor, { / options */ }), ], });
I18n
If you need to change some of the components/traits labels, you can rely on the i18n module, here a complete example for the default en language
editor.I18n.addMessages({ en: { blockManager: { labels: { form: 'EN Form', input: 'EN Input', textarea: 'EN Textarea', select: 'EN Select', checkbox: 'EN Checkbox', radio: 'EN Radio', button: 'EN Button', label: 'EN Label', }, categories: { forms: 'EN Forms', } }, domComponents: { names: { form: 'EN Form', input: 'EN Input', textarea: 'EN Textarea', select: 'EN Select', checkbox: 'EN Checkbox', radio: 'EN Radio', button: 'EN Button', label: 'EN Label', }, }, traitManager: { traits: { labels: { method: 'EN Method', action: 'EN Action', name: 'EN Name', placeholder: 'EN Placeholder', type: 'EN Type', required: 'EN Required', options: 'EN Options', id: 'EN Id', for: 'EN For', value: 'EN Value', checked: 'EN Checked', text: 'EN Text', }, options: { type: { text: 'EN Text', email: 'EN Email', password: 'EN Password', number: 'EN Number', submit: 'EN Submit', reset: 'EN Reset', button: 'EN Button', } } }, }, } });
Development
Clone the repository
$ git clone https://github.com/GrapesJS/components-forms.git $ cd grapesjs-plugin-forms
Install it
Start the dev server
License
BSD 3-Clause