brafteditor防抖_braft-editor富文本编辑器的使用

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

3.使用：react

编辑器支持value和onChange属性，这相似于React中原生的input组件。一般状况下，能够用典型的受控组件的形式来使用本编辑器：git

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 (

value={editorState}

onChange={this.handleEditorChange}

onSave={this.submitContent}

/>

)

}

}

}

}

4.API参考：github

5.关键技术实现：web

(1)图片上传：npm

a.实现代码：api

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属性为字体数组。

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' })

// 将数据传入编辑器

6.说明：

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

若是须要在IE10中只用本项目，请参考：braft-polyfill

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