import React from 'react';
// 引入编辑器以及EditorState子模块
import BraftEditor, { EditorState } from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
import "./index.scss";
import * as qiniu from 'qiniu-js';
import Mutil from 'util/mutil.jsx';
const _mutil = new Mutil();
import ProductService from "service/product-service.jsx";
const _ProductService = new ProductService();
import SignupLoginService from "service/signup-service.jsx";
const _SignLoginService = new SignupLoginService();
import {observer, inject} from 'mobx-react';
@inject("uiStore")
@observer
export default class EditorDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
// 创建一个空的editorState作为初始值
editorState: EditorState.createFrom(''),
htmlDom:""
}
this.upImgs = this.upImgs.bind(this);
}
componentWillMount(){
_SignLoginService.getImgUpload().then(res=>{
let data = res.data
this.props.uiStore.changeImgUpload(data);
},err=>{
_mutil.errorTips("发生错误!");
})
}
async componentDidMount () {
// 假设此处从服务端获取html格式的编辑器内容
// 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
}
submitContent = async () => {
// 在编辑器获得焦点时按下ctrl+s会执行此方法
// 编辑器内容提交到服务端之前,可直接调用editorState.toHTML()来获取HTML格式的内容
const htmlContent = this.state.editorState.toHTML();
this.setState({
htmlDom:htmlContent
},()=>{
console.log(this.state.htmlDom);//存上了
});
}
handleEditorChange = (editorState) => {
this.setState({ editorState },()=>{
const html2 = this.state.editorState.toHTML();
this.setState({
htmlDom:html2
},()=>{
console.log(this.state.htmlDom);//存上了
this.props.onValueChange(this.state.htmlDom);
});
});
}
upImgs(param){
const filesimg = param.file
const fileMaxSize = 500000;
if(!/image\/\w+/.test(filesimg.type)){
alert('选择的文件不是图片');
return false;
}
if(filesimg.size <= fileMaxSize){
this.uploadImg(filesimg,param);
}else{
alert("文件过大");
}
}
uploadImg(imgSource,param){
const uptoken = this.props.uiStore.imgupload.token;
const file = imgSource;
const key = null;
const config = {
useCdnDomain: false,
region: null,
uphost:"up-z2.qiniup.com/"
}
const putExtra = {
fname: imgSource.name, //文件原文件名
params: {}, //用来放置自定义变量
mimeType: ["image/png", "image/jpeg","image/jpg"]
}
const observable = qiniu.upload(file,key,uptoken,putExtra,config);
observable.subscribe({
next:(res)=>{
//
},
error:(err)=>{
//
_mutil.errorTips(err);
},
complete:(res)=>{
const imgsurl = this.props.uiStore.imgupload.domain + res.hash;
console.log(imgsurl)
const successFn = (imgsurl)=>{
param.success({
url:imgsurl
})
};
successFn(imgsurl);
}
})
}
render () {
const { editorState } = this.state;
const myUploadFn = (param)=>{
const filesimg = param.file
const fileMaxSize = 500000;
if(!/image\/\w+/.test(filesimg.type)){
alert('选择的文件不是图片');
return false;
}
if(filesimg.size <= fileMaxSize){
this.uploadImg(filesimg,param);
}else{
alert("文件过大");
}
}
return (
<div className="my-component">
<BraftEditor
value={editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
media={{uploadFn:this.upImgs}}
/>
</div>
)
}
}
react-braft
https://www.yuque.com/margox/be/gz44tn#uc5rqq
网友评论