Rich text editor for Web

Editor engine

This is the core engine library, which has the basic functions required for general editing.

Engine basic functions

• 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

Usage

class Editor extends React.Component{

    state = {}

    constructor(props){
        super(props)
        this.editArea = React.createRef()
    }

    componentDidMount(){
        this.engine = this.renderEditor()
    }

    componentWillUnmount(){
        this.engine && this.engine.destroy()
    }
    
    renderEditor() {
        const engine = Engine.create(this.editArea.current, {})

        engine.on("change", value => {
            console.log(value)
            this.updateState()
        })

        engine.on("select", () => {
            this.updateState()
        })

        return engine
    }
    
    /**
    * Update toolbar state
    */
    updateState(){
        if(!this.engine) return 

        const boldState = {
            className:this.engine.command.queryState('bold') ? "active" : "",
            disabled:function(){
                const tag = this.engine.command.queryState('heading') || 'p'
                return /^h\d$/.test(tag)
            }.call(this)
        }

        this.setState({
            boldState
        })
    }

    /**
    * Execute commands
    */
    onExecute = (event,type) => {
        event.preventDefault()
        if(this.engine){
            this.engine.command.execute(type)
        }
    }
    
    render() {
        const { boldState } = this.state
        return (
            <div>
                <button {...boldState} onClick={event => this.onExecute(event,'bold')}>bold</button>
                <div className="xEditor-engine" ref={this.editArea}></div>
            </div>
        )
    }
}

export default Editor