Browse Source

Cleanup plugins doc

new-plugin-system
Artur Arseniev 4 months ago
parent
commit
667a098a6b
  1. 85
      docs/modules/Plugins.md

85
docs/modules/Plugins.md

@ -47,82 +47,10 @@ const editor = grapesjs.init({
}); });
``` ```
<!--
## Named plugin
If you're distributing your plugin globally, you may want to make a named plugin. To keep thing cleaner, so you'll probably get a similar structure:
```
/your/path/to/grapesjs.min.js
/your/path/to/grapesjs-plugin.js
```
**Important:** The order that you load files matters. GrapesJS has to be loaded before the plugin. This sets up the `grapejs` global variable.
So, in your `grapesjs-plugin.js` file:
```js
export default grapesjs.plugins.add('my-plugin-name', (editor, options) => {
/*
* Here you should rely on GrapesJS APIs, so check 'API Reference' for more info
* For example, you could do something like this to add some new command:
*
* editor.Commands.add(...);
*/
})
```
The name `my-plugin-name` is an ID of your plugin and you'll use it to tell your editor to grab it.
Here is a complete generic example:
```html
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-plugin.js"></script>
<div id="gjs"></div>
<script type="text/javascript">
var editor = grapesjs.init({
container : '#gjs',
plugins: ['my-plugin-name']
});
</script>
```
-->
## Plugins with options ## Plugins with options
It's also possible to pass custom parameters to plugins in to make them more flexible. It's also possible to pass custom parameters to plugins in to make them more flexible.
<!--
```js
var editor = grapesjs.init({
container : '#gjs',
plugins: ['my-plugin-name'],
pluginsOpts: {
'my-plugin-name': {
customField: 'customValue'
}
}
});
```
Inside you plugin you'll get those options via `options` argument
```js
export default grapesjs.plugins.add('my-plugin-name', (editor, options) => {
console.log(options);
//{ customField: 'customValue' }
})
```
This also works with plugins that aren't named.
-->
```js ```js
const myPluginWithOptions = (editor, options) => { const myPluginWithOptions = (editor, options) => {
console.log(options); console.log(options);
@ -140,19 +68,6 @@ const editor = grapesjs.init({
}); });
``` ```
<!--
## Named Plugins vs Non-Named Plugins
When you use a named plugin, then that name must be unique across all other plugins.
```js
grapesjs.plugins.add('my-plugin-name', fn);
```
In this example, the plugin name is `my-plugin-name` and can't be used by other plugins. To avoid namespace restrictions use basic plugins that are purely functional.
-->
## Usage with TS ## Usage with TS
If you're using TypeScript, for a better type safety, we recommend using the `usePlugin` helper. If you're using TypeScript, for a better type safety, we recommend using the `usePlugin` helper.

Loading…
Cancel
Save