brafteditor防抖_braft-editor
Braft Editor
一个基于draft-js的Web富文本编辑器,适用于React框架,兼容主流现代浏览器。
注意,项目当前版本为2.x,如果你使用的是1.x.x版本,请参阅旧版本文档
使用前请了解
Braft Editor是基于draft-js开发的编辑器,而draft-js内部并不是直接使用HTML作为组件状态的,它自己实现了一个EditorState类型,本质上是一个JS对象;在传统富文本编辑器中的一段段的HTML内容对应到EditorState就是一个个的block块;这一点可以通过查看editorState.toRAW()进行验证。
使用EditorState代替HTML字符串的好处在于一套EditorState可以多端使用,编辑器产出的内容不再局限于只在web平台展示,(当然各个平台也需要自行实现对应的EditorState to View的转换功能),同时也和React的组件状态更加适配。
然而,上述实现方式,最大的问题在于无法将外部的HTML完美的转换为EditorState,因为其支持的样式、标签、标签属性等等极为有限,没办法将HTML中的所有特性转换为EditorState中的状态,导致在使用第三方或历史HTML字符串来初始化编辑器内容的时候,以及粘贴外部HTML内容的时候,只有被编辑器支持的少量样式和标签属性才能被保留,大部分内容将会被过滤或者忽略掉。
基于上面的缺点,如果各位的项目强依赖于原始HTML标签和属性等,则不建议使用本编辑器。
表格扩展模块已发布测试版本,请升级braft-editor和braft-utils到最新版本,并安装最新版本的braft-extensions,使用方式请查看[表格扩展模块]
交流反馈请加QQ群:725634541
特性
完善的文本内容编辑功能
诸多开放的编辑接口,良好的可扩展性
允许插入图片、音视频等多媒体内容
允许自定义多媒体内容的上传接口
允许设置图片的左右浮动(即文字绕排功能)
允许设置编辑器可用的颜色列表、字号以及字体
允许自定义需要展示的控制按钮和展示顺序
允许增加额外的自定义按钮
多语言支持(目前已支持简体中文、繁体中文、英文、波兰语、日语、韩语、土耳其语)
...更多特性开发中
鸣谢
近期更新记录
2019-08-06 v2.3.8修复a标签href中带有javascript语句导致警告的问题
2019-06-20 v2.3.7修复问题#512并新增imageResizable属性,允许关闭图片的拖动调整尺寸功能
2019-06-18 v2.3.6支持不选择文字的情况下直接插入链接
新增allowInsertLinkText属性,允许直接插入链接时输入链接文字,默认false
2019-06-14 v2.3.5完善index.d.ts
2019-06-11 v2.3.4支持部分更多自定义html属性的保留(需要升级braft-convert至v2.3.0)
加入韩语(kr)、日语(jpn)、土耳其语(tr)
加入更多hooks支持
2019-05-28 v2.3.2修复传入RAW字符串无法正常解析为问题
2019-05-20 v2.3.1修复v2.3.0的致命bug
2019-05-20 v2.3.0支持嵌套列表以及部分内部细节优化,感谢SyMind的贡献:PR#486,PR#485
优化在SSR中使用的问题
2019-04-29 v2.2.10图片支持拖动调整大小,感谢ArthasDragon的贡献!
优化使用纯数字初始化编辑器内容异常的问题,感谢WzFFzW的贡献!
新增fixPlaceholder属性(Boolean),用于修复部分情况下placeholder文本显示异常的问题,默认false
优化forceRender
2019-03-06 v2.2.9修改index.d.ts
2019-02-22 v2.2.7新增用于美化输出HTML的样板CSS文件(node_modules/braft-editor/dist/output.css)
2019-02-22 v2.2.6优化blockRenerMap属性,支持传入一个返回blockRenerMap对象的函数
优化上下标样式的设置
优化编辑器内文本缩进和文本对齐同事存在时的显示效果
2019-01-11 v2.2.4新增editorId属性,作用与id属性完全一样,用于解决在Ant Design Form组件中id属性会被覆盖导致无法正常使用扩展模块的问题
2019-01-11 v2.2.2优化音视频和嵌入式媒体的播放交互,改为在模态框中播放
2019-01-06 v2.2.1完善index.d.ts(PR#340)
2018-12-29 v2.2.0新增d.ts文件,在TypeScript项目中使用更友好,感谢幅川大佬的贡献!
修复弹窗组件中的输入框无法使用的问题
安装
# 使用yarn安装
yarn add braft-editor
# 使用npm安装
npm install braft-editor --save
使用
编辑器支持value和onChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:
import React from 'react'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
export default class EditorDemo extends React.Component {
state = {
editorState: null
}
async componentDidMount () {
// 假设此处从服务端获取html格式的编辑器内容
const htmlContent = await fetchEditorContent()
// 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorState数据
this.setState({
editorState: BraftEditor.createEditorState(htmlContent)
})
}
submitContent = async () => {
// 在编辑器获得焦点时按下ctrl+s会执行此方法
// 编辑器内容提交到服务端之前,可直接调用editorState.toHTML()来获取HTML格式的内容
const htmlContent = this.state.editorState.toHTML()
const result = await saveEditorContent(htmlContent)
}
handleEditorChange = (editorState) => {
this.setState({ editorState })
}
render () {
const { editorState } = this.state
return (
value={editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
/>
)
}
}
当然本编辑器也支持defaultValue属性,因此你也可以将本编辑器作为一个非受控组件来使用。
更多介绍请查看详细文档
Buy me a beer
如果你想感谢本编辑器为你的项目节省了时间,或者单纯地喜欢这个编辑器,可以扫码赞赏几块钱来请我喝杯啤酒喔!
支付宝 微信
brafteditor防抖_braft-editor相关推荐
- 基于React的富文本编辑器——Braft Editor使用
antd 是基于 Ant Design 设计规范实现的 高质量 React 组件库,倾向于只提供符合该规范且带有视觉展现的 UI 组件,也尽量不重复造轮子. 如果要在React项目中使用富文本编辑器, ...
- 什么是节流(throttling)和防抖(debouncing)?
可以使用节流(throttling)或者防抖(debouncing)来控制调用接口的频率. 节流指的是在一段时间内只允许函数执行一次,比如每隔 1 秒钟调用一次接口.可以使用 setTimeout 和 ...
- 基于draft.js 和 braft-editor.js文档,自己总结的内容
我还没有整理,但是应该能帮助到你 * 包含一些文章 * 包含自己的总结 * 包含一些自己的实例,自定义块,自定义行内,删除元素等 分割线 1.一篇文档足矣(无数个文章综合体) https://www. ...
- Android 功能防抖 的实现
功能防抖: 在规定时间内多次触发某一个功能 ,仅会响应第一次触发操作 我们可以设置时间显示,也可以使用RxJava 的 throttleFirst 来实现效果 普通的判断写法可以看我的这一遍博客 使 ...
- 防抖 节流_关于防抖和节流
虾扯蛋之函数防抖和节流 - 掘金 先贴贴 这个哥们的. 因为我看了很多,感觉大多都是复制.没有啥思考 在介绍以下这些问题的时候.先公示下我思考的时候出现的问题 1.如果你使用 onclick 和 ad ...
- 经常可能会用到的【函数节流和函数防抖】记录下,做下区分
今天突然被人问到,函数节流和函数防抖的区别是什么, 结果我脑子一热直接举了个滚动条的粟子说是优化高频率执行的手段,就记得自己是用setTimeout来实现的. 完了区别是什么??哪个是哪个都蒙B了 回 ...
- editor修改样式 vue_vue+element-ui项目搭建实战
1.使用vue ui创建vue工程 利用vue-cli提供的图形化工具快速搭建vue工程: 命令行运行:vue ui 工程结构说明 build:项目构建webpack(打包器)相关代码 config: ...
- 防抖函数Debounce实现
实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行. 手写一 ...
- 防抖 节流_每日一题手写函数防抖与节流
关注"前端学苑" ,坚持每天进步一点点 「~函数防抖与节流 ~」 每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩展 ...
最新文章
- 接收服务器显示帧控制错误,Websocket连接关闭,出现错误“接收到意外的继续帧”...
- bootstrapTable语言包设置
- Error:java: 无效的标记 -version 编译错误的解决办法
- cygwin汉化简单操作【ZT】
- android深度探索第二章
- 出租车轨迹数据地图匹配
- iphone计算机同样答案,学会这4招,iPhone搭配Windows电脑一样好用
- java面试知识点总结
- python 网页游戏 渲染_python 结合selenium+PhantomJS爬取王者荣耀官网游戏壁纸
- 2018年秋招运维岗面试常见python和数据结构知识点总结
- 电脑找不到网络许可管理器_许可到网络
- java实现堆栈 打印英文字母表
- 牛客笔试OJ-在线编辑器输入输出总结
- 又一大型色情直播App被捣毁,女主播哭求别告诉家人
- CAD7:构造线的使用 【TR剪掉多余的线】
- 基于51单片机的简易mp3的制作
- MYSQL之慢SQL
- minio文件服务器的数据同步操作
- 自动称重管理软件功能如何助力企业实现信息化(一)
- 利用C语言设计一个猜数字游戏
热门文章
- 携手企企通,农业产业化国家重点龙头企业「罗牛山」加速采购数智化建设
- 算法详解(二):蛮力法
- ComPDFKit PDF SDK for Windows crack
- eclipse上面一条工具栏图标不见了
- vite+vue3使用UEditorPlus ,后端PHP
- oracle输入口怜,oadm图_oad是什么意思_oracle oadm
- 理解 Geohash
- 用python做时间序列预测十:时间序列实践-航司乘客数预测
- python 动物分类_动物分类及图片
- android github 多页面程序,论一个APP从启动到主页面显示经历的过程?