React + BraftEditor 实现富文本编辑

Braft Editor 是一个基于 ReactDraft-js 开发的富文本编辑器,提供了丰富的基础功能,如基本文本格式化、列表、链接、图片上传、视频插入等,并且还支持扩展。

  1. 首先,确保你已经在项目中安装了 Braft Editor 和它的依赖项,如果没有,可以运行以下命令进行安装:

    npm install braft-editor --save
    
  2. 实现代码如下

    备注:可以配置table的option,也可以配置工具栏

    import BraftEditor from 'braft-editor';
    import 'braft-editor/dist/index.css';
    import TableEditor from 'braft-extensions/dist/table';
    import 'braft-extensions/dist/table.css';const options = {defaultColumns: 2, // 默认列数defaultRows: 2, // 默认行数withDropdown: false, // 插入表格前是否弹出下拉菜单columnResizable: true, // 是否允许拖动调整列宽,默认false
    };
    // 启用表格扩展
    BraftEditor.use(TableEditor(options));const Editor = ({ onSuccess }, ref) => {const [editorState, setEditorState] = useState(BraftEditor.createEditorState(null));const handleChange = (newEditorState: any) => {setEditorState(newEditorState);};return (<BraftEditorvalue={editorState}onChange={handleChange}controls={['blockquote','bold','code','clear','emoji','font-family','font-size','fullscreen','headings','italic','letter-spacing','line-height','link','list-ol','list-ul','redo','remove-styles','separator','strike-through','text-align','text-color','text-indent','underline','undo','table', //可以自定义显示工具栏内容]}/>);
    };export default Editor;

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/166883.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NPU、CPU、GPU算力及算力计算方式

NVIDIA在9月20日发布的NVIDIA DRIVE Thor 新一代集中式车载计算平台&#xff0c;可在单个安全、可靠的系统上运行高级驾驶员辅助应用和车载信息娱乐应用。提供 2000 万亿次浮点运算性能&#xff08;2000 万亿次8位浮点运算&#xff09;。NVIDIA当代产品是Orin&#xff0c;算力是…

堪比数据恢复大师软件推荐,恢复数据很简单!

“作为一个经常丢失数据的电脑用户来说&#xff0c;我觉得我非常需要一些简单有效的数据恢复方法。大家有什么比较靠谱的软件推荐吗&#xff1f;非常感谢&#xff01;” 在数字化时代&#xff0c;数据的存储是比较重要的。很多用户都会选择将重要的文件保存在电脑上。如果数据丢…

第二证券:北证50指数一枝独秀 短剧游戏概念股持续活跃

周三&#xff0c;沪深两市三大指数颤动调整&#xff0c;北证50指数“鹤立鸡群”&#xff0c;大涨超8%。到收盘&#xff0c;上证综指报3043.61点&#xff0c;跌0.79%&#xff1b;深证成指报9855.66点&#xff0c;跌1.41%&#xff1b;创业板指报1950.01点&#xff0c;跌1.73%。沪…

uni-app,nvue中text标签文本超出宽度不换行问题解决

复现&#xff1a;思路&#xff1a; 将text标签换为rich-text&#xff0c;并给rich-text增加换行的样式class类名解决&#xff1a;

【Vue】浏览器安装vue插件

首先看一下安装之后的效果&#xff0c;再考虑一下要不要安装 安装完之后&#xff0c;打开浏览器控制台&#xff08;ctrl shift j) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</t…

HOOPS Web平台助力开发3D应用,实现超大规模3D web轻量化渲染与数据格式转换!

一、包含的软件开发工具包 HOOPS Web平台帮助开发人员构建基于Web的工程应用程序&#xff0c;提供高级3D Web可视化、准确快速的CAD数据访问和3D数据发布。 HOOPS Web平台包括三个集成软件开发工具包 (SDK)&#xff1a; &#xff08;1&#xff09;Web端3D可视化引擎 HOOPSCom…

mysql查询表的字段,字段名以及注释sql语句

sql语句如下&#xff1a; selecta.ordinal_position 序号,a.COLUMN_name 字段名,a.COLUMN_type 字段类型,(case a.is_nullable when NO then 是 else 否 end) 是否非空,(case a.column_key when PRI then 是 else 否 end) 是否主键,a.COLumn_comment 注释 frominformation_sch…

【C/C++】素数专题

素数专题 1.判断素数模板2.求范围内的素数&#xff08;101-200&#xff09;3.判断素数与分解 1.判断素数模板 #include<stdio.h> #include<math.h>int prism(int n){if(n1) return 0;for(int i2;i<sqrt(n);i){if(n%i0) return 0;}return 1; }int main() {int n…

Doris中的物化视图(十八)

物化视图就是包含了查询结果的数据库对象&#xff0c;可能是对远程数据的本地 copy&#xff0c;也可能是一个表或多表 join 后结果的行或列的子集&#xff0c;也可能是聚合后的结果。说白了&#xff0c;就是预先存储查询结果的一种数据库对象。 在 Doris 中的物化视图&#xf…

【深度学习】P1 数据缺失值预处理

数据缺失值预处理 创建数据集展示数据集缺失值处理 创建数据集 首先创建一个人工数据集&#xff0c;作为下文对数据缺失值预处理的案例&#xff0c; import osos.makedirs(os.path.join(.., data), exist_okTrue) data_file os.path.join(.., data, house_tiny.csv) with op…

SIP协议在语音通信的应用方式

在企业语音通信的过程中&#xff0c;SIP协议支持的网络通信技术通过网络为用户提供了无数的通信便利&#xff0c;已成为企业不可或缺的重要通信技术。由于SIP协议是语音通信帮助企业实现这些优势的原因&#xff0c;因此了解支持这些呼叫的SIP协议的上下文至关重要。 什么是SIP?…

Duplicate 模型中的 ROLLUP(十六)

因为 Duplicate 模型没有聚合的语意。所以该模型中的 ROLLUP&#xff0c;已经失去了“上卷”这一层含义。而仅仅是作为调整列顺序&#xff0c;以命中前缀索引的作用。下面详细介绍前缀索引&#xff0c;以及如何使用 ROLLUP 改变前缀索引&#xff0c;以获得更好的查询效率。 前…

微服务保护 Sentinel

1.初识Sentinel 文章目录 1.初识Sentinel1.1.雪崩问题及解决方案1.1.1.雪崩问题1.1.2.超时处理1.1.3.仓壁模式1.1.4.断路器1.1.5.限流1.1.6.总结 1.2.服务保护技术对比1.3.Sentinel介绍和安装1.3.1.初识Sentinel1.3.2.安装Sentinel 1.4.微服务整合Sentinel 2.流量控制2.1.簇点链…

MacM1(ARM)安装Protocol Buffers

MacM1(ARM)安装Protocol Buffers 本文目录 MacM1(ARM)安装Protocol Buffers3.21之前版本安装使用configure3.22之后版本安装使用cmake使用编译后的版本 protobuf下载地址&#xff1a;https://github.com/protocolbuffers/protobuf/releases 在运行./autogen.sh或./configure命…

curl添加https服务

CURL支持的通信协议有FTP、FTPS、HTTP、HTTPS、TFTP、SFTP、Gopher、SCP、Telnet、DICT、FILE、LDAP、LDAPS、IMAP、POP3、SMTP和RTSP。 首选删除系统自带的openssl&#xff0c;因为他只有可执行程序和库&#xff0c;没有头文件。 sudo apt-get remove openssl openssl官网&am…

CentOS7磁盘挂载

1 引言 本文主要讲述CentOS7磁盘挂载相关知识点和操作。 2 磁盘挂载 步骤1&#xff1a; 查看机器所挂硬盘及分区情况 fdisk -l查询结果&#xff1a; 由上图可以看到该结果包含&#xff1a;硬盘名称、硬盘大小等信息。 属性解释说明Disk /dev/vda硬盘名称53.7G磁盘大…

6S精益管理必备装备降低物料损耗

在工厂生产环境中&#xff0c;设备管理是确保生产效率和质量的关键因素之一。6S管理方法是一种源自日本的管理体系&#xff0c;旨在通过整顿、整理、清扫、清洁、素养、遵守六个步骤&#xff0c;实现工作环境的优化和管理的高效。 仓库管理中&#xff0c;库存损耗一直是企业面…

分布式篇---第四篇

系列文章目录 文章目录 系列文章目录前言一、分布式ID生成有几种方案?二、幂等解决方法有哪些?三、常见负载均衡算法有哪些?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给…

多回路交流三相单相电压电流电量监测开口式互感器适用多种环境用电能耗监控

1 产品概述 多回路交流无线电压电流传感器/电量采集监测仪搭配多路开口式互感器&#xff0c;可以监控采集三相电压、电流、功率和电量等信息&#xff0c;可用于能耗采集监控。支持RS485和4G网络接口&#xff0c;数据可以对接客户指定的第三方云平台。本产品可实现单相/三相用电…

Spring事务的实现方式和实现原理;事务声明的方式,Spring的事务传播行为,spring事务的实现原理

Spring事务的实现方式和实现原理 Spring事务的本质其实就是数据库对事务的支持&#xff0c;没有数据库的事务支持&#xff0c;spring是无法提供事务功能的。真正的数据库层的事务提交和回滚是通过binlog或者redo log实现的。 什么是事务 数据库事务是指作为单个逻辑工作单元执…