基于Raect和antd的富文本编辑器braft-editor的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/*
* @Autor: Clairoll
* @Date: 2020-08-25 15:17:35
* @LastEditTime: 2020-08-28 15:55:24
* @Email: 1755033445@qq.com
* @description: 富文本编辑器
*/
import React, { useState } from "react";
import { Upload, message, Icon } from "antd";
import BraftEditor from "braft-editor";
import { ContentUtils } from "braft-utils";
import { EditControl } from "./constant";

import "braft-editor/dist/index.css";
import "./index.less";

const RichTexts = (props) => {
const [editorState, setEditorState] = useState(
BraftEditor.createEditorState(null)
);

//图片上传回调
const uploadImageChange = (info, editorState) => {
if (info.file.status === "done") {
// 富文本图片上传成功,将图片地址加入富文本内容
let data = ContentUtils.insertMedias(editorState, [
{ type: "IMAGE", url: info.file.response.url },
]);
setEditorState(data);
// 回调给父组件
props.getValue(data.toHTML());
} else if (info.file.status === "error") {
message.error("图片上传失败");
}
};

//文件上传回调
const uploadFileChange = (info, editorState) => {
if (info.file.status === "done") {
// 富文本文件上传成功,将图片地址加入富文本内容
let data = ContentUtils.insertHTML(
editorState,
`<a target="_blank" href="${info.file.response.data.url}">${info.file.response.data.file_name}</a>`
);

setEditorState(data);
// 回调给父组件
props.getValue(data.toHTML());
} else if (info.file.status === "error") {
message.error("文件上传失败");
}
};
// 自定义插件
const extendControls = [
// 图片上传插件
{
key: "antd-uploader",
type: "component",
component: (
<Upload
action="/api/site/markdown_image"
accept="image/*"
onChange={(info) => uploadImageChange(info, editorState)}
showUploadList={false}
>
{/* 这里的按钮最好加上type="button",以避免在表单容器中触发表单提交,用Antd的Button组件则无需如此 */}
<button
type="button"
className="control-item button upload-button"
data-title="插入图片"
>
<Icon type="picture" />
</button>
</Upload>
),
},
// 文件上传插件
{
key: "antd-directory",
type: "component",
component: (
<Upload
action="/api/site/annex"
onChange={(info) => uploadFileChange(info, editorState)}
name="0"
showUploadList={false}
>
{/* 这里的按钮最好加上type="button",以避免在表单容器中触发表单提交,用Antd的Button组件则无需如此 */}
<button
type="button"
className="control-item button upload-button"
data-title="上传文件"
>
<Icon type="folder-add" />
</button>
</Upload>
),
},
];
return (
<div>
<BraftEditor
value={editorState}
controls={EditControl}
onChange={(editorState) => {
setEditorState(editorState);
props.getValue(editorState.toHTML());
} }
extendControls={extendControls}
/>
</div>
);
};
export default RichTexts;

上次更新 2021-01-28