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富文本编辑器的使用
发布评论