1. 编辑器介绍

text编辑使用textArea，html编辑使用：contenteditable="true"
富文本展现：iframe、dangerouslySetInnerHTML、innerHTML
braft-editor是使用react开发的富文本编辑器，是一款开箱即用的富文本编辑器
它是基于draft-js开发的，draft-js是一项基本的开发工具
braft-editor的使用就和react组件的使用一样，他就是一个普通的react组件，可以往组件里传入值来控制富文本的显示
富文本编辑器上面的工具栏区和下面的编辑区，上面的工具栏可以根据具体需求进行删减和增加，下面的编辑区可以通过class或者样式来控制编辑器的样式以及富文本内容的样式，对于未暴露出来的样式属性也可以通过className定义编辑区的样式。
支持图片和视频和音频等媒体功能
可以结合antd开发功能

2. 富文本编辑器对比

编辑器	特点	fork	star
draft-js	基础功能，开发成本大	2.6k	21.9k
braft-editor	开箱即用	572	4.5k
ProseMirror	个性化	318	6k

应用举例

3.1 自定义控件：

控件是编辑器上面的部分，用户可以根据个人需求进行灵活控制，可以使用controls属性一一列举、使用extendControls扩展控件，控件的类型可以是内部集成的button、dropdown、modal 也可以是用户自定义的组件

3.2 图片控件：

const imageControls = [
    'float-left',
    'float-right',
    {
        text: 'Foo', // 指定控件文字，可传入jsx
        render: (mediaData) => {}, // 控件渲染函数，该属性指定时，text和onClick属性将被忽略
        onClick: (block) => {} // 指定控件点击后的回调，参数为当前图片的block对象
    },
    'link',
    'size',
    'remove'
]

图片控件支持功能扩展，比如可以自己实现图片切割、旋转、删除等功能。

3.3 修改样式：\

富文本组件本身支持fontSize colors lineHeights 等自定义样式，同时可以通过className 、style属性定义编辑器的样式

         <BraftEditor
            value={editorState}
            onChange={this.handleC    hange}
            lineHeights={[1, 1.2, 1.5, 1.75, 2, 2.5, 3, 4]}
            fontSizes={[ 12, 14, 16, 18, 20, 24,
              28, 30, 32, 36, 40, 48,
              56, 64, 72, 96, 120, 144]}
            className="outers-style"
            style={{width: '200px'}}
          />

不能修改的样式比如line-height覆盖其他样式，完全自定义，可以在outers-style class中直接对子元素进行筛选设置样式。

组件属性\

属性名	类型	说明
value	EditorState	编辑器的内容
defaultValue	EditorState	编辑器的初始化内容，仅首次传入生效
placeholder	String	指定Placeholder文本
readOnly	Boolean	指定编辑器是否只读
language	String	编辑器的语言
controls	Array[String	Object]	编辑器的工具栏控件列表
excludeControls	Array[String]	不在工具栏显示的控件列表
extendControls	Array[Object]	自定义的控件列表
componentBelowControlBar	React Component	在工具栏和编辑区域之间显示的组件
media	Object	编辑器的多媒体功能配置，包括上传功能
imageResizable	Boolean	是否允许拖动调整图片尺寸，默认为true
imageControls	Array[String	Object]	编辑器内的图片工具栏控件
colors	Array[String]	编辑器可用颜色列表
fontSizes	Array[Number]	编辑器可用的字号列表
fontFamilies	Array[Object]	编辑器可用的字体列表
lineHeights	Array[Number]	编辑器可用的行高列表
textAligns	Array[String]	编辑器可用的文本对齐方式
letterSpacings	Array[Number]	编辑器可用的字间距列表
emojis	Array[String]	编辑器可用的Emoji列表
textBackgroundColor	Boolean	是否允许设置文字背景颜色
stripPastedStyles	Boolean	是否以纯文本模式粘贴内容，默认为false
className	String	编辑器的样式名
style	Object	编辑器的内联样式
controlBarClassName	String	编辑器工具栏的样式名
controlBarStyle	Object	编辑器工具栏的内联样式
contentClassName	String	编辑器编辑区域容器的样式名
contentStyle	Object	编辑器编辑区域容器的内联样式
draftProps	Object	直接传给DraftJS的Editor组件的属性
onChange	Function(editorState)	编辑器状态(内容、选区等)发生变化时的回调函数
onFocus	Function	编辑器获得焦点时触发的函数
onBlur	Function	编辑器失去焦点时触发的函数
onTab	Function	在编辑器内按下Tab键时触发的函数
onDelete	Function	在编辑器内按下删除键时触发的函数
onSave	Function	在编辑器内按下Command/Ctrl + s时触发的函数
hooks	Object	编辑器的行为钩子属性

