braft-editor ：一个基于draft-js的Web富文本编辑器，适用于React框架，兼容主流现代浏览器。
效果：
使用方法：
** 1.安装依赖**：
#使用yarn安装 yarn add braft-editor
#使用npm安装 npm install braft-editor --save
** 2.页面使用**
import React , {useEffect , useState} from 'react' ;
import BraftEditor from 'braft-editor' ;
import' braft-editor/dist/index.css';
const RichtextEdit = (props)=> {
// 设置编辑器初始内容
const [editorState,setEditorState] =useState(BraftEditor.createEditorState('<p></p>'));
// 编辑内容触发
const handleChange = (editorState) => {
setEditorState(editorState)
}
// 获取 编辑器内容
const gettEditorCon = ()=>{
const content =editorState.toHTML();
}
return (
<div className={styles.editorBox}>
<BraftEditor
excludeControls={['media']}
contentStyle={{height:305}}
value={editorState}
onChange={handleChange} />
</div>
<button onclick="gettEditorCon"></button>
)
}
注：1. excludeControls 属性可以控制富文本工具栏中 需要隐藏的工具 参数是数组类型
2. contentStyle 属性可以控制富文本框整体样式
属性名****类型****说明
[value] EditorState编辑器的内容
[defaultValue] EditorState编辑器的初始化内容，仅首次传入生效
[placeholder] String 指定Placeholder文本
[readOnlyBoolean] 指定编辑器是否只读
[language] String 编辑器的语言
[controls] Array[String|Object] 编辑器的工具栏控件列表
[excludeControls] 不在工具栏显示的控件列表
[extendControls] Array[Object] 自定义的控件列表
[componentBelowControlBar] React Component在工具栏和编辑区域之间显示的组件
[media] Object 编辑器的多媒体功能配置，包括上传功能
imageResizableBoolean] 是否允许拖动调整图片尺寸，默认为true
[imageControls] 编辑器内的图片工具栏控件
[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 编辑器的行为钩子属性
