富文本编辑器braft-editor的使用

最新推荐文章于 2025-03-14 20:30:56 发布

zzh1918

最新推荐文章于 2025-03-14 20:30:56 发布

阅读量2.1w

点赞数 9

分类专栏： javascript react 文章标签： braft-editor react富文本编辑器图片上传

本文链接：https://blog.youkuaiyun.com/qq_37860930/article/details/97115621

版权

在写react时需要用到富文本编辑器，找了很多后最后选择了braft-editor富文本编辑器

美观易用的react富文本编辑器
可结合antd使用
本质是封装的draft-js
提供多媒体的功能（图片、音频、视频）

这里我只介绍常见的一些功能和问题，详情请参考官网

在这里插入图片描述

项目地址：github地址
预览地址：预览地址

基本使用

通过value和onChange对editorState组件进行双向绑定，注意value的值的类型必须是editorState对象(这一点类似于Ant Design中的日期选择器组件，它使用moment对象作为数据格式)

import BraftEditor from 'braft-editor'

...

state = {
   
	editorState: BraftEditor.createEditorState(null)
}

...
handleChange = (editorState) => {
   
	this.setState({
    editorState })

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zzh1918

关注关注

9
点赞
踩
31

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

antd design pro 4富文本编辑器braft-editor

Two_Too的专栏

09-27

1749

最近在使用antd design pro 4.0设计知识库版本管理 富文本编辑器选择了 tinymce-react 中文文档地址：http://tinymce.ax-z.cn/general/basic-setup.php 英文文档地址：https://www.tiny.cloud/docs/ npm install --save @tinymce/tinymce-react ...

富文本编辑器 braft-editor在不同浏览器下粘贴格式不一致解决方案

Spring163_X的博客

12-15

1502

富文本编辑器 braft-editor在不同浏览器下粘贴格式不一致解决方案谷歌浏览器下谷歌翻译火狐浏览器下谷歌翻译对比两个浏览器下输出值解决方案显示效果谷歌浏览器下谷歌翻译将翻译内容复制粘贴至富文本编辑器,测试地址: https://braft.margox.cn/demos/basic 火狐浏览器下谷歌翻译复制粘贴内容到富文本编辑器,神奇的事情发生了对比两个浏览器下输出值 1.火狐浏览器下的粘贴过来的内容 // 输出内容 <p>business numberNumber o

5 条评论您还未登录，请先登录后发表或查看评论

braft-editor:一个好看又好用的React富文本编辑器

05-16

Braft Editor 一个基于的Web富文本编辑器，适用于React框架，兼容主流现代浏览器。交流反馈请加QQ群：725634541 现已支持在typescript，使用npm或者yarn安装@types/braft-editor即可,墙裂感谢提供支持使用braft-convert的同学请将braft-convert升级到v1.8.1以确保功能同步最近更新 2018-03-23 v1.8.3 修复无法粘贴从word文档复制的内容的问题暂时回退v1.8.1的部分优化项目 2018-03-23 v1.8.2 修复了图标样式名可能会与宿主项目冲突的问题 2018-03-21 v1.8.1 修复了html与raw的相互转换的一些问题，部分功能由贡献，非常感谢新增onTab属性在输出的html中为设置了float和alignment的图片增加对应的className属性 2018-0

braft-editor -- 富文本编辑器(自定义文件上传和拓展功能)

m0_67011584的博客

12-29

2269

图片上传需要借助braft-utils插件value?: string;onChange?width?height?//表单提交的时候需要把数据通过toHTML()方法处理一下value,onChange,// 在这里调用图片上传接口onChange(?null),!},],),

富文本编辑器（Rich Text Editor，RTE）

最新发布

m0_72900140的博客

03-14

1605

大多数富文本编辑器库都支持插件机制，允许开发者扩展编辑器的功能。例如，可以为Quill编辑器添加自定义按钮或模块。" > < p > 这是一个可编辑的区域，你可以在这里输入文本。// 添加自定义按钮 const customButton = document . createElement('button');customButton . textContent = '插入特殊字符';} };" > < p > 这是一个可编辑的区域，你可以在这里输入文本。

使用braft-editor实现简易版即时写文档并预览的富文本编辑器

今天鸭鸭不想出去玩

06-12

2045

最近在看各个富文本编辑库的时候，有点好奇，于是对比了一些，有draft-js，Slate.js。但是这些基本都是英文库，简单demo无法满足需求，比如插入截图和表格，这些复杂结构的数据，实现这些，必须自定义扩展，要想做到这些，通读一遍文档基本是必须，且内含的天坑，估计也是数不胜数。也不错，当然人家是吃这口饭的，就单独说插入表格这个吧，（浅吐槽一句csdn写文章的插入表格都还蛮low的）还有插入模板，语雀做的非常棒了，选中表格也能即时删除某列，更别说插入模板了。的文档就做的蛮好的，

记BraftEditor的使用

weixin_39444480的博客

07-03

3212

braftEditor的使用

BraftEditor的使用

qq_40896095的博客

07-14

3336

因为自己使用的是存函数所以简单记录一下，因为官网上没有对存函数的试用，所以还是要用到onchange或者onBlur都可以来获取文本框中的值，但是又因为文本框返回的是函数，所以要转成标签格式 <BraftEditor value={content} onChange={async (val) => setContent(val.toHTML())} ></BraftEditor> 在利用useState来赋值 const [content, setContent] = use

brafteditor防抖_react 富文本编辑器 braft-editor

weixin_39689622的博客

12-19

313

在做后台管理项目的过程中我们少不了和富文本编辑器打交道，以前的项目采用的是ueditor今天咱们不说ueditor，咱们说一下react用的是：braft-editor1.安装braft-editor# 使用yarn安装yarn add braft-editor# 使用npm安装npm install braft-editor --save2.braft-editor的使用//1.组件中引入 br...

富文本braft-editor插件分享

xiao970615的博客

07-11

304

【代码】富文本braft-editor插件分享。

基于React的富文本编辑器——Braft Editor使用

z止于至善的博客

09-26

6698

antd是基于 Ant Design 设计规范实现的高质量 React 组件库，倾向于只提供符合该规范且带有视觉展现的 UI 组件，也尽量不重复造轮子。如果要在React项目中使用富文本编辑器，官方推荐使用与。这篇文章主要介绍与Antd的结合使用。

braft-editor：美观易用的React富文本编辑器，基于draft-js开发

02-05

Braft编辑器-ZH 多亏了Google翻译一个基于draft-js的网络富文本编辑器，适用于React框架，与主流的现代浏览器兼容。请注意，该项目的当前版本是2.x。如果您使用的是1.xx版本，请参阅[旧版本文档]（ .md）使用前请先了解 Braft Editor是基于草稿js的编辑器。 Draft-js不会直接使用HTML作为组件状态。它实现了一个EditorState类型，该类型本质上是一个JS对象。在传统的RTF编辑器中，与EditorState相对应HTML内容是一个块；这可以通过查看editorState.toRAW（）进行验证。使用EditorState

富文本编辑器braft-editor在React + ant design中的使用

sxww_zyt的博客

05-25

2711

本文主要介绍braft-editor在React结合ant design中的使用，包括文字、图片、超链接等处理

Braft Editor 使用指南

gitblog_00219的博客

08-16

984

Braft Editor 使用指南项目地址:https://gitcode.com/gh_mirrors/br/braft-editor 1. 项目介绍 Braft Editor 是一款基于 React 的强大富文本编辑器，它以 Draft.js 为核心，旨在提供开箱即用的解决方案。此编辑器不仅具备完善的文本编辑功能，还高度可定制化，支持插入图片、音频、视频等多种多媒体内容。它的设计允许开发者...

Braft Editor 使用与配置指南

gitblog_00585的博客

08-16

700

Braft Editor 使用与配置指南项目地址:https://gitcode.com/gh_mirrors/br/braft-editor 项目目录结构及介绍 Braft Editor 是一个基于 React 构建的富文本编辑器，其项目结构体现了高度模块化和清晰的层次划分，便于开发者理解和定制。以下是对核心部分的简要解析： . ├── dist # 编译...

好用的React富文本编辑器(Braft Editor)及取色器、表格的应用

outstanding木槿

10-08

5867

富文本编辑器的应用

使用braft-editor踩坑记录

weixin_44952328的博客

11-29

3457

后续需求有变动，需要添加额外的上传按钮，可以上传图片和office文档，发现之前简单的复制粘贴图片的方式满足不了新的需求。之后发现braft-editor官网中提到可以结合antd组件来做一系列的操作，所以毋庸置疑的选择了和Upload结合使用方式。allowPasteImage: true, // 是否允许直接粘贴剪贴板图片到编辑器。判断文件是图片还是其他格式，图片就转成IMAGE，其他文件，转成LINK。上传图片开始使用的media属性，能直接粘贴截图，很方便。(可上传图片、文档格式)

braft_editor富文本

晴天有何特别

04-19

2065

富文本编辑器也用过不少了，这次提供一个功能算是齐全，好用的braft_editor 我使用的react接入，大同小异,这里采用多媒体文件上传到七牛云，回调链接至标签的src上效果图我就懒得搞了，截取的别人的，代码是我自己写的 import React from "react"; import BraftEditor from "braft-editor"; // 引入编辑器样式 import "braft-editor/dist/index.css"; import api from "../../ap

Braft Editor-EN：一款强大的React富文本编辑器

gitblog_00164的博客

08-18

514

Braft Editor-EN：一款强大的React富文本编辑器 项目地址:https://gitcode.com/gh_mirrors/br/braft-editor 项目介绍 Braft Editor-EN 是一款基于 Draft.js 构建的网页富文本编辑器，专为 React 框架设计，兼容主流现代浏览器。该编辑器不仅提供了丰富的文本编辑功能，还支持多媒体内容的插入和自定义上传接口，是构建内...

braft-editor 版本

08-09

braft-editor是一款基于React的富文本编辑器，用于在Web应用程序中实现富文本内容的编辑和展示。它是由百度开发并开源的，具有丰富的功能和良好的用户体验。 braft-editor的版本更新是为了不断提升用户体验和功能，修复bug和改进性能。每个版本的升级都会带来一些新的功能和改进，例如增加了图片自定义上传、支持拖拽、增加了表格复制粘贴等功能。同时，版本升级也会修复一些已知的问题，增加稳定性和可靠性。为了更好地使用braft-editor，我们需要关注版本之间的变化，并及时升级到最新版本。最新版本通常会提供更好的性能、安全性和用户体验，同时还修复了之前版本中的一些问题。升级版本通常是一个很简单的过程，只需简单地替换相关的文件并重新编译即可。总结来说，braft-editor版本的持续更新是为了提供更好的富文本编辑器功能和体验。通过及时升级到最新版本，我们可以享受到更多的功能和改进，同时也能够减少已知问题的影响，增加系统的稳定性和可靠性。