braft_editor富文本

富文本编辑器也用过不少了，这次提供一个功能算是齐全，好用的braft_editor
我使用的react接入，大同小异,这里采用多媒体文件上传到七牛云，回调链接至标签的src上
效果图我就懒得搞了，截取的别人的，代码是我自己写的
注：在react使用中，赋默认值要在接口拿到数据后再渲染组件，不然你传过去的就是空
这里顺便推荐一下我自己写的富文本编辑器

import React from "react";
import BraftEditor from "braft-editor";
// 引入编辑器样式
import "braft-editor/dist/index.css";
import api from "../../api/index.js";
import * as Qiniu from "qiniu-js";
import "./index.less";

const controls = [
	"undo",
	"redo",
	"separator",
	"font-size",
	"line-height",
	"letter-spacing",
	"separator",
	"text-color",
	"bold",
	"italic",
	"underline",
	"strike-through",
	"separator",
	"superscript",
	"subscript",
	"remove-styles",
	"emoji",
	"separator",
	"text-indent",
	"text-align",
	"separator",
	"headings",
	"list-ul",
	"list-ol",
	"blockquote",
	"code",
	"separator",
	"link",
	"separator",
	"hr",
	"separator",
	"media",
	"separator",
	"clear",
];

class Role extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			editorState: BraftEditor.createEditorState(props.editorState), //富文本回显信息存储
		};
	}
	// 同步编辑器数据
	handleChange = (editorState) => {
		this.setState({
			editorState: editorState,
		});
		this.props.change(editorState.toHTML());
	};
	// 获取token

	//5.由于图片上传、视频上传项目中都是单独走的接口，需要一个上传的方法
	myUploadFn = (param) => {
		let fileName = param.file.name;
		let num = fileName.lastIndexOf(".");
		fileName = new Date().getTime() + "" + fileName.substring(num);
		let req = {
			file: param.file,
			key: fileName, //文件名
		};
		//
		api.getQiniuToken().then((res) => {
			req.token = res.data;
			this.uploadQiniu(req, param);
		});
	};
	//
	setControls() {
		if (this.props.controls == undefined) {
			return controls;
		} else {
			return this.props.controls;
		}
	}
	// 上传七牛云
	uploadQiniu(req, param) {
		//file, key, token, putExtra, config
		let putExtra = {
			fname: req.file,
			params: {},
			mimeType: ["image/png", "image/jpeg", "image/gif", "image/jpg"],
		};
		let config = {
			useCdnDomain: true,
			region: Qiniu.region.z0,
		};
		let observe = {
			next: (res) => {
				param.progress(res.total.percent);
				// console.log("已上传大小，单位为字节：" + res.total.loaded);
				// console.log("本次上传的总量控制信息，单位为字节：" + res.total.size);
				//console.log("当前上传进度，范围：0～100：" + res.total.percent);
			},
			error: (err) => {
				console.log(err.code);
				console.log(err.message);
				console.log(err.isRequestError);
				console.log(err.reqId);
			},
			complete: (res) => {
				//完成后的操作
				//上传成功以后会返回key 和 hash  key就是文件名了！
				let links = "http://easy.media.qingbeijy.cn/" + res.key;
				param.success({
					url: links,
					// meta: {
					// 	id: upLoadObject && upLoadObject.id,
					// 	title: upLoadObject && upLoadObject.fileName,
					// 	alt: upLoadObject && upLoadObject.fileName,
					// 	loop: false, // 指定音视频是否循环播放
					// 	autoPlay: false, // 指定音视频是否自动播放
					// 	controls: false, // 指定音视频是否显示控制栏
					// 	poster: "", // 指定视频播放器的封面
					// },
				});
			},
		};
		//开始上传  token 需要找后端获取(单独的方法)
		let observable = Qiniu.upload(
			req.file,
			req.key,
			req.token,
			putExtra,
			config
		);
		observable.subscribe(observe);
	}
	//6.render函数中 braft-editor的使用（验证必填项）
	renderPlace() {
		return (
			<div>
				<p>请输入内容</p>
			</div>
		);
	}
	render() {
		return (
			<BraftEditor
				controls={this.setControls()}
				className="my-editor"
				style={{ border: "1px solid #e8e8e8" }}
				placeholder={this.renderPlace()}
				media={{ uploadFn: this.myUploadFn }}
				value={this.state.editorState}
				onChange={this.handleChange}
			/>
		);
	}
}

export default Role;

index.less

.bf-content{
    font-size: 14px;
}
.bf-container .public-DraftEditorPlaceholder-root{
    font-size: 14px;
    top: 10px;
    left: 10px;
}
.bf-container .public-DraftEditor-content{
    padding: 10px;
}