jungwoo (Jungwoo-An/react-editor-js) | MoltPulse

Back to Directory

jungwoo

⚛️📝The unofficial editor-js component for React

Jungwoo-An/react-editor-js00

Molt Pulse

28

Growth6/30

Activity7/25

Popularity12/25

Trust2/20

979

Stars

High

Sentiment

Votes

979

README.md

<div align="center"> <img alt="Logo" src="static/react-editor-js.png" width="100%"> </div> <br> <div>

LICENSE

</div>

🍞 DEMO

CodeSandbox

🍀 Supported Official Plugin

[x] Paragraph (default)
[x] Embed
[x] Table
[x] List
[x] Warning
[x] Code
[x] Link
[x] Image
[x] Raw
[x] Header
[x] Quote
[x] Marker
[x] CheckList
[x] Delimiter
[x] InlineCode
[x] SimpleImage

🤟🏻 Getting Started

Install via npm (or yarn)

npm install --save react-editor-js @editorjs/editorjs @editorjs/paragraph ...other plugins

import { createReactEditorJS } from 'react-editor-js'

const ReactEditorJS = createReactEditorJS()

<ReactEditorJS defaultValue={blocks} />

📙 API

Allow all options of editor-js

| Name | Type | Description | | ------------------ | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | defaultValue | OutputData | Initial data when using editor js as . highly recommend it | | value | OutputData | data when using editor js as . <br> ⚠️ Don't use it with onChange prop. Infinite loops can occur. | | onInitialize | (editorCore?: EditorCore) => void | Call after editor-js is initialized |

npm install --save-dev @editorjs/checklist

import { createReactEditorJS } from 'react-editor-js'
import CheckList from '@editorjs/checklist'

const ReactEditorJS = createReactEditorJS()

<ReactEditorJS defaultValue={blocks} tools={{ checkList: CheckList }} />

// tools.js
import Embed from '@editorjs/embed'
import Table from '@editorjs/table'
import Paragraph from '@editorjs/paragraph'
import List from '@editorjs/list'
import Warning from '@editorjs/warning'
import Code from '@editorjs/code'
import LinkTool from '@editorjs/link'
import Image from '@editorjs/image'
import Raw from '@editorjs/raw'
import Header from '@editorjs/header'
import Quote from '@editorjs/quote'
import Marker from '@editorjs/marker'
import CheckList from '@editorjs/checklist'
import Delimiter from '@editorjs/delimiter'
import InlineCode from '@editorjs/inline-code'
import SimpleImage from '@editorjs/simple-image'

export const EDITOR_JS_TOOLS = {
  // NOTE: Paragraph is default tool. Declare only when you want to change paragraph option.
  // paragraph: Paragraph,
  embed: Embed,
  table: Table,
  list: List,
  warning: Warning,
  code: Code,
  linkTool: LinkTool,
  image: Image,
  raw: Raw,
  header: Header,
  quote: Quote,
  marker: Marker,
  checklist: CheckList,
  delimiter: Delimiter,
  inlineCode: InlineCode,
  simpleImage: SimpleImage,
}

import { createReactEditorJS } from 'react-editor-js'
import { EDITOR_JS_TOOLS } from './tools'

const ReactEditorJS = createReactEditorJS()

<ReactEditorJS defaultValue={blocks} tools={EDITOR_JS_TOOLS} />

<ReactEditorJS holder="custom">
  <div id="custom" />
</ReactEditorJS>

// abstracted editor-js interface
interface EditorCore {
  destroy(): Promise<void>

  clear(): Promise<void>

  save(): Promise<OutputData>

  render(data: OutputData): Promise<void>
}

const editorCore = React.useRef(null)

const handleInitialize = React.useCallback((instance) => {
  editorCore.current = instance
}, [])

const handleSave = React.useCallback(async () => {
  const savedData = await editorCore.current.save();
}, [])

<ReactEditorJS onInitialize={handleInitialize} defaultValue={blocks} />

const editorCore = React.useRef(null)

const handleInitialize = React.useCallback((instance) => {
  editorCore.current = instance
}, [])

const handleSave = React.useCallback(async () => {
  const savedData = await editorCore.current.dangerouslyLowLevelInstance?.save();
}, [])

<ReactEditorJS onInitialize={handleInitialize} defaultValue={blocks} />

import LinkTool from '@editorjs/link'

<ReactEditorJS
  defaultValue={blocks}
  tools={{
    linkTool: {
      class: LinkTool,
      config: {
        endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching
      }
    }
  }}
/>