Contenty Editor

This has been built using editor.js and several of its plugins for use in react.js based project.

Installation

First, install this package to your project

yarn add contenty-editor

Install the required dependencies

yarn add  @editorjs/editorjs  @editorjs/header  @editorjs/paragraph  @editorjs/quote  @editorjs/warning  editorjs-alert  @editorjs/nested-list  @editorjs/checklist  @editorjs/code  @calumk/editorjs-columns  @editorjs/table  editorjs-break-line  @editorjs/link  @editorjs/embed  @editorjs/simple-image  axios  framer-motion

Usage

Add the editor.css file to your project. (In next.js project you need to add it in the pages/_app.tsx file)

import 'contenty-editor/src/ContentyEditor/css/editor.css';

Import the ContentyEditor component and use it to your application

import ContentyEditor from 'contenty-editor';
import EditorJS from '@editorjs/editorjs';

const App = () => {
  const editorRef = useRef<EditorJS>()
  return (
    <ContentyEditor
      editorRef={editorRef}
      mandatoryControls={[]} // An array of mandatory controls
      optionalControlTypes={ []} // An array of optional controls
    />
  );
};

Props

| Field | Type | Description | | ---------------------- | ---------------------------- | ------------------------------------------------------------- | | editorRef | MutableRefObject<EditorJS> | Holds a reference to the editor | | mandatoryControls | IMandatoryControl[] | Controls for adding new blocks, hidden for certain conditions | | optionalControlTypes | string[] | Available control types in the editor toolbox | | initialData | OutputData | Generates initial blocks based on editor data | | themeColors | IEditorColors | For changing theme colors | | editorToolConfig | IETConfig | Tool configurations used within the editor tools |