react项目中集成 braft-editor富文本编辑

1.首先安装编辑器

cnpm i braft-editor --save

2.富文本相关全部代码

import React from 'react'
import {
    Form, Select, InputNumber, Switch, Radio,
    Slider, Button, Upload, Icon, Rate, Checkbox,
    Row, Col, Input, DatePicker, Modal, Card, Spin, message
} from 'antd';
import './yunyingissue.scss'
import { postfn, getfn, Normal } from '../../../../server'
import moment from 'moment';
import axios from 'axios'
import Regex from 'regex'
// 富文本
import BraftEditor, { EditorState } from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
// 引入七牛
import * as qiniu from 'qiniu-js';
// 日期选择设置为中文
import { LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;





class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            // 富文本
            // 创建一个空的editorState作为初始值
            editorState: EditorState.createFrom(''),
            htmlDom: "",
            token: "",
            urlKey: '',//七牛返回来的key
            qiniuBaseUrl: '',//区别正式和测试环境
        }
        // 富文本相关
        this.upImgs = this.upImgs.bind(this);
    }
   
    // 富文本
    submitContent = async () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML();
        // 过滤p标签
        // htmlContent =htmlContent.replace(/<\/?(p)[^>]*>/gi, '');
        // replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
        this.setState({
            htmlDom: htmlContent
        }, () => {
            console.log(this.state.htmlDom);//存上了
        });
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState }, () => {
            const html2 = this.state.editorState.toHTML();
            // 过滤p标签
            //  html2 =html2.replace(/<\/?(p)[^>]*>/gi, '');
            this.setState({
                htmlDom: html2
            }, () => {
                // console.log(this.state.htmlDom);//存上了
                //   this.props.onValueChange(this.state.htmlDom);
            });
        });

    }
    upImgs(param) {
        const filesimg = param.file
        const fileMaxSize = 500000;
        if (!/image\/\w+/.test(filesimg.type)) {
            alert('选择的文件不是图片');
            return false;
        }
        if (filesimg.size <= fileMaxSize) {
            this.uploadImg(filesimg, param);
        } else {
            alert("文件过大");
        }
    }
    uploadImg(imgSource, param) {
        // console.log(this.state.qiniutoken)
        const uptoken = this.state.token;
        const file = imgSource;
        const key = null;
        const config = {
            useCdnDomain: false,
            region: null,
            uphost: "up.qiniup.com/"
        }
        const putExtra = {
            fname: imgSource.name,  //文件原文件名
            params: {}, //用来放置自定义变量
            mimeType: ["image/png", "image/jpeg", "image/jpg"]
        }
        const observable = qiniu.upload(file, key, uptoken, putExtra, config);
        observable.subscribe({
            next: (res) => {
                //
            },
            error: (err) => {
                // _mutil.errorTips(err);
            },
            complete: (res) => {
                let imgsurl = this.state.qiniuBaseUrl + res.key
                console.log(imgsurl)
                const successFn = (imgsurl) => {
                    param.success({
                        url: imgsurl
                    })
                };
                successFn(imgsurl);
            }
        })
    }

    textarraen = (e) => {
        console.log(e.target.value)
    }
    
    // jsx部分
    render() {
        // 上传商品主图
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            

                
                
Upload
            
        );
        const data = {
            token: this.state.token,
            // key:''
        }

        // 富文本
        const { editorState } = this.state;
        const myUploadFn = (param) => {
            const filesimg = param.file
            const fileMaxSize = 500000;
            if (!/image\/\w+/.test(filesimg.type)) {
                alert('选择的文件不是图片');
                return false;
            }
            if (filesimg.size <= fileMaxSize) {
                this.uploadImg(filesimg, param);
            } else {
                alert("文件过大");
            }
        }
        // 表单组件
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 3 },
            wrapperCol: { span: 6 },
        };
        return (
            // 商家后台
            
                

                  
                    {/* 图文详情 */}
                    
                        
图文详情
                    
                    
                        {
                            getFieldDecorator('rich', {

                            })(
                                

                                    
                                
                            )
                        }
                    
                
            
        );
    }
    componentDidMount() {
        this.getToken() //获取七牛token
        this.getUrl()//获取url
    }
    getUrl() {
        var qiniuBaseUr = ''
        Normal('/baseurl.json').then(res => {
            console.log('res:', res)
            qiniuBaseUr = res.data.qiniuBaseUr
            this.setState({
                qiniuBaseUrl: qiniuBaseUr
            })
        })
    }
    // 获取token
    getToken() {
        getfn('api/qiniu/uptoken').then(res => {
            let qiniuData = res.data.data
            if (res.data.success === true) {
                this.setState({
                    token: qiniuData.accessToken
                })
            }
        })
    }
}

const index = Form.create({ name: 'validate_other' })(Demo);
export default index;