React 富文本编辑 braft-editor

推荐一种react-富文本编辑器,braft-editor

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;
复制代码

 

posted @   唐宋元明清2188  阅读(1717)  评论(1编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示
剑桥
16:15发布
剑桥
16:15发布
7°
西南风
3级
空气质量
相对湿度
66%
今天
2°/10°
周三
2°/8°
周四
中雨
2°/7°