使用braft-editor踩坑记录

一、项目需求：富文本（支持添加图片）
调研了几个editor插件，相比下braft-editor的展示方式看起来简洁友好。 文档也比较清楚，贴合react技术栈。所以最终选择了braft-editor来实现富文本需求。
上传图片开始使用的media属性，能直接粘贴截图，很方便。
后续需求有变动，需要添加额外的上传按钮，可以上传图片和office文档， 发现之前简单的复制粘贴图片的方式满足不了新的需求。故，来继续研究下怎么来自定义上传。
之后发现braft-editor官网中提到可以结合antd组件来做一系列的操作，所以毋庸置疑的选择了和Upload结合使用方式。

踩坑记录：

1. 初始化的时候最好创建一个富文本对象，别用null代替
   editorState: BraftEditor.createEditorState(‘
   ’)
   之前按照官网写的，用的null，在结合antd上传时，遇到了Cannot read property ‘getSelection’ of null的报错。由于之前editorState初始化是null，其创建是在文本改变之后，第一次在未创建editorState对象时，调用上传图片回调，此时，必然也是null，故报错。
2. braft-editor默认会将图片转为base64，不想转，需要自定义图片上传按钮
   extendControls、controls都可以实现自定义按钮。
   3.使用官网例子，创建带antd upload的富文本时，出现错误：没有braft-utils、braft-finder包
   这两个包需要自行安装，官网没提到。

实现主要代码：
import BraftEditor from ‘braft-editor’;
import { ContentUtils } from ‘braft-utils’;

const [url, setUrl] = useState(‘’); //上传文件路径
const [file, setFile] = useState(null); //上传文件
const [editorValue, setEditorValue] = useState(
BraftEditor.createEditorState(‘

’)
); //初始化富文本内容
useEffect(() => {
if (file == null || url == ‘’) return;
handleImageContentChange();
}, [url, file]);

const onEditorStateChange = (editorState) => {
setEditorValue(editorState);
};

判断文件是图片还是其他格式，图片就转成IMAGE，其他文件，转成LINK。
const handleImageContentChange = () => {
if (
file.name.indexOf(‘.jpg’) !== -1 ||
file.name.indexOf(‘.jpeg’) !== -1 ||
file.name.indexOf(‘.png’) !== -1
) {
setEditorValue(
ContentUtils.insertMedias(editorValue, [
{
type: ‘IMAGE’,
url: url,
},
])
);
} else {
setEditorValue(
ContentUtils.insertText(
editorValue,
file.name,
[‘COLOR-00F’, ‘UNDERLINE’],
{
type: ‘LINK’,
mutability: ‘MUTABLE’,
data: {
href: url,
target: ‘_blank’,
},
}
)
);
}
};

const beforeUpload = (file) => {
setFile(null);
const formData = new FormData();
formData.append(‘file’, file);
formData.append(‘token’, token);
uploadFile(formData).then((res) => {
setUrl(res);
setFile(file);
});
return false;
};

const editorProps = {
height: 350,
contentFormat: ‘html’,
media: {
allowPasteImage: true, // 是否允许直接粘贴剪贴板图片到编辑器
image: true, // 开启图片插入功能
},
onChange: onEditorStateChange,
};

const controls = [
‘undo’,
‘redo’,
‘separator’,
‘font-size’,
‘line-height’,
‘letter-spacing’,
‘separator’,
‘text-color’,
‘bold’,
‘italic’,
‘underline’,
‘strike-through’,
‘separator’,
‘superscript’,
‘subscript’,
‘remove-styles’,
‘emoji’,
‘separator’,
‘text-indent’,
‘text-align’,
‘separator’,
‘headings’,
‘list-ul’,
‘list-ol’,
‘blockquote’,
‘code’,
‘media’,
‘separator’,
‘clear’,
];
const extendControlsContent = [
{
key: ‘antd-uploader’,
type: ‘component’,
component: (


上传文件

<div style={{ width: ‘300px’, marginTop: ‘13px’ }}>
(可上传图片、文档格式)


),
},
];

<BraftEditor
controls={controls}
{…editorProps}
extendControls={extendControlsContent}
initialContent={editorValue || ‘’}
value={editorValue}
/>

实现效果：