实例方法

实例方法用于直接操作编辑器的内容或者触发编辑器的行为，这些操作通常无法通过编辑器的属性来完成，实例的获取可以通过ref，实例方法如下：

名称	说明
undo	执行一次撤销操作
redo	执行一次重做操作
clearEditorContent	清空编辑器内容
forceRender	强制编辑器内容重新渲染
setValue	设置编辑器内容，需要传入editorState对象
getValue	获取编辑器内容，返回一个editorState对象
getFinderInstance	获取编辑器的媒体库实例
getDraftInstance	获取编辑器内部的DraftJs Editor实例

braft-util工具包

在通过受控组件的形式使用编辑器时，你可以通过操作editorState来达到一些特定的需求，为此编辑器提供了braft-utils工具包，这个包在安装braft-editor时已经作为依赖自动安装，无需另行安装。

braft-util也是基于draft-js开发的。

block区块的概念，意思是带有行为的react组件，比如指定一个带有删除功能的区块
区块的处理： selectBlock、 removeBlock、getSelectionBloc
样式的处理： toggleSelectionColor、toggleSelectionBackgroundColor、toggleSelectionFontFamily
插入相关：insertMedias、insertText、insertHTML

通过braft-util 使用实例

7 hooks

为了增加编辑器的可扩展性，同时避免传入一大堆onXxxx之类的属性，编辑器增加了hooks属性，通过该属性来指定编辑器的行为钩子，编辑在会在指定行为执行之前调用对应的钩子函数。

在钩子函数中，可以通过函数的参数获取到当前行为的数据，甚至可以通过返回被修改的数据来改变行为的结果，例如通过下面的钩子函数可以实现在设置文字链接时自动补全协议：

const hooks = {
      'toggle-link': ({ href, target }) => {
          href = href.indexOf('http') === 0 ? href : `http://${href}`
          return { href, target }
      }
    }
<BraftEditor hooks={hooks}/>

编辑器目前支持下列行为钩子：

名称	说明
toggle-link	在设置文字链接前执行的钩子函数
open-braft-finder	在打开媒体库之前执行的钩子函数
toggle-inline-style	在设置文字基本样式之前执行的钩子函数
change-block-type	在更改光标所在行的区块类型之前执行的钩子函数
exec-editor-command	在执行编辑器指令之前执行的钩子函数
insert-emoji	在插入Emoji表情之前执行的钩子函数
toggle-font-family	在设置文字字体之前执行的钩子函数
toggle-font-size	在设置文字字号之前执行的钩子函数
toggle-letter-spacing	在设置文字字间距之前执行的钩子函数
toggle-line-height	在设置文字行高之前执行的钩子函数
toggle-text-alignment	在设置文本对齐方式之前执行的钩子函数
toggle-text-color	在设置文字颜色之前执行的钩子函数
toggle-text-background-color	在设置文字背景颜色之前执行的钩子函数
select-medias	在选择媒体库文件之前执行的钩子函数
deselect-medias	在取消选择媒体库文件之前执行的钩子函数
remove-medias	在删除媒体库文件之前执行的钩子函数
insert-medias	在从媒体库插入文件到编辑器之前执行的钩子函数
select-files	在从本地选择文件插入到媒体库之前执行的钩子函数
set-image-link	设置图片链接时执行的钩子函数
set-image-link-target	设置图片链接目标时执行的钩子函数
set-image-size	设置图片尺寸时执行的钩子函数
set-image-float	设置图片浮动方式时执行的钩子函数
set-image-alignment	设置图片对齐方式时执行的钩子函数

8 draft-js

Draft.js 内部封装了一系列基础的事件处理函数，当事件触发时，这些函数接收当前event，并基于此生成new editorState，我们在接收到new editorState后再将该数据绑定到Draft上，这就是Draft的单向数据流。其中react层只负责视图层，我们将通过一些流程图与源码的展示来详细介绍这一点。

参考文献：

braft editor 官网 braft.margox.cn/
braft editor api www.yuque.com/braft-edito…
draft-js gitee.com/mirrors/dra…
braft-utils 工具包代码 github.com/margox/braf…

富文本编辑器之braft-editor

1. 编辑器介绍

2. 富文本编辑器对比

8 draft-js