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 Extensions
表格扩展模块已发布测试版本，请升级braft-editor和braft-utils到最新版本，并安装最新版本的braft-extensions，使用方式请查看[表格扩展模块]
交流反馈请加QQ群：725634541
特性
- 完善的文本内容编辑功能
- 诸多开放的编辑接口，良好的可扩展性
- 允许插入图片、音视频等多媒体内容
- 允许自定义多媒体内容的上传接口
- 允许设置图片的左右浮动（即文字绕排功能）
- 允许设置编辑器可用的颜色列表、字号以及字体
- 允许自定义需要展示的控制按钮和展示顺序
- 允许增加额外的自定义按钮
- 多语言支持（目前已支持简体中文、繁体中文、英文、波兰语、日语、韩语、土耳其语）
- ...更多特性开发中
鸣谢
- 感谢Jyoti Puri 开发的draftjs-utils 提供的帮助和react-draft-wysiwyg 提供的参考，Thanks！
- 感谢HubSpot 开发的draft-convert，Thanks！
- 感谢Samy Pessé 开发的draft-js-multidecorators，Thanks！
- 感谢JackLam提供的繁体中文语言自持，Thanks!
- 感谢Paweł Krefta提供的波兰语言支持，Thanks!
- 感谢YYL1999提供的韩语和日语语言支持，Thanks!
- 感谢Gencer W. Genç提供的土耳其语言支持，Thanks!
近期更新记录
- 2019-08-06 v2.3.8
- 2019-06-20 v2.3.7
- 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
- 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)
- 新增用于美化输出HTML的样板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
安装
# 使用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 (
<div className="my-component">
<BraftEditor
value={editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
/>
</div>
)
}
}当然本编辑器也支持defaultValue属性，因此你也可以将本编辑器作为一个非受控组件来使用。
更多介绍请查看详细文档
Buy me a beer
如果你想感谢本编辑器为你的项目节省了时间，或者单纯地喜欢这个编辑器，可以扫码赞赏几块钱来请我喝杯啤酒喔！
