tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update API Reference docs

docs
Artur Arseniev 8 years ago
parent
c032964abf
commit
5b45006b04
11 changed files with 270 additions and 339 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      docs/.vuepress/config.js
  2. 13
      docs/api.js
  3. 148
      docs/api/assets.md
  4. 100
      docs/api/block_manager.md
  5. 67
      docs/api/commands.md
  6. 111
      docs/api/components.md
  7. 47
      src/asset_manager/index.js
  8. 35
      src/block_manager/index.js
  9. 5
      src/commands/config/config.js
  10. 42
      src/commands/index.js
  11. 39
      src/dom_components/index.js

2
docs/.vuepress/config.js
View File

@ -57,6 +57,8 @@ module.exports = {
['/api/assets', 'Asset Manager'], ['/api/assets', 'Asset Manager'],
['/api/block_manager', 'Block Manager'], ['/api/block_manager', 'Block Manager'],
['/api/commands', 'Commands'], ['/api/commands', 'Commands'],
['/api/components', 'DOM Components'],
['/api/panels', 'Panels'],
], ],
'/': [ '/': [
'', '',

13
docs/api.js
View File

@ -5,21 +5,22 @@ const docRoot = __dirname;
const srcRoot = path.join(docRoot, '../src/'); const srcRoot = path.join(docRoot, '../src/');
const binRoot = path.join(docRoot, '../node_modules/.bin/'); const binRoot = path.join(docRoot, '../node_modules/.bin/');
const cmds = [ const cmds = [
['editor/index.js', 'editor.md'], // ['editor/index.js', 'editor.md'],
['asset_manager/index.js', 'assets.md'], // ['asset_manager/index.js', 'assets.md'],
['commands/index.js', 'commands.md'], // ['block_manager/index.js', 'block_manager.md'],
['dom_components/index.js', 'components.md'], // ['commands/index.js', 'commands.md'],
// ['dom_components/index.js', 'components.md'],
['panels/index.js', 'panels.md'], ['panels/index.js', 'panels.md'],
/*
['style_manager/index.js', 'style_manager.md'], ['style_manager/index.js', 'style_manager.md'],
['storage_manager/index.js', 'storage_manager.md'], ['storage_manager/index.js', 'storage_manager.md'],
['device_manager/index.js', 'device_manager.md'], ['device_manager/index.js', 'device_manager.md'],
['block_manager/index.js', 'block_manager.md'],
['selector_manager/index.js', 'selector_manager.md'], ['selector_manager/index.js', 'selector_manager.md'],
['css_composer/index.js', 'css_composer.md'], ['css_composer/index.js', 'css_composer.md'],
['modal_dialog/index.js', 'modal_dialog.md'], ['modal_dialog/index.js', 'modal_dialog.md'],
['rich_text_editor/index.js', 'rich_text_editor.md'], ['rich_text_editor/index.js', 'rich_text_editor.md'],
['keymaps/index.js', 'keymaps.md'], ['keymaps/index.js', 'keymaps.md'],
['undo_manager/index.js', 'undo_manager.md'], ['undo_manager/index.js', 'undo_manager.md'],*/
].map(entry => ].map(entry =>
`${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`) `${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`)
.join(' && '); .join(' && ');

148
docs/api/assets.md
View File

@ -2,49 +2,34 @@
## AssetManager ## AssetManager
- [add][1] You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
- [get][2]
- [getAll][3]
- [getAllVisible][4]
- [remove][5]
- [getContainer][6]
- [getAssetsEl][7]
- [addType][8]
- [getType][9]
- [getTypes][10]
- [store][11]
- [load][12]
Before using this methods you should get first the module from the editor instance, in this way:
```js ```js
var assetManager = editor.AssetManager; const editor = grapesjs.init({
assetManager: {
// options
}
})
``` ```
### Parameters Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
- `config` **[Object][13]** Configurations
- `config.assets` **[Array][14]<[Object][13]>** Default assets (optional, default `[]`)
- `config.uploadText` **[String][15]** Upload text (optional, default `'Drop files here or click to upload'`)
- `config.addBtnText` **[String][15]** Text for the add button (optional, default `'Add image'`)
- `config.upload` **[String][15]** Where to send upload data. Expects as return a JSON with asset/s object
as: {data: [{src:'...'}, {src:'...'}]} (optional, default `''`)
### Examples
```javascript ```js
... const assetManager = editor.AssetManager;
{
assets: [
{src:'path/to/image.png'},
...
],
upload: 'http://dropbox/path', // Set to false to disable it
uploadText: 'Drop files here or click to upload',
}
``` ```
Returns **this** - [add][2]
- [get][3]
- [getAll][4]
- [getAllVisible][5]
- [remove][6]
- [store][7]
- [load][8]
- [getContainer][9]
- [getAssetsEl][10]
- [addType][11]
- [getType][12]
- [getTypes][13]
## add ## add
@ -52,8 +37,8 @@ Add new asset/s to the collection. URLs are supposed to be unique
### Parameters ### Parameters
- `asset` **([string][15] \| [Object][13] \| [Array][14]<[string][15]> | [Array][14]<[Object][13]>)** URL strings or an objects representing the resource. - `asset` **([string][14] \| [Object][15] \| [Array][16]<[string][14]> | [Array][16]<[Object][15]>)** URL strings or an objects representing the resource.
- `opts` **[Object][13]?** Options (optional, default `{}`) - `opts` **[Object][15]?** Options (optional, default `{}`)
### Examples ### Examples
@ -84,7 +69,7 @@ Returns the asset by URL
### Parameters ### Parameters
- `src` **[string][15]** URL of the asset - `src` **[string][14]** URL of the asset
### Examples ### Examples
@ -92,7 +77,7 @@ Returns the asset by URL
var asset = assetManager.get('http://img.jpg'); var asset = assetManager.get('http://img.jpg');
``` ```
Returns **[Object][13]** Object representing the asset Returns **[Object][15]** Object representing the asset
## getAll ## getAll
@ -112,7 +97,7 @@ Remove the asset by its URL
### Parameters ### Parameters
- `src` **[string][15]** URL of the asset - `src` **[string][14]** URL of the asset
### Examples ### Examples
@ -128,7 +113,7 @@ Store assets data to the selected storage
### Parameters ### Parameters
- `noStore` **[Boolean][16]** If true, won't store - `noStore` **[Boolean][17]** If true, won't store
### Examples ### Examples
@ -136,7 +121,7 @@ Store assets data to the selected storage
var assets = assetManager.store(); var assets = assetManager.store();
``` ```
Returns **[Object][13]** Data to store Returns **[Object][15]** Data to store
## load ## load
@ -145,7 +130,7 @@ The fetched data will be added to the collection.
### Parameters ### Parameters
- `data` **[Object][13]** Object of data to load (optional, default `{}`) - `data` **[Object][15]** Object of data to load (optional, default `{}`)
### Examples ### Examples
@ -155,19 +140,19 @@ var assets = assetManager.load({
}) })
``` ```
Returns **[Object][13]** Loaded assets Returns **[Object][15]** Loaded assets
## getContainer ## getContainer
Return the Asset Manager Container Return the Asset Manager Container
Returns **[HTMLElement][17]** Returns **[HTMLElement][18]**
## getAssetsEl ## getAssetsEl
Get assets element container Get assets element container
Returns **[HTMLElement][17]** Returns **[HTMLElement][18]**
## render ## render
@ -175,7 +160,7 @@ Render assets
### Parameters ### Parameters
- `assets` **[array][14]** Assets to render, without the argument will render - `assets` **[array][16]** Assets to render, without the argument will render
all global assets all global assets
### Examples ### Examples
@ -191,24 +176,29 @@ assetManager.render(assets.filter(
)); ));
``` ```
Returns **[HTMLElement][17]** Returns **[HTMLElement][18]**
## addType ## addType
Add new type Add new type. If you want to get more about type definition we suggest to read the [module's page][19]
### Parameters ### Parameters
- `id` **[string][15]** Type ID - `id` **[string][14]** Type ID
- `definition` **[Object][13]** Definition of the type. Each definition contains - `definition` **[Object][15]** Definition of the type. Each definition contains
`model` (business logic), `view` (presentation logic) `model` (business logic), `view` (presentation logic)
and `isType` function which recognize the type of the and `isType` function which recognize the type of the
passed entity passed entity
addType('my-type', {
model: {}, ### Examples
view: {},
isType: (value) => {}, ```javascript
}) assetManager.addType('my-type', {
model: {},
view: {},
isType: (value) => {},
})
```
## getType ## getType
@ -216,46 +206,50 @@ Get type
### Parameters ### Parameters
- `id` **[string][15]** Type ID - `id` **[string][14]** Type ID
Returns **[Object][13]** Type definition Returns **[Object][15]** Type definition
## getTypes ## getTypes
Get types Get types
Returns **[Array][14]** Returns **[Array][16]**
[1]: https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js
[2]: #add
[1]: #add [3]: #get
[2]: #get [4]: #getall
[3]: #getall [5]: #getallvisible
[4]: #getallvisible [6]: #remove
[5]: #remove [7]: #store
[6]: #getcontainer [8]: #load
[7]: #getassetsel [9]: #getcontainer
[8]: #addtype [10]: #getassetsel
[9]: #gettype [11]: #addtype
[10]: #gettypes [12]: #gettype
[11]: #store [13]: #gettypes
[12]: #load [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [18]: https://developer.mozilla.org/docs/Web/HTML/Element
[17]: https://developer.mozilla.org/docs/Web/HTML/Element [19]: /modules/Assets.html

100
docs/api/block_manager.md
View File

@ -2,45 +2,37 @@
## BlockManager ## BlockManager
- [add][1] You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
- [get][2]
- [getAll][3]
- [getAllVisible][4]
- [getCategories][5]
- [getContainer][6]
- [render][7]
Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
Before using methods you should get first the module from the editor instance, in this way:
```js ```js
var blockManager = editor.BlockManager; const editor = grapesjs.init({
blockManager: {
// options
}
})
``` ```
### Parameters Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
- `config` **[Object][8]** Configurations
- `config.blocks` **[Array][9]<[Object][8]>** Default blocks (optional, default `[]`)
### Examples
```javascript ```js
... const blockManager = editor.BlockManager;
{
blocks: [
{id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
...
],
}
...
``` ```
- [add][2]
- [get][3]
- [getAll][4]
- [getAllVisible][5]
- [remove][6]
- [getConfig][7]
- [getCategories][8]
- [getContainer][9]
- [render][10]
## getConfig ## getConfig
Get configuration object Get configuration object
Returns **[Object][8]** Returns **[Object][11]**
## onLoad ## onLoad
@ -52,16 +44,16 @@ Add new block to the collection.
### Parameters ### Parameters
- `id` **[string][10]** Block id - `id` **[string][12]** Block id
- `opts` **[Object][8]** Options - `opts` **[Object][11]** Options
- `opts.label` **[string][10]** Name of the block - `opts.label` **[string][12]** Name of the block
- `opts.content` **[string][10]** HTML content - `opts.content` **[string][12]** HTML content
- `opts.category` **([string][10] \| [Object][8])** Group the block inside a catgegory. - `opts.category` **([string][12] \| [Object][11])** Group the block inside a catgegory.
You should pass objects with id property, eg: You should pass objects with id property, eg:
{id: 'some-uid', label: 'My category'} {id: 'some-uid', label: 'My category'}
The string will be converted in: The string will be converted in:
'someid' => {id: 'someid', label: 'someid'} 'someid' => {id: 'someid', label: 'someid'}
- `opts.attributes` **[Object][8]** Block attributes (optional, default `{}`) - `opts.attributes` **[Object][11]** Block attributes (optional, default `{}`)
### Examples ### Examples
@ -84,7 +76,7 @@ Return the block by id
### Parameters ### Parameters
- `id` **[string][10]** Block id - `id` **[string][12]** Block id
### Examples ### Examples
@ -120,7 +112,7 @@ Remove a block by id
### Parameters ### Parameters
- `id` **[string][10]** Block id - `id` **[string][12]** Block id
Returns **Block** Removed block Returns **Block** Removed block
@ -129,13 +121,13 @@ Returns **Block** Removed block
Get all available categories. Get all available categories.
It's possible to add categories only within blocks via 'add()' method It's possible to add categories only within blocks via 'add()' method
Returns **([Array][9] | Collection)** Returns **([Array][13] | Collection)**
## getContainer ## getContainer
Return the Blocks container element Return the Blocks container element
Returns **[HTMLElement][11]** Returns **[HTMLElement][14]**
## render ## render
@ -143,7 +135,7 @@ Render blocks
### Parameters ### Parameters
- `blocks` **[Array][9]** Blocks to render, without the argument will render - `blocks` **[Array][13]** Blocks to render, without the argument will render
all global blocks all global blocks
### Examples ### Examples
@ -166,26 +158,32 @@ blockManager.render([
blockManager.render(); blockManager.render();
``` ```
Returns **[HTMLElement][11]** Rendered element Returns **[HTMLElement][14]** Rendered element
[1]: https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js
[2]: #add
[3]: #get
[1]: #add [4]: #getall
[2]: #get [5]: #getallvisible
[3]: #getall [6]: #remove
[4]: #getallvisible [7]: #getconfig
[5]: #getcategories [8]: #getcategories
[6]: #getcontainer [9]: #getcontainer
[7]: #render [10]: #render
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[11]: https://developer.mozilla.org/docs/Web/HTML/Element [14]: https://developer.mozilla.org/docs/Web/HTML/Element

67
docs/api/commands.md
View File

@ -2,48 +2,25 @@
## Commands ## Commands
- [add][1] You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
- [get][2]
- [has][3]
You can init the editor with all necessary commands via configuration
```js ```js
var editor = grapesjs.init({ const editor = grapesjs.init({
... commands: {
commands: {...} // Check below for the properties // options
... }
}); })
``` ```
Before using methods you should get first the module from the editor instance, in this way: Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
```js ```js
var commands = editor.Commands; const commands = editor.Commands;
``` ```
### Parameters - [add][2]
- [get][3]
- `config` **[Object][4]** Configurations - [has][4]
- `config.defaults` **[Array][5]&lt;[Object][4]>** Array of possible commands (optional, default `[]`)
### Examples
```javascript
...
commands: {
defaults: [{
id: 'helloWorld',
run: function(editor, sender){
alert('Hello world!');
},
stop: function(editor, sender){
alert('Stop!');
},
}],
},
...
```
## add ## add
@ -51,8 +28,8 @@ Add new command to the collection
### Parameters ### Parameters
- `id` **[string][6]** Command's ID - `id` **[string][5]** Command's ID
- `command` **([Object][4] \| [Function][7])** Object representing your command, - `command` **([Object][6] \| [Function][7])** Object representing your command,
By passing just a function it's intended as a stateless command By passing just a function it's intended as a stateless command
(just like passing an object with only `run` method). (just like passing an object with only `run` method).
@ -78,7 +55,7 @@ Get command by ID
### Parameters ### Parameters
- `id` **[string][6]** Command's ID - `id` **[string][5]** Command's ID
### Examples ### Examples
@ -87,7 +64,7 @@ var myCommand = commands.get('myCommand');
myCommand.run(); myCommand.run();
``` ```
Returns **[Object][4]** Object representing the command Returns **[Object][6]** Object representing the command
## has ## has
@ -95,21 +72,21 @@ Check if command exists
### Parameters ### Parameters
- `id` **[string][6]** Command's ID - `id` **[string][5]** Command's ID
Returns **[Boolean][8]** Returns **[Boolean][8]**
[1]: #add [1]: https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js
[2]: #get [2]: #add
[3]: #has [3]: #get
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [4]: #has
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

111
docs/api/components.md
View File

@ -2,43 +2,30 @@
## DomComponents ## DomComponents
- [getWrapper][1] With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
- [getComponents][2]
- [addComponent][3]
- [clear][4]
- [load][5]
- [store][6]
- [render][7]
With this module is possible to manage components inside the canvas.
Before using methods you should get first the module from the editor instance, in this way:
```js ```js
var domComponents = editor.DomComponents; const editor = grapesjs.init({
domComponents: {
// options
}
})
``` ```
### Parameters Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
- `config` **[Object][8]** Configurations
- `config.components` **([string][9] \| [Array][10]&lt;[Object][8]>)** HTML string or an array of possible components (optional, default `[]`)
### Examples
```javascript ```js
... const domComponents = editor.DomComponents;
domComponents: {
components: '<div>Hello world!</div>',
}
// Or
domComponents: {
components: [
{ tagName: 'span', style: {color: 'red'}, content: 'Hello'},
{ style: {width: '100px', content: 'world!'}}
],
}
...
``` ```
- [getWrapper][2]
- [getComponents][3]
- [addComponent][4]
- [clear][5]
- [load][6]
- [store][7]
- [render][8]
## load ## load
Load components from the passed object, if the object is empty will try to fetch them Load components from the passed object, if the object is empty will try to fetch them
@ -47,9 +34,9 @@ The fetched data will be added to the collection
### Parameters ### Parameters
- `data` **[Object][8]** Object of data to load (optional, default `''`) - `data` **[Object][9]** Object of data to load (optional, default `''`)
Returns **[Object][8]** Loaded data Returns **[Object][9]** Loaded data
## store ## store
@ -57,13 +44,13 @@ Store components on the selected storage
### Parameters ### Parameters
- `noStore` **[Boolean][11]** If true, won't store - `noStore` **[Boolean][10]** If true, won't store
Returns **[Object][8]** Data to store Returns **[Object][9]** Data to store
## getWrapper ## getWrapper
Returns root component inside the canvas. Something like <body> inside HTML page Returns root component inside the canvas. Something like `<body>` inside HTML page
The wrapper doesn't differ from the original Component Model The wrapper doesn't differ from the original Component Model
### Examples ### Examples
@ -117,18 +104,18 @@ as 'domComponents.getComponents().add(...)'
### Parameters ### Parameters
- `component` **([Object][8] | Component | [Array][10]&lt;[Object][8]>)** Component/s to add - `component` **([Object][9] | Component | [Array][11]&lt;[Object][9]>)** Component/s to add
- `component.tagName` **[string][9]** Tag name (optional, default `'div'`) - `component.tagName` **[string][12]** Tag name (optional, default `'div'`)
- `component.type` **[string][9]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`) - `component.type` **[string][12]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`)
- `component.removable` **[boolean][11]** If component is removable (optional, default `true`) - `component.removable` **[boolean][10]** If component is removable (optional, default `true`)
- `component.draggable` **[boolean][11]** If is possible to move the component around the structure (optional, default `true`) - `component.draggable` **[boolean][10]** If is possible to move the component around the structure (optional, default `true`)
- `component.droppable` **[boolean][11]** If is possible to drop inside other components (optional, default `true`) - `component.droppable` **[boolean][10]** If is possible to drop inside other components (optional, default `true`)
- `component.badgable` **[boolean][11]** If the badge is visible when the component is selected (optional, default `true`) - `component.badgable` **[boolean][10]** If the badge is visible when the component is selected (optional, default `true`)
- `component.stylable` **[boolean][11]** If is possible to style component (optional, default `true`) - `component.stylable` **[boolean][10]** If is possible to style component (optional, default `true`)
- `component.copyable` **[boolean][11]** If is possible to copy&paste the component (optional, default `true`) - `component.copyable` **[boolean][10]** If is possible to copy&paste the component (optional, default `true`)
- `component.content` **[string][9]** String inside component (optional, default `''`) - `component.content` **[string][12]** String inside component (optional, default `''`)
- `component.style` **[Object][8]** Style object (optional, default `{}`) - `component.style` **[Object][9]** Style object (optional, default `{}`)
- `component.attributes` **[Object][8]** Attribute object (optional, default `{}`) - `component.attributes` **[Object][9]** Attribute object (optional, default `{}`)
### Examples ### Examples
@ -145,7 +132,7 @@ var comp1 = domComponents.addComponent({
}); });
``` ```
Returns **(Component | [Array][10]&lt;Component>)** Component/s added Returns **(Component | [Array][11]&lt;Component>)** Component/s added
## render ## render
@ -154,7 +141,7 @@ Once the wrapper is rendered, and it's what happens when you init the editor,
the all new components will be added automatically and property changes are all the all new components will be added automatically and property changes are all
updated immediately updated immediately
Returns **[HTMLElement][12]** Returns **[HTMLElement][13]**
## clear ## clear
@ -162,26 +149,28 @@ Remove all components
Returns **this** Returns **this**
[1]: #getwrapper [1]: https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js
[2]: #getwrapper
[2]: #getcomponents [3]: #getcomponents
[3]: #addcomponent [4]: #addcomponent
[4]: #clear [5]: #clear
[5]: #load [6]: #load
[6]: #store [7]: #store
[7]: #render [8]: #render
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[12]: https://developer.mozilla.org/docs/Web/HTML/Element [13]: https://developer.mozilla.org/docs/Web/HTML/Element

47
src/asset_manager/index.js
View File

@ -1,41 +1,33 @@
/** /**
* You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js)
* ```js
* const editor = grapesjs.init({
* assetManager: {
* // options
* }
* })
* ```
*
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
*
* ```js
* const assetManager = editor.AssetManager;
* ```
*
* * [add](#add) * * [add](#add)
* * [get](#get) * * [get](#get)
* * [getAll](#getall) * * [getAll](#getall)
* * [getAllVisible](#getallvisible) * * [getAllVisible](#getallvisible)
* * [remove](#remove) * * [remove](#remove)
* * [store](#store)
* * [load](#load)
* * [getContainer](#getcontainer) * * [getContainer](#getcontainer)
* * [getAssetsEl](#getassetsel) * * [getAssetsEl](#getassetsel)
* * [addType](#addtype) * * [addType](#addtype)
* * [getType](#gettype) * * [getType](#gettype)
* * [getTypes](#gettypes) * * [getTypes](#gettypes)
* * [store](#store)
* * [load](#load)
*
* Before using this methods you should get first the module from the editor instance, in this way:
*
* ```js
* var assetManager = editor.AssetManager;
* ```
* *
* @module AssetManager * @module AssetManager
* @param {Object} config Configurations
* @param {Array<Object>} [config.assets=[]] Default assets
* @param {String} [config.uploadText='Drop files here or click to upload'] Upload text
* @param {String} [config.addBtnText='Add image'] Text for the add button
* @param {String} [config.upload=''] Where to send upload data. Expects as return a JSON with asset/s object
* as: {data: [{src:'...'}, {src:'...'}]}
* @return {this}
* @example
* ...
* {
* assets: [
* {src:'path/to/image.png'},
* ...
* ],
* upload: 'http://dropbox/path', // Set to false to disable it
* uploadText: 'Drop files here or click to upload',
* }
*/ */
module.exports = () => { module.exports = () => {
@ -268,13 +260,14 @@ module.exports = () => {
}, },
/** /**
* Add new type * Add new type. If you want to get more about type definition we suggest to read the [module's page](/modules/Assets.html)
* @param {string} id Type ID * @param {string} id Type ID
* @param {Object} definition Definition of the type. Each definition contains * @param {Object} definition Definition of the type. Each definition contains
* `model` (business logic), `view` (presentation logic) * `model` (business logic), `view` (presentation logic)
* and `isType` function which recognize the type of the * and `isType` function which recognize the type of the
* passed entity * passed entity
* addType('my-type', { * @example
* assetManager.addType('my-type', {
* model: {}, * model: {},
* view: {}, * view: {},
* isType: (value) => {}, * isType: (value) => {},

35
src/block_manager/index.js
View File

@ -1,32 +1,29 @@
/** /**
* You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js)
* ```js
* const editor = grapesjs.init({
* blockManager: {
* // options
* }
* })
* ```
*
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
*
* ```js
* const blockManager = editor.BlockManager;
* ```
* * [add](#add) * * [add](#add)
* * [get](#get) * * [get](#get)
* * [getAll](#getall) * * [getAll](#getall)
* * [getAllVisible](#getallvisible) * * [getAllVisible](#getallvisible)
* * [remove](#remove)
* * [getConfig](#getconfig)
* * [getCategories](#getcategories) * * [getCategories](#getcategories)
* * [getContainer](#getcontainer) * * [getContainer](#getcontainer)
* * [render](#render) * * [render](#render)
* *
* Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
*
* Before using methods you should get first the module from the editor instance, in this way:
*
* ```js
* var blockManager = editor.BlockManager;
* ```
*
* @module BlockManager * @module BlockManager
* @param {Object} config Configurations
* @param {Array<Object>} [config.blocks=[]] Default blocks
* @example
* ...
* {
* blocks: [
* {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
* ...
* ],
* }
* ...
*/ */
import { isElement } from 'underscore'; import { isElement } from 'underscore';

5
src/commands/config/config.js
View File

@ -6,17 +6,22 @@ module.exports = {
defaults: [], defaults: [],
// Editor model // Editor model
// @deprecated
em: null, em: null,
// If true center new first-level components // If true center new first-level components
// @deprecated
firstCentered: true, firstCentered: true,
// If true the new component will created with 'height', else 'min-height' // If true the new component will created with 'height', else 'min-height'
// @deprecated
newFixedH: false, newFixedH: false,
// Minimum height (in px) of new component // Minimum height (in px) of new component
// @deprecated
minComponentH: 50, minComponentH: 50,
// Minimum width (in px) of component on creation // Minimum width (in px) of component on creation
// @deprecated
minComponentW: 50 minComponentW: 50
}; };

42
src/commands/index.js
View File

@ -1,42 +1,24 @@
/** /**
* * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js)
* * [add](#add)
* * [get](#get)
* * [has](#has)
*
* You can init the editor with all necessary commands via configuration
*
* ```js * ```js
* var editor = grapesjs.init({ * const editor = grapesjs.init({
* ... * commands: {
* commands: {...} // Check below for the properties * // options
* ... * }
* }); * })
* ``` * ```
* *
* Before using methods you should get first the module from the editor instance, in this way: * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
* *
* ```js * ```js
* var commands = editor.Commands; * const commands = editor.Commands;
* ``` * ```
* *
* * [add](#add)
* * [get](#get)
* * [has](#has)
*
* @module Commands * @module Commands
* @param {Object} config Configurations
* @param {Array<Object>} [config.defaults=[]] Array of possible commands
* @example
* ...
* commands: {
* defaults: [{
* id: 'helloWorld',
* run: function(editor, sender){
* alert('Hello world!');
* },
* stop: function(editor, sender){
* alert('Stop!');
* },
* }],
* },
* ...
*/ */
import { isFunction } from 'underscore'; import { isFunction } from 'underscore';

39
src/dom_components/index.js
View File

@ -1,4 +1,18 @@
/** /**
* With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js)
* ```js
* const editor = grapesjs.init({
* domComponents: {
* // options
* }
* })
* ```
*
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
*
* ```js
* const domComponents = editor.DomComponents;
* ```
* *
* * [getWrapper](#getwrapper) * * [getWrapper](#getwrapper)
* * [getComponents](#getcomponents) * * [getComponents](#getcomponents)
@ -8,30 +22,9 @@
* * [store](#store) * * [store](#store)
* * [render](#render) * * [render](#render)
* *
* With this module is possible to manage components inside the canvas.
* Before using methods you should get first the module from the editor instance, in this way:
*
* ```js
* var domComponents = editor.DomComponents;
* ```
*
* @module DomComponents * @module DomComponents
* @param {Object} config Configurations
* @param {string|Array<Object>} [config.components=[]] HTML string or an array of possible components
* @example
* ...
* domComponents: {
* components: '<div>Hello world!</div>',
* }
* // Or
* domComponents: {
* components: [
* { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
* { style: {width: '100px', content: 'world!'}}
* ],
* }
* ...
*/ */
import { isEmpty } from 'underscore'; import { isEmpty } from 'underscore';
module.exports = () => { module.exports = () => {
@ -378,7 +371,7 @@ module.exports = () => {
}, },
/** /**
* Returns root component inside the canvas. Something like <body> inside HTML page * Returns root component inside the canvas. Something like `<body>` inside HTML page
* The wrapper doesn't differ from the original Component Model * The wrapper doesn't differ from the original Component Model
* @return {Component} Root Component * @return {Component} Root Component
* @example * @example

Write Preview
Loading…
Cancel
Save