【react】braft-editor富文本編輯器這可能是我用過適配react最好的一款插件

本文轉載自查看原文 2020-11-09 17:24 876 react

braft-editor 是antd 社區精選組件項目下被推薦的一款富文本插件 https://ant.design/docs/react/recommendation-cn

- 美觀易用的react富文本編輯器
- 可結合antd使用
- 本質是封裝的draft-js
- 提供多媒體的功能（圖片、音頻、視頻）主要看中這一點---之前使用wangeditor 圖片可以從本地上傳可是視頻源代碼中是不支持本地上傳的，於是暫時放下（網上有很多改源碼的），嘗試新的插件。
- - 完善的文本內容編輯功能
  - 諸多開放的編輯接口，良好的可擴展性
  - 允許插入圖片、音視頻等多媒體內容
  - 允許自定義多媒體內容的上傳接口
  - 允許設置圖片的左右浮動（即文字繞排功能）
  - 允許設置編輯器可用的顏色列表、字號以及字體
  - 允許自定義需要展示的控制按鈕和展示順序
  - 允許增加額外的自定義按鈕
  - 多語言支持（目前已支持簡體中文、繁體中文和英文）
  - ...更多特性開發中

查看demo示例進一步了解感受 https://braft.margox.cn/demos/basic

老樣子下載引用使用

# yarn安裝
yarn add braft-editor
# npm安裝
npm install braft-editor --save

import BraftEditor from 'braft-editor';//主體
import 'braft-editor/dist/index.css';//樣式
import MaxLength from 'braft-extensions/dist/max-length';//限制字數

const options = {
    defaultValue: 5000, // 指定默認限制數，如不指定則為Infinity(無限)--富文本
  };
BraftEditor.use(MaxLength(options));

this.formRef.current.setFieldsValue({
                        realName: record.realName,
                        title: record.title,
                        auditName: record.auditName,
                        type: record.type,
                        coding: record.coding,
                        details: BraftEditor.createEditorState(record.content),//富文本內容
                        createTime: moment(record.createTime).format('YYYY-MM-DD HH:mm:ss'),
                    })

BraftEditor.createEditorState(record.content) 設置富文本內容

 //由於圖片上傳、視頻上傳項目中都是單獨走的接口，需要一個上傳的方法
    myUploadFn = (param) => {
        console.log('param',param);
        const serverURL =`${window.sessionStorage.baseURL ? JSON.parse(window.sessionStorage.baseURL):""}/fileHandle/upload`//上傳接口地址
        const xhr = new XMLHttpRequest();
        const fd = new FormData();
        if(param.file.type.indexOf("image")!="-1"&&(param.file.size/1024/1024)>9){
            param.error({
                msg: '請上傳小於10M的圖片'
            })
            message.warning("請上傳小於10M的圖片")
        }
        if(param.file.type.indexOf("video")!="-1"){
            if(param.file.type.indexOf("mp4")=="-1"){
                param.error({
                    msg: '請上傳mp4格式的視頻'
                })
                message.warning("請上傳mp4格式的視頻")
                return
            }
            if((param.file.size/1024/1024)>100){
                param.error({
                msg: '請上傳小於100M的視頻'
            })
            message.warning("請上傳小於100M的視頻")
            }
        }
        const successFn = (response) => {
            // 假設服務端直接返回文件上傳后的地址
            // 上傳成功后調用param.success並傳入上傳后的文件地址
            const upLoadObject = JSON.parse(response && response.currentTarget && response.currentTarget.response);
            // console.log("JSON.parse(xhr.responseText).data",JSON.parse(xhr.responseText).data)
            param.success({
                 url:`${window.sessionStorage.baseURL ? JSON.parse(window.sessionStorage.baseURL)+"/fileHandle/video/preview?videoUrl=":""}${JSON.parse(xhr.responseText).data}`,
                meta: {
                    id: upLoadObject && upLoadObject.id,
                    title: upLoadObject && upLoadObject.fileName,
                    alt: upLoadObject && upLoadObject.fileName,
                    loop: false, // 指定音視頻是否循環播放
                    autoPlay: true, // 指定音視頻是否自動播放
                    controls: true, // 指定音視頻是否顯示控制欄
                    poster: '', // 指定視頻播放器的封面
                }
            })
        };

        const progressFn = (event) => {
            // 上傳進度發生變化時調用param.progress
            param.progress(event.loaded / event.total * 100)

        };

        const errorFn = (response) => {
            // 上傳發生錯誤時調用param.error
            param.error({
                msg: 'unable to upload.'
            })
        };

        xhr.upload.addEventListener("progress", progressFn, false);
        xhr.addEventListener("load", successFn, false);
        xhr.addEventListener("error", errorFn, false);
        xhr.addEventListener("abort", errorFn, false);
        fd.append('file', param.file);
        xhr.open('POST', serverURL, true);
        //  xhr.setRequestHeader("X-Auth-Token", User.getToken());//header中token的設置
        xhr.send(fd)

    }
    handleMaxLength = () => {
        message.warning('最多只能輸入5000個字符')
    };

render 部分

<Row>
                                        <Col span={24} style={paddRightCol}>
                                            <Form.Item
                                                name="details"
                                                rules={[
                                                    {
                                                        required: true,
                                                        message: '',
                                                    },
                                                ]}
                                            >
                                                <BraftEditor
                                                    className="my-editor"
                                                    style={{ border: '1px solid #e8e8e8' }}
                                                    placeholder="請輸入正文內容"
                                                    media={{ uploadFn: this.myUploadFn }}
                                                    maxLength={5000}
                                                    onReachMaxLength={this.handleMaxLength}
                                                />
                                            </Form.Item>
                                        </Col>
                                    </Row>