富文本编辑器braft-editor的使用

在写react时需要用到富文本编辑器，找了很多后最后选择了braft-editor富文本编辑器

• 美观易用的react富文本编辑器
• 可结合antd使用
• 本质是封装的draft-js
• 提供多媒体的功能（图片、音频、视频）

这里我只介绍常见的一些功能和问题，详情请参考官网

项目地址：github地址
预览地址：预览地址

基本使用

通过value和onChange对editorState组件进行双向绑定，注意value的值的类型必须是editorState对象(这一点类似于Ant Design中的日期选择器组件，它使用moment对象作为数据格式)

import BraftEditor from 'braft-editor'

...

state = {
	editorState: BraftEditor.createEditorState(null)
}

...
handleChange = (editorState) => {
	this.setState({ editorState })
}

...
 <BraftEditor
	value={this.state.editorState}
	onChange={this.handleChange}
 />

判断富文本编辑的内容是否为空

this.state.editorState.isEmpty()

清空富文本编辑器的内容

this.setState({
      editorState: ContentUtils.clear(this.state.editorState)
  })
}

我刚开始的时候直接用editorState:BraftEditor.createEditorState(null)来清空富文本编辑器的内容，但是清空后发现光标跳动，最后用了上面clear方法清空才解决问题。

多媒体上传

1. 获取上传的文件（param.file）
2. 上传到服务器（这里可用任何一个ajax作为通信工具，我使用的是fetch）
3. 获取上传结果，根据结果调用param的方法

 myUploadFn = async (param) => {
        const formData = new FormData();
        formData.append('file', param.file);
        const res = await fetch(`${process.env.REACT_APP_BASE_URL}/upload`, {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${isAuthenticated()}`,
            },
            body: formData
        }).then(response => response.json())

        if (res.status === 0) {
            param.success(res.data)   //success需要一个有url属性的对象{url:'...'}
        } else {
            param.error({
                msg: '上传错误'
            })
        }
    }

定制键盘命令

BraftEditor组件其实是封装的DraftJS，BraftEditor组件没有提供键盘的回车事件，我们可以用DraftJS的属性去做键盘事件

...
//定制键盘命令
 handleKeyCommand = (command) => {
     //如果是回车命名就处理
     if (command === 'split-block') {
         //回车事件的处理函数
         this.test()
         return 'handled';
     }
     return 'not-handled';
 }
 
 <BraftEditor
 	//直接传给DraftJS的Editor组件的属性
	 draftProps={{
         handleKeyCommand: this.handleKeyCommand
     }}
 />

当富文本编辑器按下键盘命令时，会触发handleKeyCommand，将此时触发的命令作为参数传递到处理函数中。
回车命令、退格命令、保存命令（ctrl+s）分别对应split-block、backspace、braft-save。当处理函数handleKeyCommand返回’handled’，则认为该命令已处理。如果它返回’not-handled’，执行默认命令