Merge pull request #1006 from netlify/cms/custom-widgets

Automatically generated. Merged on Netlify CMS.
This commit is contained in:
Shawn Erquhart 2018-01-12 11:09:32 -05:00 committed by GitHub
commit 56857f0d92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -4,7 +4,7 @@ position: 35
--- ---
# Custom Widgets # Custom Widgets
The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The available widget extension methods are: The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Netify CMS as an npm module. The available widget extension methods are:
* **registerWidget:** lets you register a custom widget. * **registerWidget:** lets you register a custom widget.
* **registerEditorComponent:** lets you add a block component to the Markdown editor. * **registerEditorComponent:** lets you add a block component to the Markdown editor.
@ -20,7 +20,7 @@ However, although possible, it may be cumbersome or even impractical to add a Re
Register a custom widget. Register a custom widget.
```js ```js
CMS.registerWidget(name, control, \[preview\]) // Using global window objectCMS.registerWidget(name, control, [preview])// Using npm module importimport CMS from 'netlify-cms'CMS.registerWidget(name, control, [preview])
``` ```
**Params:** **Params:**
@ -28,7 +28,7 @@ CMS.registerWidget(name, control, \[preview\])
| Param | Type | Description | | Param | Type | Description |
| ----------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ----------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | string | Widget name, allows this widget to be used via the field `widget` property in config | | `name` | string | Widget name, allows this widget to be used via the field `widget` property in config |
| `control` | React.Component \| string | <ul><li>React component that renders the control, receives the following props: <ul><li>**value:** Current field value</li><li>**onChange:** Callback function to update the field value</li></ul></li><li>Name of a registered widget whose control should be used (includes built in widgets).</li></ul> | | `control` | React.Component | string | <ul><li>React component that renders the control, receives the following props: <ul><li>**value:** Current field value</li><li>**onChange:** Callback function to update the field value</li></ul></li><li>Name of a registered widget whose control should be used (includes built in widgets).</li></ul> |
| [`preview`] | React.Component, optional | Renders the widget preview, receives the following props: <ul><li>**value:** Current preview value</li><li>**field:** Immutable map of current field configuration</li><li>**metadata:** Immutable map of any available metadata for the current field</li><li>**getAsset:** Function for retrieving an asset url for image/file fields</li><li>**entry:** Immutable Map of all entry data</li><li>**fieldsMetaData:** Immutable map of metadata from all fields.</li></ul> | | [`preview`] | React.Component, optional | Renders the widget preview, receives the following props: <ul><li>**value:** Current preview value</li><li>**field:** Immutable map of current field configuration</li><li>**metadata:** Immutable map of any available metadata for the current field</li><li>**getAsset:** Function for retrieving an asset url for image/file fields</li><li>**entry:** Immutable Map of all entry data</li><li>**fieldsMetaData:** Immutable map of metadata from all fields.</li></ul> |
* **field:** The field type that this widget will be used for. * **field:** The field type that this widget will be used for.