【react】braft-editor富文本编辑器 这可能是我用过适配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>

/*

 * descripts:

ps:

如果是上传视频的话目前braft-editor这个版本只支持mp4,且编码是H264，

因为chrome浏览器和一些手机浏览器对video只识别这个编码格式的

上传时候先要对视频格式进行转换

视频格式转换的工具有：

mac推荐

Adapter：https://macroplant.com/adapter

windows推荐

qq影音：https://player.qq.com/

格式化工厂：http://www.pcgeshi.com/

 * */

效果

 

 后台服上传服务出了点问题

暂时无法正确回显

 ok

参考链接
https://braft.margox.cn/demos/antd-form
https://blog.csdn.net/zuggs_/article/details/80747438
https://github.com/margox/braft-editor
https://github.com/margox/braft-extensions

https://www.jianshu.com/p/acb0fc96b259 （jianshu）