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;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)