日常总结 -- React中富文本编辑器Simditor_simditor react中使用-优快云博客

本文介绍如何在React项目中集成Simditor富文本编辑器，包括安装必要依赖、配置样式及实现基本功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考1: https://blog.youkuaiyun.com/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

效果图:

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 (
            <div className={styles.body}>
                <div className={styles.btn}>
                    <Button type="primary" onClick={() => this.handleOk()}>保存</Button>
                    <Button onClick={() => this.handleCancel()}>取消</Button>
                </div>
                <textarea ref="editor" placeholder="请输入内容" autoFocus/>
            </div>
        )
    }
}

.less代码部分


      :global {
        .simditor {
          height: calc(~"100% - 90px");
          margin: 0 20px 20px 20px;

          .simditor-toolbar {
            width: 100%;
          }
          .simditor-toolbar > ul > li > .toolbar-item {
            width: 40px;
          }

          .simditor-wrapper {
            height: 100%;
            .simditor-body {
              height: calc(100% - 40px);
              overflow: auto;
            }
          }
        }
      }