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 (
       
            <BraftEditor
              value={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;
    
    

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云发布新一代基于AMD处理器的星星海云服务器实例SA5

基础设施的硬实力&#xff0c;愈发成为云厂商的核心竞争力。 11月24日&#xff0c;腾讯云发布了全新一代星星海服务器。基于自研服务器的高密设计与硬件升级&#xff0c;对应云服务器SA5是全球首家搭载第四代AMD EPYC处理器&#xff08;Bergamo&#xff09;的公有云实例&#…

【机器学习】平滑滤波

平滑滤波技术 平滑滤波&#xff0c;顾名思义就是对信号进行处理使之整体显得更加平滑&#xff0c;降低噪声影响&#xff0c;提高信号质量&#xff0c;它常见于数字信号处理和图像处理&#xff0c;一般意义上的数字信号多体现于一维数据&#xff0c;图像信号多体现于二维数据。…

大众博客系统测试报告【改】

一、项目背景 大众博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有四个页面构成&#xff1a;登录页、列表页、详情页以及编辑页&#xff0c;以上模拟实现了最简单的大众博客系统。其结合后端…

DGL在异构图上的GraphConv模块

回顾同构图GraphConv模块 首先回顾一下同构图中实现GraphConv的主要思路&#xff08;以GraphSAGE为例&#xff09;&#xff1a; 在初始化模块首先是获取源节点和目标节点的输入维度&#xff0c;同时获取输出的特征维度。根据SAGE论文提出的三种聚合操作&#xff0c;需要获取所…

Day40力扣打卡

打卡记录 包子凑数&#xff08;裴蜀定理 DP&#xff09; 根据裴蜀定理&#xff0c;存在 c gcd(a, b) 使不定方程ax by c满足条件&#xff0c;如果gcd(a, b) 1即a与b互素的情况下&#xff0c;就会 ax by 1&#xff0c;由于为1可以构造后面的无穷数字&#xff0c;故得到结…

项目实战详细讲解带有条件响应的 SQL 盲注、MFA绕过技术、MFA绕过技术、2FA绕过和技巧、CSRF绕过、如何寻找NFT市场中的XSS漏洞

项目实战详细讲解带有条件响应的 SQL 盲注、MFA绕过技术、MFA绕过技术、2FA绕过和技巧、CSRF绕过、如何寻找NFT市场中的XSS漏洞。 带有条件响应的 SQL 盲注 这篇文章的核心要点如下: 漏洞发现:作者在Portswigger提供的实验室中发现了一个盲SQL注入漏洞。这个漏洞存在于一个应…

【libGDX】Mesh纹理贴图

1 前言 纹理贴图的本质是将图片的纹理坐标与模型的顶点坐标建立一一映射关系。纹理坐标的 x、y 轴正方向分别朝右和朝下&#xff0c;如下。 2 纹理贴图 本节将使用 Mesh、ShaderProgram、Shader 实现纹理贴图&#xff0c;OpenGL ES 的实现见博客 → 纹理贴图。 DesktopLauncher…

Prometheus环境搭建和认识

Prometheus 环境搭建 1.prometheus 简介 Prometheus是基于go语言开发的一套开源的监控、报警和时间序列数据库的组合&#xff0c;是由SoundCloud公司开发的开源监控系统&#xff0c;Prometheus于2016年加入CNCF&#xff08;Cloud Native Computing Foundation,云原生计算基金…

虾皮插件:优化Shopee商家店铺运营的利器

在如今竞争激烈的电商市场中&#xff0c;如何提升Shopee商家店铺的运营效率和销售业绩成为了摆在每个商家面前的一道难题。然而&#xff0c;幸运的是&#xff0c;虾皮插件-知虾的出现为商家们带来了一种全新的解决方案。本文将介绍虾皮插件的用途和优势&#xff0c;并详细介绍其…

【第一部也是唯一一部】3DMAX脚本语言MAXScript 中文帮助

3DMAX我们很多3D设计师和艺术家都在使用这款功能强大的三维软件&#xff0c;但是再强大的工具也不可能包罗万象&#xff0c;无所不能&#xff0c;所以&#xff0c;通常官方努力在功能和性能平衡之间的同时&#xff0c;也提供第三方扩展软件功能的可能—插件开发。 3DMAX插件开发…

Linux的基本指令(3)

16.cal指令 cal命令可以用来显示公历&#xff08;阳历&#xff09;日历。公历是现在国际通用的历法&#xff0c;又称格列历&#xff0c;通称阳历。“阳历”又名“太阳历”&#xff0c;系以地球绕行太阳一周为一年&#xff0c;为西方各国所通用&#xff0c;故又名“西历”。 命…

安防系统智能视频监控中出现画面异常该如何自检?

大家都知道&#xff0c;在当今社会&#xff0c;摄像头无处不在&#xff0c;除了常见的生活与工作场景中&#xff0c;在一些无法人员无法长期驻点场景&#xff0c;如野生动物监测、高空作业监控、高压电缆监控等场景&#xff0c;在这些地方安装摄像头就是为方便日常监控。但是由…

java 反射和注解1-反射详解

反射和注解本就是一家人&#xff0c;注解离不开反射&#xff0c;这里先将反射的写法&#xff0c;本文涉到的注解暂时可以不不用理解 1&#xff0c;创建一个类 public class ReflexUser {public String name;private String namePrivate;protected String nameProtected;Strin…

【自主探索】基于 rrt_exploration 的单个机器人自主探索建图

文章目录 一、rrt_exploration 介绍1、原理2、主要思想3、拟解决的问题4、优缺点 二、安装环境三、安装与运行1、安装2、运行 四、配置自己的机器人1、Robots Network2、Robots frame names in tf3、Robots node and topic names4、Setting up the navigation stack on the rob…

CSS特效018:科技动画,hover后点亮阁楼,拉伸出楼梯

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

Linux时间命令—— 显示时间,日历等

目录 1.date显示时间 1.1 常用的标记列表&#xff1a; 1.2 设定时间&#xff1a; 2.cal显示日历 3.时间戳 1.date显示时间 date 用法&#xff1a;date [OPTION] ... [FORMAT] 1.1 常用的标记列表&#xff1a; %H : 小时 (00..23) %M : 分钟 (00..59) %S : 秒 (00..61…

nginx基础篇学习

一、nginx编译安装 1、前往nginx官网获取安装包 下载安装包 2、解压 3、安装 进入安装包 安装准备&#xff1a;nginx的rewrite module重写模块依赖于pcre、pcre-devel、zlib和zlib-devel库&#xff0c;要先安装这些库 安装&#xff1a; 编译&#xff1a; 启动&#xff…

ErphpdownV16.21插件 安装教程和插件下载

ErphpdownV16.21插件下载_新版本 上传插件并解压 登入后台插件管理启动ErphpdownV16.21插件即可 启动后设置即可使用此版本为学习版插件 功能介绍&#xff1a; Erphpdown会员推广下载专业版 经过完美测试运行于wordpress 3.x-6.x版本。后续会增加更多实用的功能。已针对此插件…

医学图像分割:U_Net 论文阅读

“U-Net: Convolutional Networks for Biomedical Image Segmentation” 是一篇由Olaf Ronneberger, Philipp Fischer, 和 Thomas Brox发表的论文&#xff0c;于2015年在MICCAI的医学图像计算和计算机辅助干预会议上提出。这篇论文介绍了一种新型的卷积神经网络架构——U-Net&a…

3、Qt使用windeploy工具打包可执行文件

新建一个文件夹&#xff0c;把要打包的可执行文件exe拷贝过来 点击输入框&#xff0c;复制一下文件夹路径 点击电脑左下角&#xff0c;找到Qt文件夹&#xff0c; 点击打开 “Qt 5.12.0 for Desktop” &#xff08;我安装的是Qt 5.12.0版本&#xff09; 输入“cd bin”&#xff…