0.0.2-beta.1 • Published 2 years ago
editor-engine v0.0.2-beta.1
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
0.0.2-beta.1
2 years ago
0.0.1
2 years ago