Table of contents
Documentation Core API

Blocks

Provides methods that allows manipulate with Blocks

clear — removes all Blocks and creates new empty initial type Block

render — render with new content data

delete — removes Block by index

swap — deprecated swaps two Blocks with passed indexes

move — move a block from position to another

getById — returns Block API for Block instance by Block Id

getBlockByIndex — returns Block API for Block instance by index

getCurrentBlockIndex — returns focused Block index

getBlocksCount — returns number of rendered Blocks

stretchBlock — stretch Block's content

insert — inserts new Block

update — updates Block data by its id

composeBlockData — Creates data of an empty block with a passed type

getBlockByElement — Returns Block API object by any child html element

Clear

Clears Editor's content. Method removes all Blocks and inserts new initial empty Block

Parameters

This method has no arguments

Return value

Method does not return anything

clear(): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } myMethod() { this.api.blocks.clear(); // remove all Blocks } // ... other methods }
☝️
Note.
Method has a shorthand

Render

Method removes all Blocks and fills with new passed JSON data

Parameters

OutputData Data that have the same format as output data of Editor.js

Return value

Promise<void> Returns nothing but allows to continue sequence
render(data: OutputData): Promise<void>

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } refreshContent() { this.api.blocks.render({ blocks: [ { type: "image", data: { url: "https://cdn.pixabay.com/photo/2017/09/01/21/53/blue-2705642_1280.jpg" } }, { type: "header", data: { text: "New header", level: 2 } } ] }); } // ... other methods }
☝️
Note.
Method has a shorthand

Delete

Method removes Block with index. If index is not passed, current Block will be removed

Parameters

Number index of Block that needs to be deleted

Return value

Method does not return anything

delete(index?: number): void

Note that Blocks below will be shifted up

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } deleteSomeBlock() { this.api.blocks.delete(2); // delete 3rd Block } // ... other methods }

Swap

☝️
Deprecated
Please use move instead

Method swaps two Blocks

Parameters

Number First Block index
Number Second Block index

Return value

Method does not return anything

swap(fromIndex: number, toIndex: number): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } changeBlockPositions() { this.api.blocks.swap(1, 2); // swap 1 and 2 Blocks } // ... other methods }

move

The method moves block from the passed index to another one. 

☝️
Note
The first argument is the toIndex, and the second is from

Parameters

Number Destination index
Number Index of Block to move. By default, it's the index of the current block.

Return value

Method does not return anything

move(toIndex: number, fromIndex?: number): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } moveBlockToTop() { this.api.blocks.move(0); // move current Block to the fisrt place } // ... other methods }

getById

Returns BlockAPI object by Block id

Parameters

String Id of Block that will be returned

Return value

BlockAPI Block API object for Block instance
getById(id: string): BlockAPI

Example

const editor = new EditorJS({ // ... configuration }) editor.blocks.getById('1sYMhUrznu'); // get Block with id "1sYMhUrznu"

getBlockByIndex

Method returns Block HTML content by index

Parameters

Number Index of Block that will be returned

Return value

BlockAPI Block API object for Block instance
getBlockByIndex(index: number): BlockAPI

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } myMethod() { this.api.blocks.getBlockByIndex(1); // get first Block contents } // ... other methods }

getCurrentBlockIndex

Method returns index of current Block

Parameters

This method has no arguments

Return value

Number Index of currently focused Block
getCurrentBlockIndex(): number

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } isFirstBlock() { return this.api.blocks.getCurrentBlockIndex() === 0; } // ... other methods }

getBlocksCount

Method returns number of Blocks

Parameters

This method has no arguments

Return value

Number Count of rendered Blocks
getBlocksCount(): number

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } isLastBlock() { return this.api.blocks.getCurrentBlockIndex() === this.api.blocks.getBlocksCount() - 1; } // ... other methods }

stretchBlock

Method allow Plugins to use 100% space of Block content. For example, to stretch images

Parameters

Number index of Block that will be full-width
Boolean state of stretching

Return value

stretchBlock(index: number, status: boolean = true): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } stretchMyImage() { this.api.blocks.stretchBlock(1, true); } // ... other methods }

insert

Method inserts new Block with pasted type and data.

Parameters

String New Block type 
Object New Block data
Object Config for new Block's Tool
Number Position for block. By default, it will inserted after current Block
Boolean Need to set focus or not.

Return value

Method does not return anything

insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean): void

insertNewBlock

Method inserts new Block after focused Block and sets new focus

☝️
Deprecated
This method will be removed with next major release. Use insert() instead

Parameters

This method has no arguments

Return value

Method does not return anything

insertNewBlock(): void

Example

class MyTool { constructor({data, api}){ this.api = api; // ... } myMethod() { this.api.blocks.insertNewBlock(); } // ... other methods }

update

Method updates a Block data by its id

Parameters

String Id of the Block to update
Object The new data for a Block

Return value

Method does not return anything

update(id?: string, data?: BlockToolData): void

composeBlockData

The method creates data of an empty block with a passed type.

Parameters

String Block Tool name

Return value

Promise<BlockToolData> Object with Tool output data
composeBlockData(toolName: string): Promise<BlockToolData>

Example

/** * Merge real tool's data with data overrides */ const toolName = 'myTool'; const defaultBlockData = await this.api.blocks.composeBlockData(toolName); const blockDataOverrides = {someProp: 'someValue'}; const blockData = Object.assign(defaultBlockData, blockDataOverrides); const newBlock = this.api.blocks.insert( toolName, blockData, undefined, index, undefined, false, );

getBlockByElement

Returns Block API object by any child html element. 

Parameters

HTMLElement html element

Return value

BlockAPI API of the block associated with specified  HTML element
previous
Core API
next
Selection