参考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;
}
}
}
}