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 "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