braft-editor富文本编辑器的使用

1.在线演示： http://margox.github.io/braft-editor/

2.安装：yarn add braft-editor或npm install braft-editor --save

3.使用：

编辑器支持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作为初始值
        editorState: BraftEditor.createEditorState(null)
    }

    async componentDidMount () {
        // 假设此处从服务端获取html格式的编辑器内容
        const htmlContent = await fetchEditorContent()
        // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorStat
        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>
        )

    }

}

    }

}

4.API参考：

属性参考：https://www.yuque/braft-editor/be/gz44tn
实例方法：https://www.yuque/braft-editor/be/mrgy92

5.关键技术实现：

(1)图片上传：

a.实现代码：

const myUploadFn = (param) => {

            const serverURL = AjaxUrl + "/SunSheenBase/api/rest/common/img/upload";
            const xhr = new XMLHttpRequest
            const fd = new FormData()
          
            const successFn = (response) => {
              // 假设服务端直接返回文件上传后的地址
              // 上传成功后调用param.success并传入上传后的文件地址
              console.log("xhr",xhr);
              param.success({
                url: JSON.parse(xhr.responseText).url,
                meta: {
                  id: 'img' + Math.random()*10,
                  title: '上传文件',
                  alt: '上传文件',
                  loop: true, // 指定音视频是否循环播放
                  autoPlay: true, // 指定音视频是否自动播放
                  controls: true, // 指定音视频是否显示控制栏
                  poster: 'http://xxx/xx.png', // 指定视频播放器的封面
                }
              })
            }
          
            const progressFn = (event) => {
              // 上传进度发生变化时调用param.progress
              param.progress(event.loaded / event.total * 100)
            }
          
            const errorFn = (response) => {
              // 上传发生错误时调用param.error
              param.error({
                msg: '上传失败！'
              })
            }
          
            xhr.upload.addEventListener("progress", progressFn, false)
            xhr.addEventListener("load", successFn, false)
            xhr.addEventListener("error", errorFn, false)
            xhr.addEventListener("abort", errorFn, false)
          
            fd.append('file', param.file)
            xhr.open('POST', serverURL, true)
            xhr.send(fd)
         // console.log("xhr",xhr);
 }
        //  校验不通过的媒体文件将不会被添加到媒体库中
        const myValidateFn = (file) => {
            // return file.size < 1024 * 100 ? message.success("图片上传成功！") : message.warn("图片太大，请上传合适大小的图片！");
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    file.size < 1024 * 100 ? resolve() : reject()
                }, 2000)
            })
        }
        // 指定媒体库允许选择的本地文件的MIME类型
          const myUploadaccepts = {
            image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
            video: 'video/mp4',
            audio: 'audio/mp3'
          }

b.组件配置：

c.说明：uploadFn属性为上传图片方法，validateFn属性为校验方法，accepts方法为可接受的上传文件格式，pasteImage属性为是否可以粘贴。

(2)设置字体：

a.代码：

const extendControls  = [{
                key:'font-family'
            }
        ]
const fontFamily = [{
                        name:"宋体",
                        family:'"宋体",sans-serif'
                    },{
                        name: 'Araial',
                        family: 'Arial, Helvetica, sans-serif'
                    }, {
                        name: 'Georgia',
                        family: 'Georgia, serif'
                    }, {
                        name: 'Impact',
                        family: 'Impact, serif'
                    }, {
                        name: 'Monospace',
                        family: '"Courier New", Courier, monospace'
                    }, {
                        name: 'Tahoma',
                        family: 'tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif'
                    },{
                        name: '黑体',
                        family: '"黑体",serif'
                    },{
                        name: '楷体',
                        family: '楷体'
                    },{
                        name: '幼圆',
                        family: 'YouYuan'
                    }]

b.组件配置：

c.说明：

extendControls属性为可扩展的受控组件，一般要配置的属性均可添加进去，

fontFamilies属性为字体数组。

(3)可扩展模块包：https://npm.taobao/package/braft-extensions

a.目前包含的模块列表：

①表格模块 Table

②Markdown语法支持 Markdown

③代码高亮模块 CodeHighlighter

④高级取色器模块 ColorPicker

⑤表情包扩展模块 Emoticon

⑥输入字数限制模块 MaxLength

⑦标题区块(h1-h6)id模块 HeaderId

b.安装：

npm install braft-extensions --save# 或者yarn add braft-extensions

c.使用：

需要分别import本模块包下面的各个模块。

d.注意事项：

如果在使用扩展模块时，指定了includeEditors或excludeEditors属性，则通过BraftEditor.createEditorState创建初始化内的时候，需要传入一个editorId属性来指明创建的editorState是给哪个BraftEditor组件用的：

// 以使用表格扩展为例
BraftEditor.use(Table({
  includeEditors: ['editor-1']
}))

// 使用BraftEditor.createEditorState创建编辑器数据
const initialValue = BraftEditor.createEditorState('xxxxxx', { editorId: 'editor-1' })

// 将数据传入编辑器
<BraftEditor value={initialValue} id="editor-1"/>

6.说明：

一个Web富文本编辑器，适用于React框架，兼容主流现代浏览器。

如果需要在IE10中只用本项目，请参考：braft-polyfill

参考网址：https://blog.csdn/zuggs_/article/details/80747438

更多推荐

braft-editor富文本编辑器的使用