braft-editor的github：https://github.com/margox/braft-editor
braft-editor的文档：https://www.yuque.com/braft-editor/be/lzwpnr
braft官网：https://braft.margox.cn/
在项目中引用：
# 使用npm安装
npm install braft-editor --save
# 使用yarn安装
yarn add braft-editor
添加引用，然后直接添加组件
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
1 <span className="form-richText-box">
2 <BraftEditor
3 value={editorValue}
4 placeholder={placeholder}></BraftEditor>
5 </span>
value值、placeholder水印等文本属性都是通用的。
详细的属性，见 文档属性列表
文本的更新
组件渲染时，将html数据转换为富文本支持的对象数据。
var editorValue = BraftEditor.createEditorState(value);
数据变更保存时，将富文本的对象数据转换为Html数据。
const htmlContent = editorValue.toHTML();
1 import React, { Component } from 'react';
2 import './style.less';
3 import BraftEditor from 'braft-editor';
4 import 'braft-editor/dist/index.css';
5
6 interface PropsData {
7 label: string;
8 placeholder: string;
9 value?: string;
10 inputValueChanged: (value: any) => void;
11 }
12 interface StateData {}
13
14 class InputRichTextControl extends Component<PropsData, StateData> {
15 constructor(props) {
16 super(props);
17 this.state = {
18 isInputError: false,
19 };
20 }
21 handleEditorChange = (editorValue) => {
22 const htmlContent = editorValue.toHTML();
23 this.props.inputValueChanged(htmlContent);
24 };
25 render() {
26 const { label, placeholder, value } = this.props;
27 var editorValue = BraftEditor.createEditorState(value);
28 return (
29 <div id="form-richText-group">
30 <div className="input-lable">{label}</div>
31 <BraftEditor
32 className="form-richText-large"
33 value={editorValue}
34 onChange={this.handleEditorChange}
35 placeholder={placeholder}></BraftEditor>
36 </div>
37 );
38 }
39 }
富文本编辑器的控件列表显示调整
比如隐藏多媒体和全屏按钮，怎么操作？
直接定义controls并替换
1 import React, { Component } from 'react';
2 import './style.less';
3 import BraftEditor from 'braft-editor';
4 import 'braft-editor/dist/index.css';
5
6 interface PropsData {
7 label: string;
8 placeholder: string;
9 value?: string;
10 inputValueChanged: (value: any) => void;
11 }
12 interface StateData {}
13
14 class InputRichTextControl extends Component<PropsData, StateData> {
15 constructor(props) {
16 super(props);
17 this.state = { };
18 }
19 render() {
20 const { label, placeholder, value } = this.props;
21 var editorValue = BraftEditor.createEditorState(value);
22
23 const controls:any[] == [
24 'undo', 'redo', 'separator',
25 'font-size', 'line-height', 'letter-spacing', 'separator',
26 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
27 'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
28 'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
29 'link', 'separator', 'hr', 'separator',
30 // 'media', 'fullscreen',
31 'separator','clear'
32 ]
33 return (
34 <div id="form-richText-group">
35 <div className="input-lable">{label}</div>
36 <BraftEditor
37 className="form-richText-large"
38 value={editorValue}
39 placeholder={placeholder}
40 controls={controls}></BraftEditor>
41 </div>
42 );
43 }
44 }
45 export default InputRichTextControl;
如上已经把多媒体禁用，所以是无法粘贴图片的
另，关于控件列表，支持原有控件类型BuiltInControlType（不修改标题和内容，只控制隐藏显示）、ControlType对象（可以修改标题和内容）、ExtendControlType
它有三个列表属性可以设置：
controls
excludeControls
extendControls
所以要隐藏控件，还可以使用excludeControls来排除控件。
修改如下：
1 import React, { Component } from 'react';
2 import './style.less';
3 import BraftEditor from 'braft-editor';
4 import 'braft-editor/dist/index.css';
5
6 interface PropsData {
7 label: string;
8 placeholder: string;
9 value?: string;
10 inputValueChanged: (value: any) => void;
11 }
12 interface StateData {}
13
14 class InputRichTextControl extends Component<PropsData, StateData> {
15 constructor(props) {
16 super(props);
17 this.state = { };
18 }
19 render() {
20 const { label, placeholder, value } = this.props;
21 var editorValue = BraftEditor.createEditorState(value);
22
23 const excludeControls: any[] = [24 'fullscreen',
25 ];
26 return (
27 <div id="form-richText-group">
28 <div className="input-lable">{label}</div>
29 <BraftEditor
30 className="form-richText-large"
31 value={editorValue}
32 placeholder={placeholder}
33 excludeControls={excludeControls}></BraftEditor>
34 </div>
35 );
36 }
37 }
38 export default InputRichTextControl;
