Browse Source

Build docs

pull/3670/head v0.17.22
Artur Arseniev 5 years ago
parent
commit
c5da493aeb
  1. 2
      docs/api/block_manager.md
  2. 92
      docs/api/editor.md

2
docs/api/block_manager.md

@ -49,7 +49,7 @@ Add new block to the collection.
* `opts.label` **[string][12]** Name of the block * `opts.label` **[string][12]** Name of the block
* `opts.content` **[string][12]** HTML content * `opts.content` **[string][12]** HTML content
* `opts.category` **([string][12] | [Object][11])** Group the block inside a catgegory. * `opts.category` **([string][12] | [Object][11])** Group the block inside a category.
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:

92
docs/api/editor.md

@ -262,7 +262,7 @@ Set style inside editor's canvas. This method overrides actual style
### Parameters ### Parameters
* `style` **([Array][6]<[Object][4]> | [Object][4] | [string][3])** CSS string or style model * `style` **([Array][6]<[Object][4]> | [Object][4] | [string][3])** CSS string or style model
* `opt` **[Object][4]** the options object to be used by the \[setStyle][em#setStyle][8] method (optional, default `{}`) * `opt` (optional, default `{}`)
### Examples ### Examples
@ -277,6 +277,23 @@ editor.setStyle({
Returns **this** Returns **this**
## addStyle
Add styles to the editor
### Parameters
* `style` **([Array][6]<[Object][4]> | [Object][4] | [string][3])** CSS string or style model
* `opts` (optional, default `{}`)
### Examples
```javascript
editor.addStyle('.cls{color: red}');
```
Returns **[Array][6]\<CssRule>** Array of created CssRule instances
## getSelected ## getSelected
Returns the last selected component, if there is one Returns the last selected component, if there is one
@ -305,7 +322,7 @@ Select a component
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][9])** Component to select * `el` **(Component | [HTMLElement][8])** Component to select
* `opts` **[Object][4]?** Options * `opts` **[Object][4]?** Options
* `opts.scroll` **[Boolean][5]?** Scroll canvas to the selected element * `opts.scroll` **[Boolean][5]?** Scroll canvas to the selected element
@ -327,7 +344,7 @@ Add component to selection
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][9] | [Array][6])** Component to select * `el` **(Component | [HTMLElement][8] | [Array][6])** Component to select
### Examples ### Examples
@ -343,7 +360,7 @@ Remove component from selection
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][9] | [Array][6])** Component to select * `el` **(Component | [HTMLElement][8] | [Array][6])** Component to select
### Examples ### Examples
@ -359,7 +376,7 @@ Toggle component selection
### Parameters ### Parameters
* `el` **(Component | [HTMLElement][9] | [Array][6])** Component to select * `el` **(Component | [HTMLElement][8] | [Array][6])** Component to select
### Examples ### Examples
@ -369,6 +386,21 @@ editor.selectToggle(model);
Returns **this** Returns **this**
## getEditing
Returns, if active, the Component enabled in rich text editing mode.
### Examples
```javascript
const textComp = editor.getEditing();
if (textComp) {
console.log('HTML: ', textComp.toHTML());
}
```
Returns **(Component | null)**
## setDevice ## setDevice
Set device to the editor. If the device exists it will Set device to the editor. If the device exists it will
@ -440,7 +472,7 @@ Store data to the current storage
### Parameters ### Parameters
* `clb` **[Function][10]** Callback function * `clb` **[Function][9]** Callback function
Returns **[Object][4]** Stored data Returns **[Object][4]** Stored data
@ -450,7 +482,7 @@ Load data from the current storage
### Parameters ### Parameters
* `clb` **[Function][10]** Callback function * `clb` **[Function][9]** Callback function
Returns **[Object][4]** Stored data Returns **[Object][4]** Stored data
@ -459,14 +491,14 @@ Returns **[Object][4]** Stored data
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][9]** Returns **[HTMLElement][8]**
## 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][11]** Returns **[number][10]**
## refresh ## refresh
@ -529,7 +561,7 @@ custom parser, pass `null` as the argument
### Parameters ### Parameters
* `parser` **([Function][10] | null)** Parser function * `parser` **([Function][9] | null)** Parser function
### Examples ### Examples
@ -551,7 +583,7 @@ 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][12] To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][11]
### Parameters ### Parameters
@ -616,7 +648,7 @@ Attach event
### Parameters ### Parameters
* `event` **[string][3]** Event name * `event` **[string][3]** Event name
* `callback` **[Function][10]** Callback function * `callback` **[Function][9]** Callback function
Returns **this** Returns **this**
@ -627,7 +659,7 @@ Attach event and detach it after the first run
### Parameters ### Parameters
* `event` **[string][3]** Event name * `event` **[string][3]** Event name
* `callback` **[Function][10]** Callback function * `callback` **[Function][9]** Callback function
Returns **this** Returns **this**
@ -638,7 +670,7 @@ Detach event
### Parameters ### Parameters
* `event` **[string][3]** Event name * `event` **[string][3]** Event name
* `callback` **[Function][10]** Callback function * `callback` **[Function][9]** Callback function
Returns **this** Returns **this**
@ -660,7 +692,27 @@ Destroy the editor
Render editor Render editor
Returns **[HTMLElement][9]** Returns **[HTMLElement][8]**
## html
Print safe HTML by using ES6 tagged template strings.
### Parameters
* `literals` **[Array][6]<[String][3]>**
* `substs` **[Array][6]<[String][3]>**
### Examples
```javascript
const unsafeStr = '<script>....</script>';
const safeStr = '<b>Hello</b>';
// Use `$${var}` to avoid escaping
const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
```
Returns **[String][3]**
[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
@ -676,12 +728,10 @@ Returns **[HTMLElement][9]**
[7]: em#setComponents [7]: em#setComponents
[8]: em#setStyle [8]: https://developer.mozilla.org/docs/Web/HTML/Element
[9]: https://developer.mozilla.org/docs/Web/HTML/Element
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[12]: https://github.com/artf/grapesjs/issues/1936 [11]: https://github.com/artf/grapesjs/issues/1936

Loading…
Cancel
Save