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

Refactor Asset models

pull/3795/head
Artur Arseniev 4 years ago
parent
0cdda7abc7
commit
13158bdc64
8 changed files with 267 additions and 152 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. 1
      docs/.vuepress/config.js
  2. 1
      docs/api.js
  3. 44
      docs/api/asset.md
  4. 109
      docs/api/assets.md
  5. 183
      docs/api/editor.md
  6. 8
      src/asset_manager/index.js
  7. 55
      src/asset_manager/model/Asset.js
  8. 18
      src/asset_manager/model/AssetImage.js

1
docs/.vuepress/config.js
View File

@ -61,6 +61,7 @@ module.exports = {
['/api/i18n', 'I18n'], ['/api/i18n', 'I18n'],
['/api/canvas', 'Canvas'], ['/api/canvas', 'Canvas'],
['/api/assets', 'Asset Manager'], ['/api/assets', 'Asset Manager'],
['/api/asset', `${subDivider}Asset`],
['/api/block_manager', 'Block Manager'], ['/api/block_manager', 'Block Manager'],
['/api/block', `${subDivider}Block`], ['/api/block', `${subDivider}Block`],
['/api/commands', 'Commands'], ['/api/commands', 'Commands'],

1
docs/api.js
View File

@ -13,6 +13,7 @@ async function generateDocs () {
await Promise.all([ await Promise.all([
['editor/index.js', 'editor.md'], ['editor/index.js', 'editor.md'],
['asset_manager/index.js', 'assets.md'], ['asset_manager/index.js', 'assets.md'],
['asset_manager/model/Asset.js', 'asset.md'],
['block_manager/index.js', 'block_manager.md'], ['block_manager/index.js', 'block_manager.md'],
['block_manager/model/Block.js', 'block.md'], ['block_manager/model/Block.js', 'block.md'],
['commands/index.js', 'commands.md'], ['commands/index.js', 'commands.md'],

44
docs/api/asset.md
View File

@ -0,0 +1,44 @@
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
## Asset
### Properties
* `type` **[String][1]** Asset type, eg. 'image'.
* `src` **[String][1]** Asset URL, eg. '[https://.../image.png][2]'.
### getFilename
Get filename of the asset (based on `src`).
#### Examples
```javascript
// Asset: { src: 'https://.../image.png' }
asset.getFilename(); // -> 'image.png'
// Asset: { src: 'https://.../image' }
asset.getFilename(); // -> 'image'
```
Returns **[String][1]**
### getExtension
Get extension of the asset (based on `src`).
#### Examples
```javascript
// Asset: { src: 'https://.../image.png' }
asset.getExtension(); // -> 'png'
// Asset: { src: 'https://.../image' }
asset.getExtension(); // -> ''
```
Returns **[String][1]**
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[2]: https://.../image.png

109
docs/api/assets.md
View File

@ -18,6 +18,19 @@ Once the editor is instantiated you can use its API. Before using these methods
const assetManager = editor.AssetManager; const assetManager = editor.AssetManager;
``` ```
## Available Events
* `asset:add` - Added new asset. The [Asset] is passed as an argument to the callback.
* `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
* `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
* `asset:upload:start` - Before the upload is started.
* `asset:upload:end` - After the upload is ended.
* `asset:upload:error` - On any error in upload, passes the error as an argument.
* `asset:upload:response` - On upload response, passes the result as an argument.
* `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
## Methods
* [add][2] * [add][2]
* [get][3] * [get][3]
* [getAll][4] * [getAll][4]
@ -31,81 +44,111 @@ const assetManager = editor.AssetManager;
* [getType][12] * [getType][12]
* [getTypes][13] * [getTypes][13]
[Asset]: asset.html
## open
Open the asset manager.
### Parameters
* `options` **[Object][14]?** Options for the asset manager. (optional, default `{}`)
* `options.types` **[Array][15]<[String][16]>** Types of assets to show. (optional, default `['image']`)
### Examples
```javascript
assetManager.open();
// with your custom types (you should have assets with those types declared)
assetManager.open({ types: ['doc'] });
```
## close
Close the asset manager.
### Examples
```javascript
assetManager.close();
```
## add ## add
Add new asset/s to the collection. URLs are supposed to be unique Add new asset/s to the collection. URLs are supposed to be unique
### Parameters ### Parameters
* `asset` **([string][14] | [Object][15] | [Array][16]<[string][14]> | [Array][16]<[Object][15]>)** URL strings or an objects representing the resource. * `asset` **([String][16] | [Object][14] | [Array][15]<[String][16]> | [Array][15]<[Object][14]>)** URL strings or an objects representing the resource.
* `opts` **[Object][15]?** Options (optional, default `{}`) * `opts` **[Object][14]?** Options (optional, default `{}`)
### Examples ### Examples
```javascript ```javascript
// In case of strings, would be interpreted as images // As strings
assetManager.add('http://img.jpg'); assetManager.add('http://img.jpg');
assetManager.add(['http://img.jpg', './path/to/img.png']); assetManager.add(['http://img.jpg', './path/to/img.png']);
// Using objects you could indicate the type and other meta informations // Using objects you can indicate the type and other meta informations
assetManager.add({ assetManager.add({
// type: 'image', // image is default
src: 'http://img.jpg', src: 'http://img.jpg',
//type: 'image', //image is default
height: 300, height: 300,
width: 200, width: 200,
}); });
assetManager.add([{ assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
src: 'http://img.jpg',
},{
src: './path/to/img.png',
}]);
``` ```
Returns **Model** Returns **[Asset]**
## get ## get
Returns the asset by URL Return asset by URL
### Parameters ### Parameters
* `src` **[string][14]** URL of the asset * `src` **[String][16]** URL of the asset
### Examples ### Examples
```javascript ```javascript
var asset = assetManager.get('http://img.jpg'); const asset = assetManager.get('http://img.jpg');
``` ```
Returns **[Object][15]** Object representing the asset Returns **([Asset] | null)** Object representing the asset
## getAll ## getAll
Return the global collection, containing all the assets Return the global collection, containing all the assets
Returns **Collection** Returns **Collection<[Asset]>**
## getAllVisible ## getAllVisible
Return the visible collection, which contains assets actually rendered Return the visible collection, which contains assets actually rendered
Returns **Collection** Returns **Collection<[Asset]>**
## remove ## remove
Remove the asset by its URL Remove asset
### Parameters ### Parameters
* `src` **[string][14]** URL of the asset * `asset` **([String][16] | [Asset])** Asset or asset URL
* `opts`
### Examples ### Examples
```javascript ```javascript
assetManager.remove('http://img.jpg'); const removed = assetManager.remove('http://img.jpg');
// or by passing the Asset
const asset = assetManager.get('http://img.jpg');
assetManager.remove(asset);
``` ```
Returns **this** Returns **[Asset]** Removed asset
## store ## store
@ -121,7 +164,7 @@ Store assets data to the selected storage
var assets = assetManager.store(); var assets = assetManager.store();
``` ```
Returns **[Object][15]** Data to store Returns **[Object][14]** Data to store
## load ## load
@ -130,7 +173,7 @@ The fetched data will be added to the collection.
### Parameters ### Parameters
* `data` **[Object][15]** Object of data to load (optional, default `{}`) * `data` **[Object][14]** Object of data to load (optional, default `{}`)
### Examples ### Examples
@ -140,7 +183,7 @@ var assets = assetManager.load({
}) })
``` ```
Returns **[Object][15]** Loaded assets Returns **[Object][14]** Loaded assets
## getContainer ## getContainer
@ -161,7 +204,7 @@ Render assets
### Parameters ### Parameters
* `assts` * `assts`
* `assets` **[array][16]** Assets to render, without the argument will render all global assets * `assets` **[array][15]** Assets to render, without the argument will render all global assets
### Examples ### Examples
@ -184,8 +227,8 @@ Add new type. If you want to get more about type definition we suggest to read t
### Parameters ### Parameters
* `id` **[string][14]** Type ID * `id` **[string][16]** Type ID
* `definition` **[Object][15]** Definition of the type. Each definition contains * `definition` **[Object][14]** 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
@ -206,15 +249,15 @@ Get type
### Parameters ### Parameters
* `id` **[string][14]** Type ID * `id` **[string][16]** Type ID
Returns **[Object][15]** Type definition Returns **[Object][14]** Type definition
## getTypes ## getTypes
Get types Get types
Returns **[Array][16]** Returns **[Array][15]**
[1]: https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js [1]: https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js
@ -242,11 +285,11 @@ Returns **[Array][16]**
[13]: #gettypes [13]: #gettypes
[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

183
docs/api/editor.md
View File

@ -50,15 +50,6 @@ editor.on('EVENT-NAME', (some, argument) => {
* `block:drag` - Dragging block, the block's model and the drag event are passed as arguments * `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
* `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block * `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
### Assets
* `asset:add` - New asset added
* `asset:remove` - Asset removed
* `asset:upload:start` - Before the upload is started
* `asset:upload:end` - After the upload is ended
* `asset:upload:error` - On any error in upload, passes the error as an argument
* `asset:upload:response` - On upload response, passes the result as an argument
### Keymaps ### Keymaps
* `keymap:add` - New keymap added. The new keyamp object is passed as an argument * `keymap:add` - New keymap added. The new keyamp object is passed as an argument
@ -118,21 +109,25 @@ By changing `result.content` you're able to customize what is dropped
* `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback * `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
* `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback * `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
### Assets
Check the [Assets][2] module.
### Modal ### Modal
Check the [Modal][2] module. Check the [Modal][3] module.
### Devices ### Devices
Check the [Devices][3] module. Check the [Devices][4] module.
### Parser ### Parser
Check the [Parser][4] module. Check the [Parser][5] module.
### Pages ### Pages
Check the [Pages][5] module. Check the [Pages][6] module.
### General ### General
@ -148,7 +143,7 @@ Returns configuration object
### Parameters ### Parameters
* `prop` **[string][6]?** Property name * `prop` **[string][7]?** Property name
Returns **any** Returns the configuration object or Returns **any** Returns the configuration object or
the value of the specified property the value of the specified property
@ -159,12 +154,12 @@ Returns HTML built inside canvas
### Parameters ### Parameters
* `opts` **[Object][7]** Options (optional, default `{}`) * `opts` **[Object][8]** Options (optional, default `{}`)
* `opts.component` **Component?** Return the HTML of a specific Component * `opts.component` **Component?** Return the HTML of a specific Component
* `opts.cleanId` **[Boolean][8]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`) * `opts.cleanId` **[Boolean][9]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
Returns **[string][6]** HTML string Returns **[string][7]** HTML string
## getCss ## getCss
@ -172,13 +167,13 @@ Returns CSS built inside canvas
### Parameters ### Parameters
* `opts` **[Object][7]** Options (optional, default `{}`) * `opts` **[Object][8]** Options (optional, default `{}`)
* `opts.component` **Component?** Return the CSS of a specific Component * `opts.component` **Component?** Return the CSS of a specific Component
* `opts.json` **[Boolean][8]** Return an array of CssRules instead of the CSS string (optional, default `false`) * `opts.json` **[Boolean][9]** Return an array of CssRules instead of the CSS string (optional, default `false`)
* `opts.avoidProtected` **[Boolean][8]** Don't include protected CSS (optional, default `false`) * `opts.avoidProtected` **[Boolean][9]** Don't include protected CSS (optional, default `false`)
Returns **([String][6] | [Array][9]\<CssRule>)** CSS string or array of CssRules Returns **([String][7] | [Array][10]\<CssRule>)** CSS string or array of CssRules
## getJs ## getJs
@ -186,11 +181,11 @@ Returns JS of all components
### Parameters ### Parameters
* `opts` **[Object][7]** Options (optional, default `{}`) * `opts` **[Object][8]** Options (optional, default `{}`)
* `opts.component` **Component?** Get the JS of a specific component * `opts.component` **Component?** Get the JS of a specific component
Returns **[String][6]** JS string Returns **[String][7]** JS string
## getComponents ## getComponents
@ -210,8 +205,8 @@ Set components inside editor's canvas. This method overrides actual components
### Parameters ### Parameters
* `components` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** HTML string or components model * `components` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** HTML string or components model
* `opt` **[Object][7]** the options object to be used by the \[setComponents][em#setComponents][10] method (optional, default `{}`) * `opt` **[Object][8]** the options object to be used by the \[setComponents][em#setComponents][11] method (optional, default `{}`)
### Examples ### Examples
@ -233,10 +228,10 @@ Add components
### Parameters ### Parameters
* `components` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** HTML string or components model * `components` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** HTML string or components model
* `opts` **[Object][7]** Options * `opts` **[Object][8]** Options
* `opts.avoidUpdateStyle` **[Boolean][8]** If the HTML string contains styles, * `opts.avoidUpdateStyle` **[Boolean][9]** If the HTML string contains styles,
by default, they will be created and, if already exist, updated. When this option by default, they will be created and, if already exist, updated. When this option
is true, styles already created will not be updated. (optional, default `false`) is true, styles already created will not be updated. (optional, default `false`)
@ -252,13 +247,13 @@ editor.addComponents({
}); });
``` ```
Returns **[Array][9]\<Component>** Returns **[Array][10]\<Component>**
## getStyle ## getStyle
Returns style in JSON format object Returns style in JSON format object
Returns **[Object][7]** Returns **[Object][8]**
## setStyle ## setStyle
@ -266,7 +261,7 @@ Set style inside editor's canvas. This method overrides actual style
### Parameters ### Parameters
* `style` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** CSS string or style model * `style` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** CSS string or style model
* `opt` (optional, default `{}`) * `opt` (optional, default `{}`)
### Examples ### Examples
@ -288,7 +283,7 @@ Add styles to the editor
### Parameters ### Parameters
* `style` **([Array][9]<[Object][7]> | [Object][7] | [string][6])** CSS string or style model * `style` **([Array][10]<[Object][8]> | [Object][8] | [string][7])** CSS string or style model
* `opts` (optional, default `{}`) * `opts` (optional, default `{}`)
### Examples ### Examples
@ -297,7 +292,7 @@ Add styles to the editor
editor.addStyle('.cls{color: red}'); editor.addStyle('.cls{color: red}');
``` ```
Returns **[Array][9]\<CssRule>** Array of created CssRule instances Returns **[Array][10]\<CssRule>** Array of created CssRule instances
## getSelected ## getSelected
@ -309,7 +304,7 @@ Returns **Model**
Returns an array of all selected components Returns an array of all selected components
Returns **[Array][9]** Returns **[Array][10]**
## getSelectedToStyle ## getSelectedToStyle
@ -327,10 +322,10 @@ Select a component
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][11])** Component to select * `el` **(Component | [HTMLElement][12])** Component to select
* `opts` **[Object][7]?** Options * `opts` **[Object][8]?** Options
* `opts.scroll` **[Boolean][8]?** Scroll canvas to the selected element * `opts.scroll` **[Boolean][9]?** Scroll canvas to the selected element
### Examples ### Examples
@ -349,7 +344,7 @@ Add component to selection
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][11] | [Array][9])** Component to select * `el` **(Component | [HTMLElement][12] | [Array][10])** Component to select
### Examples ### Examples
@ -365,7 +360,7 @@ Remove component from selection
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][11] | [Array][9])** Component to select * `el` **(Component | [HTMLElement][12] | [Array][10])** Component to select
### Examples ### Examples
@ -381,7 +376,7 @@ Toggle component selection
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][11] | [Array][9])** Component to select * `el` **(Component | [HTMLElement][12] | [Array][10])** Component to select
### Examples ### Examples
@ -413,7 +408,7 @@ change the canvas to the proper width
### Parameters ### Parameters
* `name` **[string][6]** Name of the device * `name` **[string][7]** Name of the device
### Examples ### Examples
@ -435,7 +430,7 @@ console.log(device);
// 'Tablet' // 'Tablet'
``` ```
Returns **[string][6]** Device name Returns **[string][7]** Device name
## runCommand ## runCommand
@ -443,8 +438,8 @@ Execute command
### Parameters ### Parameters
* `id` **[string][6]** Command ID * `id` **[string][7]** Command ID
* `options` **[Object][7]** Custom options (optional, default `{}`) * `options` **[Object][8]** Custom options (optional, default `{}`)
### Examples ### Examples
@ -460,8 +455,8 @@ Stop the command if stop method was provided
### Parameters ### Parameters
* `id` **[string][6]** Command ID * `id` **[string][7]** Command ID
* `options` **[Object][7]** Custom options (optional, default `{}`) * `options` **[Object][8]** Custom options (optional, default `{}`)
### Examples ### Examples
@ -477,9 +472,9 @@ Store data to the current storage
### Parameters ### Parameters
* `clb` **[Function][12]** Callback function * `clb` **[Function][13]** Callback function
Returns **[Object][7]** Stored data Returns **[Object][8]** Stored data
## storeData ## storeData
@ -492,7 +487,7 @@ console.log(editor.storeData());
// { pages: [...], styles: [...], ... } // { pages: [...], styles: [...], ... }
``` ```
Returns **[Object][7]** Returns **[Object][8]**
## load ## load
@ -500,9 +495,9 @@ Load data from the current storage
### Parameters ### Parameters
* `clb` **[Function][12]** Callback function * `clb` **[Function][13]** Callback function
Returns **[Object][7]** Stored data Returns **[Object][8]** Stored data
## loadData ## loadData
@ -510,7 +505,7 @@ Load data from the JSON data object
### Parameters ### Parameters
* `data` **[Object][7]** Data to load * `data` **[Object][8]** Data to load
### Examples ### Examples
@ -518,21 +513,21 @@ Load data from the JSON data object
editor.loadData({ pages: [...], styles: [...], ... }) editor.loadData({ pages: [...], styles: [...], ... })
``` ```
Returns **[Object][7]** Loaded object Returns **[Object][8]** Loaded object
## getContainer ## getContainer
Returns container element. The one which was indicated as 'container' Returns container element. The one which was indicated as 'container'
on init method on init method
Returns **[HTMLElement][11]** Returns **[HTMLElement][12]**
## getDirtyCount ## getDirtyCount
Return the count of changes made to the content and not yet stored. Return the count of changes made to the content and not yet stored.
This count resets at any `store()` This count resets at any `store()`
Returns **[number][13]** Returns **[number][14]**
## refresh ## refresh
@ -545,9 +540,9 @@ refresh you'll get misleading position of tools
### Parameters ### Parameters
* `opts` * `opts`
* `options` **[Object][7]?** Options * `options` **[Object][8]?** Options
* `options.tools` **[Boolean][8]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`) * `options.tools` **[Boolean][9]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
## setCustomRte ## setCustomRte
@ -555,7 +550,7 @@ Replace the built-in Rich Text Editor with a custom one.
### Parameters ### Parameters
* `obj` **[Object][7]** Custom RTE Interface * `obj` **[Object][8]** Custom RTE Interface
### Examples ### Examples
@ -595,7 +590,7 @@ custom parser, pass `null` as the argument
### Parameters ### Parameters
* `parser` **([Function][12] | null)** Parser function * `parser` **([Function][13] | null)** Parser function
### Examples ### Examples
@ -617,11 +612,11 @@ Returns **this**
## setDragMode ## setDragMode
Change the global drag mode of components. Change the global drag mode of components.
To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][14] To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][15]
### Parameters ### Parameters
* `value` **[String][6]** Drag mode, options: 'absolute' | 'translate' * `value` **[String][7]** Drag mode, options: 'absolute' | 'translate'
Returns **this** Returns **this**
@ -632,10 +627,10 @@ Trigger event log message
### Parameters ### Parameters
* `msg` **any** Message to log * `msg` **any** Message to log
* `opts` **[Object][7]** Custom options (optional, default `{}`) * `opts` **[Object][8]** Custom options (optional, default `{}`)
* `opts.ns` **[String][6]** Namespace of the log (eg. to use in plugins) (optional, default `''`) * `opts.ns` **[String][7]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
* `opts.level` **[String][6]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`) * `opts.level` **[String][7]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
### Examples ### Examples
@ -657,11 +652,11 @@ Translate label
### Parameters ### Parameters
* `args` **...any** * `args` **...any**
* `key` **[String][6]** Label to translate * `key` **[String][7]** Label to translate
* `opts` **[Object][7]?** Options for the translation * `opts` **[Object][8]?** Options for the translation
* `opts.params` **[Object][7]?** Params for the translation * `opts.params` **[Object][8]?** Params for the translation
* `opts.noWarn` **[Boolean][8]?** Avoid warnings in case of missing resources * `opts.noWarn` **[Boolean][9]?** Avoid warnings in case of missing resources
### Examples ### Examples
@ -673,7 +668,7 @@ editor.t('msg2', { params: { test: 'hello' } });
editor.t('msg2', { params: { test: 'hello' }, l: 'it' }); editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
``` ```
Returns **[String][6]** Returns **[String][7]**
## on ## on
@ -681,8 +676,8 @@ Attach event
### Parameters ### Parameters
* `event` **[string][6]** Event name * `event` **[string][7]** Event name
* `callback` **[Function][12]** Callback function * `callback` **[Function][13]** Callback function
Returns **this** Returns **this**
@ -692,8 +687,8 @@ Attach event and detach it after the first run
### Parameters ### Parameters
* `event` **[string][6]** Event name * `event` **[string][7]** Event name
* `callback` **[Function][12]** Callback function * `callback` **[Function][13]** Callback function
Returns **this** Returns **this**
@ -703,8 +698,8 @@ Detach event
### Parameters ### Parameters
* `event` **[string][6]** Event name * `event` **[string][7]** Event name
* `callback` **[Function][12]** Callback function * `callback` **[Function][13]** Callback function
Returns **this** Returns **this**
@ -714,7 +709,7 @@ Trigger event
### Parameters ### Parameters
* `event` **[string][6]** Event to trigger * `event` **[string][7]** Event to trigger
Returns **this** Returns **this**
@ -726,7 +721,7 @@ Destroy the editor
Render editor Render editor
Returns **[HTMLElement][11]** Returns **[HTMLElement][12]**
## html ## html
@ -734,8 +729,8 @@ Print safe HTML by using ES6 tagged template strings.
### Parameters ### Parameters
* `literals` **[Array][9]<[String][6]>** * `literals` **[Array][10]<[String][7]>**
* `substs` **[Array][9]<[String][6]>** * `substs` **[Array][10]<[String][7]>**
### Examples ### Examples
@ -746,32 +741,34 @@ const safeStr = '<b>Hello</b>';
const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`; const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
``` ```
Returns **[String][6]** Returns **[String][7]**
[1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js [1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js
[2]: /api/modal_dialog.html [2]: /api/assets.html
[3]: /api/modal_dialog.html
[3]: /api/device_manager.html [4]: /api/device_manager.html
[4]: /api/parser.html [5]: /api/parser.html
[5]: /api/pages.html [6]: /api/pages.html
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[10]: em#setComponents [11]: em#setComponents
[11]: https://developer.mozilla.org/docs/Web/HTML/Element [12]: https://developer.mozilla.org/docs/Web/HTML/Element
[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[14]: https://github.com/artf/grapesjs/issues/1936 [15]: https://github.com/artf/grapesjs/issues/1936

8
src/asset_manager/index.js
View File

@ -113,7 +113,11 @@ export default () => {
/** /**
* Open the asset manager. * Open the asset manager.
* @param {Object} [options] Options for the asset manager. * @param {Object} [options] Options for the asset manager.
* @param {Array<String} [options.types=['image']] Types of assets to show. * @param {Array<String>} [options.types=['image']] Types of assets to show.
* @example
* assetManager.open();
* // with your custom types (you should have assets with those types declared)
* assetManager.open({ types: ['doc'] });
*/ */
open(options = {}) { open(options = {}) {
const cmd = this.em.get('Commands'); const cmd = this.em.get('Commands');
@ -122,6 +126,8 @@ export default () => {
/** /**
* Close the asset manager. * Close the asset manager.
* @example
* assetManager.close();
*/ */
close() { close() {
const cmd = this.em.get('Commands'); const cmd = this.em.get('Commands');

55
src/asset_manager/model/Asset.js
View File

@ -1,32 +1,53 @@
import Backbone from 'backbone'; import { result } from 'underscore';
import { Model } from 'common';
export default Backbone.Model.extend({ /**
idAttribute: 'src', * @property {String} type Asset type, eg. 'image'.
* @property {String} src Asset URL, eg. 'https://.../image.png'.
defaults: { */
type: '', export default class Asset extends Model {
src: '' defaults() {
}, return {
type: '',
src: ''
};
}
/** /**
* Get filename of the asset * Get filename of the asset (based on `src`).
* @return {string} * @returns {String}
* @private * @example
* // Asset: { src: 'https://.../image.png' }
* asset.getFilename(); // -> 'image.png'
* // Asset: { src: 'https://.../image' }
* asset.getFilename(); // -> 'image'
* */ * */
getFilename() { getFilename() {
return this.get('src') return this.get('src')
.split('/') .split('/')
.pop(); .pop()
}, .split('?')
.shift();
}
/** /**
* Get extension of the asset * Get extension of the asset (based on `src`).
* @return {string} * @returns {String}
* @private * @example
* // Asset: { src: 'https://.../image.png' }
* asset.getExtension(); // -> 'png'
* // Asset: { src: 'https://.../image' }
* asset.getExtension(); // -> ''
* */ * */
getExtension() { getExtension() {
return this.getFilename() return this.getFilename()
.split('.') .split('.')
.pop(); .pop();
} }
}); }
Asset.prototype.idAttribute = 'src';
Asset.getDefaults = function() {
return result(this.prototype, 'defaults');
};

18
src/asset_manager/model/AssetImage.js
View File

@ -1,11 +1,13 @@
import Asset from './Asset'; import Asset from './Asset';
export default Asset.extend({ export default class AssetImage extends Asset {
defaults: { defaults() {
...Asset.prototype.defaults, return {
type: 'image', ...Asset.getDefaults(),
unitDim: 'px', type: 'image',
height: 0, unitDim: 'px',
width: 0 height: 0,
width: 0
};
} }
}); }

Write Preview
Loading…
Cancel
Save