react-editor.js

React wrapper component for Editor.js

Install

npm install --save @stfy/react-editor.js

// or Yarn

yarn add @stfy/react-editor.js

Usage

import React, { Component } from 'react'
import Editor from '@stfy/react-editor.js'

const App => (
  <>
    <Editor
        autofocus
        holder="editorjs-container"
        excludeDefaultTools={['header']}
        onChange={() => console.log('Something is changing!!')}
        onData={(data) => console.log(data)}
        customTools={{
          header: CustomHeader
        }}
        onReady={() => console.log('Start!')}
        data={{
          "time" : 1554920381017,
          "blocks" : [
              {
                  "type" : "header",
                  "data" : {
                      "text" : "Hello Editor.js",
                      "level" : 2
                  }
              },
          ],
          "version" : "2.12.4"
        }}
      />
  </>
)

Props

Name	Type	Default	Description
autofocus	boolean	true	Set Caret to the Editor after initialisation
holder	string	editorjs-holder	Id of Element that should contain the Editor
onChange	function	null	onChange callback
onReady	function	null	onReady callback
onData	function	null	onData callback; used to access data after onChange is called
data	object	null	Previously saved data that should be rendered
customTools	object	null	Set custom tools config or overwrite existed
excludeDefaultTools	array	null	Exclude default tool by tool name
reinitOnPropsChange	boolean	false	Re initialize the editor if the props change

Default tools

Name	Package
header	@editorjs/header
list	@editorjs/list
inlineCode	@editorjs/inlineCode
image	@editorjs/image
embed	@editorjs/embed
quote	@editorjs/quote
marker	@editorjs/marker
code	@editorjs/code
link	@editorjs/link
delimiter	@editorjs/delimiter
raw	@editorjs/raw
table	@editorjs/table
warning	@editorjs/warning
paragraph	@editorjs/paragraph
checklist	@editorjs/checklist

Contributing

Welcome to contribute.

License

MIT Licensed. License 2019