misc edits in /docs; mostly style, grammar, consistency (#489)
* misc edits in /docs; mostly style, grammar, consistency * changes per reviewers requests * removed .md ext from links in 2 files per request
This commit is contained in:
committed by
Jessica Parsons
parent
b283f6931f
commit
6ad6bfd094
@ -1,15 +1,15 @@
|
||||
# Extending With Widgets
|
||||
|
||||
The NetlifyCMS exposes an `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 an `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The available widget extension methods are:
|
||||
|
||||
* **registerWidget** lets you register a custom widget.
|
||||
* **registerEditorComponent** lets you add a block component to the Markdown editor
|
||||
* **registerWidget:** lets you register a custom widget.
|
||||
* **registerEditorComponent:** lets you add a block component to the Markdown editor.
|
||||
|
||||
### Writing React Components inline
|
||||
|
||||
The registerWidget requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate
|
||||
The `registerWidget` requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.
|
||||
|
||||
Although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, NetlifyCMS exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
|
||||
However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, NetlifyCMS exposes two constructs globally to allow you to create components inline: ‘createClass’ and ‘h’ (alias for React.createElement).
|
||||
|
||||
## `registerWidget`
|
||||
|
||||
@ -24,9 +24,9 @@ CMS.registerWidget(name, control, \[preview\])
|
||||
Param | Type | Description
|
||||
--- | --- | ---
|
||||
`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>
|
||||
* **field:** The field type which this widget will be used for.
|
||||
* **field:** The field type that this widget will be used for.
|
||||
* **control:** A React component that renders the editing interface for this field. Two props will be passed:
|
||||
* **value:** The current value for this field.
|
||||
* **onChange:** Callback function to update the field value.
|
||||
@ -64,13 +64,13 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);
|
||||
|
||||
## `registerEditorComponent`
|
||||
|
||||
Register a block level component for the Markdown editor
|
||||
Register a block level component for the Markdown editor:
|
||||
|
||||
CMS.registerEditorComponent(definition)
|
||||
|
||||
**Params**
|
||||
|
||||
* **definition:** The component definition, must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview
|
||||
* **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview
|
||||
|
||||
**Example:**
|
||||
|
||||
@ -97,7 +97,7 @@ CMS.registerEditorComponent({
|
||||
return 'youtube ' + obj.id;
|
||||
},
|
||||
// Preview output for this component. Can either be a string or a React component
|
||||
// (Component gives better render performance)
|
||||
// (component gives better render performance)
|
||||
toPreview: function(obj) {
|
||||
return (
|
||||
'<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
|
||||
|
Reference in New Issue
Block a user