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.hqwc.cn/news/215104.html

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

相关文章

免费时代结束:百度云加速取消所有免费套餐

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 在网站时代&#xff0c;凭借着“品牌”“SEO”“免费”的优势&#xff0c;百度云加速一跃成为国内最大的CDN服务商。但随着站长时代结束&#xff0c;和网站相关的产品越来越少&#xff0c;收费的名…

Langchain的Agents介绍

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

卷积神经网络(CNN)识别验证码

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;2. 导入数据3. 查看数据4.标签数字化 二、构建一个tf.data.Dataset1.预处理函数2.加载数据3.配置数据 三、搭建网络模型四、编译五、训练六、模型评估七、保存和加载模型八、预测 …

产品经理必备技能:竞品分析!秒懂竞品分析,写竞品分析报告看这篇就够了!

在这个竞争激烈的时代&#xff0c;每一个想要成功的企业不可避免地要进行竞品分析。竞品分析就像是一把锐利的剑&#xff0c;可以帮助我们洞察市场&#xff0c;了解对手&#xff0c;找出自己的优势和弱点。 但这并不是一件容易的事情&#xff0c;需要我们投入大量的时间和精力…

Fiddler 无法抓包手机 https 报文的解决方案来啦!!

解决手机https无法抓包的问题 当你测试App的时候&#xff0c;想要通过Fiddler/Charles等工具抓包看下https请求的数据情况&#xff0c;发现大部分的App都提示网络异常/无数据等等信息 这时候怎么解决呢&#xff1f; 以软件测试面试提刷题APP为例&#xff1a; Fiddler上的显示…

YOLOv5 第Y6周 模型改进

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客 &#x1f366; 参考文章&#xff1a;365天深度学习训练营 &#x1f356; 原作者&#xff1a;[K同学啊] &#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.com/mingtian-fkmxf/zxwb4…

Python之Pygame游戏编程详解

一、介绍 1.1 定义 Pygame是一种流行的Python游戏开发库&#xff0c;它提供了许多功能&#xff0c;使开发人员可以轻松创建2D游戏。它具有良好的跨平台支持&#xff0c;可以在多个操作系统上运行&#xff0c;例如Windows&#xff0c;MacOS和Linux。在本文中&#xff0c;我们将…

基于java技术的社区交易二手平台

基于java技术的社区交易二手平台的设计与实现 &#xff08;一&#xff09;开发背景 随着因特网的日益普及与发展&#xff0c;更多的人们开始通过因特网来寻求便利。但是&#xff0c;许多人都觉得网上商店里的东西不贵。所以&#xff0c;有些顾客宁愿去那些用二次定价建立起来的…

全球服的游戏服务器架构设计

全球服的游戏服务器架构设计 版权声明 本文为“优梦创客”原创文章&#xff0c;您可以自由转载&#xff0c;但必须加入完整的版权声明 文章内容不得删减、修改、演绎 相关学习资料见文末 主题 常见服务器端架构划分 不同类型游戏的架构选择与瓶颈 如何设计通用、可伸缩的…

BGP联邦及路由反射器配置

需求 1 AS1存在两个环回&#xff0c;一个地址为192.168.1.0/24&#xff0c;该地址不能再任何协议中宣告 AS3存在两个环回&#xff0c;一个地址为192.168.2.0/24&#xff0c;该地址不能再任何协议中宣告 AS1还有一个环回地址为10.1.1.0/24&#xff0c;AS3另一个环回地址是11.1.1…

2048 数字合成大作战,Android小游戏开发

A. 项目描述 《2048》是一款经典的益智小游戏&#xff0c;它的目标是通过合并相同数字来达到2048这个最高分。 该游戏规则简单&#xff0c;玩家需要通过滑动屏幕来移动方块&#xff0c;相同数字的方块会合并成一个新的数字方块。这样的简单操作让人可以轻松上手。 《2048》小…

H5ke12--1--iframe标签制作页面的使用

上次说到 如何我们的数据html页面返回到服务器,服务器到html.submit不要了,直接button普通按钮,action也不用,,,fetch直接异步请求,那么就会有数据发送到服务器 Repones.write写入就行了,直接写的就是html页面演示 这次我们来看iframe, H5加入了传输页面的新的事件 注意 link、…