react-next-editor v0.0.4

React Next editor

This is an editor with more advanced functions extended on the basis of the 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

import React from "react";
import { Editor, MiniEditor, LineEditor, MobileEditor } from "react-next-editor";
import "react-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