BRAFT EDITOR富文本编辑器

https://braft.margox.cn/demos/basic     官方文档

import React from 'react'
import Uploading from '../Upload/index'
// import FuWenBen from '../fuwenben/index'
import { Form, Input, Button, AutoComplete, Radio, Card, Dropdown, Menu, Icon, message } from 'antd';
import Axios from 'axios'
import './index.scss'
import { Link } from 'react-router-dom'
import { rule } from 'postcss';
import { inject, observer } from 'mobx-react'
// 引入编辑器以及EditorState子模块
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import { getArticleContentById } from '@/api/content'
import { router } from 'sw-toolbox';
const { TextArea } = Input;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
let timer;
@inject('editStore') @observer
class EditForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            searchParams: {},
            editorState: '', // 设置编辑器初始内容
            outputHTML: '<p></p>',
            imageUrl: '',
            biaoqian: '',
            isShow: false,
            id:''
        }
    }
    changeImg = (url) => {
        this.setState({
            imageUrl: url,
            isShow: false
        })
    }
    handleSubmit = (e) => {
        e.preventDefault();
        const { editorState } = this.state;
        let submitData = {}
        this.props.form.validateFields((err, values) => {
            if (!this.state.imageUrl.length) {
                this.setState({
                    isShow: true
                })
                return
            }
            if (!err) {
                submitData = {
                    title: values.title,
                    zhaiyao: values.zhaiyao,
                    image: this.state.imageUrl,
                    biaoqian: values.biaoqian,
                    content: values.content.toHTML()// or values.content.toHTML()
                }
            }
        })
        if (this.props.type == 'contentAdd') {
            this.props.newAddArticleContent(submitData)
        } else if (this.props.type == 'contentEdit') {
            this.props.updateArticleContent(submitData)
        }
        clearInterval(timer)
    }
    getContentById = () => {
        let { searchParams } = this.state
        searchParams = {
            id: this.props.id
        }
        getArticleContentById(searchParams).then(
            res => {
                if (res.data.code == 200) {
                    this.props.form.setFieldsValue({
                        title: res.data.data.title,
                        zhaiyao: res.data.data.brief,
                        content: BraftEditor.createEditorState(res.data.data.content)
                    })
                    this.setState({
                        imageUrl: res.data.data.imagePath,
                        biaoqian: String(res.data.data.articleTag),
                        isShow: false
                    })
                    this.props.editStore.editTitle(res.data.data.title)
                }
            }
        ).catch(
            err => {

            }
        )
    }
    // look=()=>{
    //     this.props.editStore.previewArr(this.props.publishCode)
    // }
    componentDidMount() {
        if(this.props.id){
            this.getContentById()
        }
        // timer=setInterval(() => {
        //     let submitData = {}
        //     this.props.form.validateFields((err, values) => {
        //         if (!this.state.imageUrl.length) {
        //             this.setState({
        //                 isShow: true
        //             })
        //             return
        //         }
        //         if (!err) {
        //             submitData = {
        //                 title: values.title,
        //                 zhaiyao: values.zhaiyao,
        //                 image: this.state.imageUrl,
        //                 biaoqian: values.biaoqian,
        //                 content: values.content.toHTML()// or values.content.toHTML()
        //             }
        //         }
        //     })
        //     console.log(submitData)
        //     if (this.props.type == 'contentAdd') {
        //         this.props.newAddArticleContent(submitData)
        //     } else if (this.props.type == 'contentEdit') {
        //         this.props.updateArticleContent(submitData)
        //     }
        // }, 5000)
    }
    componentWillReceiveProps(nextProps){
        this.setState({
            id:nextProps.id
        })
    }
    render() {
        const { setPreviewType } = this.props
        const { getFieldDecorator } = this.props.form;
        const { editorState, outputHTML } = this.state
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <div>
                <Form onSubmit={this.handleSubmit} className='container333'>
                    <FormItem
                        label="请输入主标题:"
                        {...formItemLayout}
                    >
                        {getFieldDecorator('title', {
                            rules: [{
                                required: true, message: '请输入主标题名称',
                            }]
                        })(
                            <Input placeholder="请输入主题" />
                        )}
                    </FormItem>
                    <FormItem
                        label="摘要:"
                        {...formItemLayout}
                    >
                        {getFieldDecorator('zhaiyao', {
                            rules: [{
                                required: true, message: '限制200个字',
                            }],
                        })(
                            <TextArea placeholder="限制200个字" autosize={{ minRows: 5, maxRows: 5 }} />
                        )}
                    </FormItem>
                    <FormItem
                        label="封面图片:"
                        {...formItemLayout}
                    >
                        {/* {getFieldDecorator('image', {
                            rules: [{
                                required: true, message: '请上传封面图片',
                            }]
                        })( */}
                        <div>
                            {this.state.imageUrl ? <Uploading changeImg={this.changeImg} imageUrl={this.state.imageUrl} /> : null}
                            {this.state.imageUrl ? null : <Uploading changeImg={this.changeImg} />}
                        </div>
                        {/* )} */}
                    </FormItem>
                    {this.state.isShow ? <p style={{marginLeft:'25%',marginTop:'-2%',color:'red'}}>请上传封面图片</p> : null}
                    <FormItem
                        label="文章标签:"
                        {...formItemLayout}
                    >
                        {getFieldDecorator('biaoqian', {
                            initialValue: this.state.biaoqian
                        })(
                            <RadioGroup name="radiogroup" >
                                <Radio name='feel' value={'1'} >new</Radio>
                                <Radio name='feel' value={'2'} >hot</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        label="内容编辑器:"
                        {...formItemLayout}
                    >
                        {getFieldDecorator('content', {
                            validateTrigger: 'onBlur',
                            rules: [
                                { required: true },
                                {
                                    validator: (rule, value, callback) => {
                                        if (value.isEmpty()) {
                                            callback('请输入正文内容')
                                        } else {
                                            callback()
                                        }
                                    }
                                }
                            ]
                        })(
                            // <FuWenBen/>
                            <BraftEditor
                                height={0}
                                controls={
                                    [
                                        'undo', 'redo', 'split', 'font-size', 'font-family', 'line-height', 'letter-spacing',
                                        'indent', 'text-color', 'bold', 'italic', 'underline', 'strike-through',
                                        'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'split', 'headings', 'list_ul',
                                        'list_ol', 'blockquote', 'code', 'split', 'link', 'split', 'hr', 'split', 'media', 'clear'
                                    ]
                                }
                                fontFamilies={
                                    [
                                        {
                                            name: '宋体',
                                            family: '"宋体",sans-serif'
                                        }, {
                                            name: '黑体',
                                            family: '"黑体",serif'
                                        }, {
                                            name: '隶书',
                                            family: '隶书'
                                        },
                                        {
                                            name: '微软雅黑',
                                            family: '微软雅黑'
                                        },
                                        {
                                            name: '楷体',
                                            family: '楷体'
                                        },
                                        {
                                            name: 'Impact',
                                            family: 'Impact,Charcoal'
                                        }, {
                                            name: 'Monospace',
                                            family: '"Courier New", Courier, monospace'
                                        }, {
                                            name: 'Tahoma',
                                            family: "tahoma, 'Hiragino Sans GB', sans-serif"
                                        }]
                                }
                                media={{
                                    uploadFn: (info) => {
                                        let formData = new window.FormData()
                                        formData.append('file', info.file, info.file.name)
                                        Axios({
                                            headers: {
                                                'Content-Type': 'multipart/form-data'
                                            },
                                            method: 'post',
                                            data: formData,
                                            url: 'http://192.168.5.14:8081/node/file_upload'
                                        }).then(res => {
                                            if (res.data.code === 200) {
                                                let imgurl = res.data.result[0].photoBig
                                                let imgObj = {
                                                    data: {
                                                        link: 'http://192.168.5.14:8081/' + imgurl
                                                    }
                                                }
                                                info.success({
                                                    url: imgObj.data.link
                                                    // meta: {
                                                    //   id: 'xxx',
                                                    //   title: 'xxx',
                                                    //   alt: 'xxx',
                                                    //   loop: true, // 指定音视频是否循环播放
                                                    //   autoPlay: true, // 指定音视频是否自动播放
                                                    //   controls: true, // 指定音视频是否显示控制栏
                                                    //   poster: 'http://xxx/xx.png', // 指定视频播放器的封面
                                                    // }
                                                })
                                            } else {
                                            }
                                        }, err => {
                                        })
                                    }
                                }}
                            />
                        )}
                    </FormItem>
                    <div className='footer11'>
                        <div className='footer-right'>
                            每5分钟保存一次
                        </div>
                    </div>
                    <div className='footerbox'>
                        <Button type='primary' size='large' htmlType="submit" style={{ marginRight: 10, marginLeft: 10 }} className='save'>保存</Button>
                        <Button type='primary' size='large' onClick={this.look}><Link to={{pathname: '/home/preview',state:{id:this.state.id,type:'article',publishCode:this.props.publishCode}}}>预览</Link></Button>
                    </div>
                </Form>
            </div>
        )
    }
}
const WrappedEditForm = Form.create()(EditForm);
export default WrappedEditForm