SURLIYA
SURLIYA

日常总结 -- React中富文本编辑器Simditor

参考1: https://blog.csdn.net/lcg_18284090173/article/details/88723364

官网: https://simditor.tower.im/docs/doc-usage.html

 

安装:  1. simditor 编辑器本身所需依赖; 2. node-sass 和 sass-loader 使React能够支持 .sass文件

命令: yarn add simditor node-sass sass-loader 或 npm install simditor node-sass sass-loader

 

效果图: 

日常总结 -- React中富文本编辑器Simditor_第1张图片

js代码部分: 

import React, {Component} from 'react'
import {connect} from "dva"
import {Button} from 'antd'
import styles from './index.less'

import Simditor from 'simditor'
import 'simditor/styles/simditor.scss'

let editor;

class Index2 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            content: '',
        }
    }

    componentDidMount() {
        this.richEditor()
    }

    // 受this.props的其它变量影响时
    // componentWillReceiveProps(nextProps) {
    //     if (nextProps.content !== this.props.content) {
    //         this.richEditor()
    //     }
    // }

    // 受this.state的其它变量影响时
    // componentDidUpdate() {
    // 不做this.setState()操作
    //     this.richEditor()
    // }

    richEditor() {
        let {content} = this.state
        let element = this.refs.editor;
        if (element) {
            editor = new Simditor({
                textarea: element,
                toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', 'ol', 'ul', 'blockquote', 'code', 'table', 'link', 'image', 'indent', 'outdent', 'alignment', 'hr']
            });
            editor.setValue(content)
        }
    }

    handleCancel() {
        let {content} = this.state
        editor.setValue(content)
    }

    handleOk() {
        let content = editor ? editor.getValue() : ''
        this.setState(content);
    }

    render() {
        let {content} = this.state
        return (