# next-editor

> Powerful rich text editor for react

Latest version **0.0.6** (published 2023-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-editor
pnpm add next-editor
yarn add next-editor
bun add next-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2023-06-17 |
| First published | 2022-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lyove |
| Maintainers | lyove |
| Keywords | contenteditable, editor, react-editor, html-editor, rte, next-editor, next-editor-react, rich-text-editor, wysiwyg, wysiwyg-editor |

## Links

- npm: https://www.npmjs.com/package/next-editor
- Repository: https://github.com/lyove/next-editor-react
- Homepage: https://github.com/lyove/next-editor-react#readme
- Issues: https://github.com/lyove/next-editor-react/issues
- npm.io page: https://npm.io/package/next-editor

## Dependencies (14)

- [url](https://npm.io/package/url.md) ^0.11.0
- [antd](https://npm.io/package/antd.md) ^4.24.5
- [lozad](https://npm.io/package/lozad.md) ^1.9.0
- [react](https://npm.io/package/react.md) ^16.14.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [@antv/g6](https://npm.io/package/@antv/g6.md) ^2.2.6
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.1
- [keymaster](https://npm.io/package/keymaster.md) ^1.6.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.14.0
- [codemirror](https://npm.io/package/codemirror.md) ^5.45.0
- [photoswipe](https://npm.io/package/photoswipe.md) ^4.1.3
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1
- [query-string](https://npm.io/package/query-string.md) ^7.1.1
- [next-editor-engine](https://npm.io/package/next-editor-engine.md) ^0.0.2

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.0.6 (latest) — 2023-06-17
- 0.0.5 — 2023-06-15
- 0.0.4 — 2023-06-15
- 0.0.3 — 2023-06-14
- 0.0.2 — 2023-02-15
- 0.0.1-beta.3 — 2022-07-04
- 0.0.1-beta.2 — 2022-07-03

## README

# Next editor

This is an editor with more advanced functions extended on the basis of the [next-editor-engine](https://www.npmjs.com/package/next-editor-engine) library


### Basic
+ bold (ctrl + b)
+ italic (ctrl + i)
+ underline (ctrl + u)
+ alignment (left: ctrl + shift + l , center: ctrl + shift + c , right: ctrl + shift + r , justify: ctrl + shift + j)
+ backcolor
+ fontcolor
+ fontsize
+ heading (h1 ctrl+alt+1,h2 ctrl+alt+2,h3 ctrl+alt+3,h4 ctrl+alt+4,h5 ctrl+alt+5,h6 ctrl+alt+6)
+ tasklist (orderedlist (ctrl+shift+7) , unorderedlist (ctrl+shift+8) , tasklist (ctrl+shift+9))
+ code (ctrl + e)
+ link (ctrl + k)
+ hr (ctrl + shift + e)
+ strikethrough (ctrl+shift+x)
+ quote (ctrl+shift+u)
+ sub (ctrl+,)
+ sup (ctrl+.)
+ indent (ctrl+])
+ outdent (ctrl+[)
+ undo (ctrl + z)
+ redo (ctrl + y)
+ removeformat (ctrl+\)
+ markdown

### Extensions
+ codeblock
+ table
+ emoji
+ file
+ label
+ lockedtext
+ mindmap
+ math
+ search
+ video
+ image
+ toc
### Multi-Mode
+ Editor (Normal full mode)
+ MiniEditor (Mini mode, simple writing of comments, Q&A, etc.)
+ LineEditor (Line mode, suitable for text comments, emoticon comments, picture comments)
+ MobileEditor (Mobile mode, suitable for simple writing on mobile phone h5)



### Usage

```javascript
import React from "react";
import { Editor, MiniEditor, LineEditor, MobileEditor } from "next-editor";
import "next-editor/lib/index.css";

class NextEditor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            content: ""
        };
    }

    onEditorChange = content => {
        this.setState({
            content
        })
        const { onChange } = this.props
        if(onChange){
            onChange(content)
        }
    }

    render(){
        const { content } = this.state
        
        const editorProps = {
            lang: "en",
            defaultValue: content,
            image: {
                uploadAction: "/api/image-upload"
            },
            file: {
                uploadAction: "/api/file-upload"
            },
            header: (<span>Header</span>),
            onBeforeRenderImage: (url) => {
                return url;
            },
            lockedtext: {
                action: "/api/request"
            },
        };

        return (
            <Editor 
                value={content}
                defaultValue={this.props.defaultValue}
                onLoad={this.props.onLoad}     
                onChange={this.onEditorChange}
                onSave={this.props.onSave}
                {...editorProps}
            />
        )
    }
}
export default NextEditor
```

---
_Source: https://npm.io/package/next-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._