braft-editor 使用

braft-editor ：一个基于draft-js的Web富文本编辑器，适用于React框架，兼容主流现代浏览器。

效果：

image.png

使用方法：

** 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 编辑器的行为钩子属性