react 内置富文本编辑器

旧城等待， 2021-07-24 23:01 513阅读 0赞

1、下载
    	cnpm install braft-editor --save
    	
    2、引入
    
    	引入编辑器组件
    	import BraftEditor from 'braft-editor'
    	引入编辑器样式
    	import 'braft-editor/dist/index.css'
    
    3、使用
        <BraftEditor
            value={初始值xx}
           	onChange={改变内容回调}
           	onSave={保存时回调}
        />
    
    4、设置初始值
    	var xx=BraftEditor.createEditorState(...)
    
    5、监听状态改变
    	在onChange回调中,第一个参数为富文本对象,内部包含了变化内容
    	
    		回调(editorState)
    		{
      			Hook或setState设置xx:
    			xx=editorState
    		}
    		
    6、读取富文本内容
    	xx.toHTML()

代码示例:

import React,{ useState,useEffect} from 'react'
    import { Form,Card,Input,Button, message,Upload,uploadButton} from 'antd'
    import { createApi,getOneById,modifyOne} from '../../../utils/auth'
    // 引入编辑器组件
    import BraftEditor from 'braft-editor'
    // 引入编辑器样式
    import 'braft-editor/dist/index.css'
    
    
    function Edit(props) { 
        const { getFieldDecorator}=props.form
        const [name,setName]=useState('');
        const [price,setPrice]=useState(0);
        const [imageUrl,setIamgeUrl]=useState('');
        const [loading,setLoading]=useState(false);
        const [ editorState,setEditorState]=useState(BraftEditor.createEditorState(''))
        // var name='';
        // var price="";
        const uploadButton = (
            <div>
              { loading ? 'loading' : "plus"}
              <div className="ant-upload-text">Upload</div>
            </div>
          );
    
        const  handleChange = info => { 
            if (info.file.status === 'uploading') { 
              setLoading(true);
              return;
            }
            if (info.file.status === 'done') {  //上传成功
                setLoading(false);
                console.log(info);
                setIamgeUrl(info.file.response.info);
                
            }
          };
    
        useEffect(()=>{ 
            if(props.match.params.id)
            { 
                getOneById(props.match.params.id)
                .then(res=>{ 
                    console.log(res);
        
                    setName(res.name);
                    setPrice(res.price);
                    setIamgeUrl(res.coverImg);
                    setEditorState(BraftEditor.createEditorState(res.content));
                })
            }
        },[])
    
        const submit=(e)=>
        { 
        	//读取富文本内容
            console.log(editorState.toHTML());
            e.preventDefault();
            
            console.log(e);
            props.form.validateFieldsAndScroll((err,value)=>{ 
                if(!err)
                { 
                    console.log(value);
                    //修改
                    if(props.match.params.id)
                    { 
                        modifyOne(props.match.params.id,{ ...value,coverImg:imageUrl,content:editorState.toHTML()});
                        props.history.push('/admin/products');
    
                    }else{ 
                    //添加数据
                        createApi({ ...value,coverImg:imageUrl,content:editorState.toHTML()}).then(res=>{ 
                            console.log(res);
                            props.history.push('/admin/products');
                        })
                    }
    
                }else{ 
                    message.error('请输入正确的内容');
                }
            })
        }
        //富文本
        const handleEditorChange=(editorState) => { 
            // console.log(editorState);
            setEditorState(editorState)
    
        }
        return (
          <Card title='商品编辑'>
              <Form onSubmit={ e=>submit(e)}>
                  <Form.Item label='名字'>
                      { 
                          getFieldDecorator('name',{ 
                              initialValue: name,
                              rules:[{ 
                                  required:true,
                                  message:'请输入商品名'
                              }]
                          })(<Input placeholder='请输入商品名称'></Input>)
    
                      }
                   </Form.Item>
                   <Form.Item label='价格'>
                      { 
                          getFieldDecorator('price',{ 
                            initialValue: price,
                              rules:[{ 
                                  required:true,
                                  message:'请输入商品价格'
                              }]
                          })(<Input placeholder='请输入商品价格' ></Input>)
    
                      }
                   </Form.Item>
                   <Form.Item label='主图'>
                    <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={ false}
                            action="http://localhost:3009/api/v1/common/file_upload"
                            onChange={ (info)=>{ handleChange(info)}}
                        >
                            { imageUrl ? <img src={ "http://localhost:3009"+imageUrl} alt="avatar" style={ {  width: '100%' }} /> : uploadButton}
                    </Upload>
                   </Form.Item>
    
                    { /* 富文本编辑器 */}
                   <Form.Item label='详情'> 
                   <BraftEditor
    
                    value={ editorState}
    
                    onChange={ (e)=>{ handleEditorChange(e)}}
    
                    />
    
                   </Form.Item>
    
                  <Form.Item><Button htmlType='submit'  type='primary'>保存</Button></Form.Item>
              </Form>
          </Card>
        )
    }
    
    export default Form.create({ name:'productEdit'})(Edit)