react use simditor

1、install simditor

2、import simditor && scss

import $ from "jquery"
import Simditor from "Simditor";
import "Simditor/styles/Simditor.scss"

const toolbar = ['title','bold','italic','underline','striketthrough','fontScale','color','|','ol','ul','hr',"|","link",'table'];
class RichEditor extends React.Component {
    constructor(props){
    super(props);
    }
    componentDidMount() {
    this.loadEditor();
    }
    loadEditor() {
    this.textarea = this.refs['textarea'];
    this.editor = new Simditor({
        textarea: $(this.textarea),
        placeholder: this.props.placeholder,
        toolbar: toolbar,
        params: {}
        this.bindEditorEvent();
        this.setValue(this.props.value);
        if (this.props.focus) {
            const first = this.editor.body.find('p,li,pre,h1~h4'...).first();
            this.editor.focus();
            this.editor.selection.setRangeAtStartOf(first);
        }
    })
    }
    
    bindEditorEvent() {
    this.editor.on('valuechanged',()=>{
    this.props.onValueChange(this.editor.getValue())
    })
    }
    setValue(value) {
    this.editor.setValue(value)
    }
    
    render() {
    return (
        <textarea id={this.props.id} ref="textarea">
    )
    }
}