ninjabiscuit / editor

editor

• block schema and validation
• CRUD blocks
• documented public API
• self-contained editor constructor
• state-driven user interface
• versioned block types
• block type state management
• block type primitives
• contributing guide
• customisable styling
• i18n
• rich-text editing
• tests
• undo

example

const Editor = require('editor')

const editor = new Editor()
editor.addBlockType(require('./text'))
document.body.appendChild(editor.element)

api

Editor

Instantiate an editor

Parameters

• initialState Object= optional initial state

Examples

const editor = new Editor()

addBlockType

Add block type

Parameters

• blockType Object
  • blockType.name string – block type name
  • blockType.version string – block type version
  • blockType.main Function – block type function
  • blockType.schema Object – block type schema
  • blockType.initialData Object – block type initial data
  • blockType.initialState Object – block type initial state

Examples

const editor = new Editor()
editor.addBlockType(require('editor/text'))

createBlock

Create block

Parameters

• name string – block type name
• position number – id of block to position after

Examples

const editor = new Editor()
editor.createBlock('text')

Returns number id of the block

deleteBlock

Delete block

Parameters

• id number id of the block to delete

Examples

const editor = new Editor()
editor.deleteBlock(123)

hideToolbar

Hide toolbar

Examples

const editor = new Editor()
editor.hideToolbar()

showToolbar

Show toolbar

Parameters

• position number id of the block to position after

Examples

const editor = new Editor()
editor.showToolbar(123)

blocks

Get blocks

Examples

const editor = new Editor()
editor.blocks

element

Get editor DOM element

Examples

const editor = new Editor()
document.body.appendChild(editor.element)

state

Get editor state

Examples

const editor = new Editor()
editor.state

Block

Instantiate a block

Parameters

• editor Object associated editor instance
• block Object plain block object

updateData

Update block data

Parameters

• data Object

Examples

const editor = new Editor()
const block = editor.blocks.find(b => b.id === 123)
block.updateData({ text: 'abc' })

updateState

Update block state

Parameters

• state Object

Examples

const editor = new Editor()
const block = editor.blocks.find(b => b.id === 123)
block.updateState({ edit: true })

validate

Validate block data

Examples

const editor = new Editor()
const block = editor.blocks.find(b => b.id === 123)
block.validate()

Returns (Boolean|Array) an array of errors if there are any, otherwise true