MarkDown.js
4.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React,{Component} from 'react';
import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import { API_FILEUPLOAD_MANAGE } from '@src/Api'
import axios from '@src/axios/index'
import SYS_CONFIG from '@src/config/constant.js'
export default class EditorConvertToHTML extends Component {
constructor(props) {
super(props);
// const html = '<h1>abd</h1>';
const html = this.props.messageContent;
const contentBlock = htmlToDraft(html);
if (contentBlock) {
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
const editorState = EditorState.createWithContent(contentState);
this.state = {
editorState,
};
}
this.state = {
class: ''
}
}
componentDidMount () {
}
// componentWillReceiveProps (nextProps) {
// // const html = nextProps.messageContent;
// // console.log(html);
// // const contentBlock = htmlToDraft(html);
// // if (contentBlock) {
// // const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
// // const editorState = EditorState.createWithContent(contentState);
// // this.setState({editorState});
// // }
// }
componentWillReceiveProps(nextProps) {
if (this.props.messageContent !==nextProps.messageContent) {
// 匹配富文本编辑器格式，回显保存的内容
const contentBlock = htmlToDraft(nextProps.messageContent);
if (contentBlock) {
const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
const editorState = EditorState.createWithContent(contentState);
this.setState({ editorState })
}
}
}
// 内容改变时触发
onEditorStateChange= (editorState) => {
this.setState({
editorState,
});
// let textArr=convertToRaw(this.state.editorState.getCurrentContent()).blocks;
// let textArrLenth='';
// textArr.map((item,index) => {
// return textArrLenth=textArrLenth+item.text
// });
//console.log('editorState====',convertToRaw(this.state.editorState.getCurrentContent()))
// 将富文本转换成html格式的字符串
let htmlContent = draftToHtml(convertToRaw(editorState.getCurrentContent()));
this.props.setRichContent(htmlContent);
};
//图片转base64
getBase64 = (img, callback)=> {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img)
}
uploadImageCallBack = (file)=> {
return new Promise((resolve, reject) => {
this.getBase64(file, (data)=>{
axios.ajax({
url: API_FILEUPLOAD_MANAGE.base64,
data: {
"imageDatas": [{
"className": file.name,
"data": data
}]
}
}).then(res => {
if(res && res.length > 0){
resolve({
data: {
link: SYS_CONFIG.fileApi +'/img/'+ res[0]
}
});
} else {
reject(res);
}
})
})
})
}
render() {
const { editorState } = this.state;
return (
<div>
<Editor
editorState={editorState}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
localization={{
locale: 'zh',
}}
onEditorStateChange={this.onEditorStateChange}
toolbar = {{
image : {
uploadCallback: this.uploadImageCallBack,
previewImage: true,
inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
}
}}
/>
</div>
);
}
}