富文本：

ps：(图片+中文bug未解决)

1、安装

cnpm install react-draft-wysiwyg --save cnpm install draft-js --save cnpm install draftjs-to-html --save cnpm install html-to-draftjs --save

2、引用

import {convertToRaw,EditorState,ContentState } from 'draft-js' import {Editor} from 'react-draft-wysiwyg' import draftToHtml from 'draftjs-to-html' //获取编辑器html内容 import htmlToDraft from 'html-to-draftjs' //将html内容转为编辑器显示内容 //引入样式 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

3、采用父子组件使用

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
//父
import DraftEditor from './components/DraftEditor'

    return (
      <PageHeaderWrapper>
        <Card>
          {
            !this.state.visible?
              <div>
                <Row>
                  <Col span={7}></Col>
                  <Col span={11}></Col>
                  <Col span={3}>
                    <Upload {...props} fileList={this.state.fileList} onChange={(value)=>{this.uploadChange(value)}}>
                      <Button type={'primary'} icon={<UploadOutlined />} disabled={this.state.fileList.length===0?false:true}>上传HTML文件</Button>
                    </Upload>
                  </Col>
                  <Button type={'primary'} onClick={()=>{this.setState({visible:1})}}>更改回收指南</Button>
                </Row>
                <Card style={{textAlign:'center'}} bordered={false}>
                  {/*<img alt="example" src={AD} style={{width:'600px'}}/>*/}
                  <div id="result" style={{width:'600px',margin:'auto'}}></div>
                </Card>
              </div>
              :
              <DraftEditor  parent={this}/> //父组件传值
          }
        </Card>
      </PageHeaderWrapper>
    )



  uploadHTML=(editorContent)=>{ //子组件传来html字符串，以file形式存储，上传到服务器
    let file = new Blob([editorContent]);
    const formData = new FormData();
    formData.append('configId',1);
    formData.append('files',file);
    fetch(rootPath+'/api/guide/uploadRecyclGuide',{
      method: 'post',
      body: formData,
    }).then(json=> {
      if(json.status===200) {
        message.success('更改成功！')
        this.getRecyclGuide();
        this.setVisible();
      }
      else{
        message.error('更改失败！')
      }
    })
    message.info('正在上传，请稍等！')
  }
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
//子组件
import React,{Component} from 'react'
import {Card, Button, Modal, message} from 'antd'
//引入相关组件
import {convertToRaw,EditorState,ContentState } from 'draft-js'
import {Editor} from 'react-draft-wysiwyg'
import draftToHtml from 'draftjs-to-html' //获取编辑器html内容
import htmlToDraft from 'html-to-draftjs' //将html内容转为编辑器显示内容
//引入样式
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import {rootPath} from "@/services/config/config";

export default class DraftEditor extends Component {
  constructor(props){
    super(props);
    this.state = {
      // editorState:  EditorState.createEmpty(),//创建一个空得富文本
      editorState: '',//创建一个空得富文本
    }
  }


  //初始化
  componentDidMount=()=> {
    const contentBlock = htmlToDraft(this.props.parent.state.html);
    const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    this.setState({editorState})
  };


  //编辑器发上内容发生变化时
  onEditorStateChange = (editorState)=>{
    // console.log(convertToRaw(editorState.getCurrentContent()))
    this.setState({
      editorState
    })
  }
  //获取内容变化值(暂时不用)
  onEditorChange = (editorContent) => {
    // console.log(JSON.stringify(editorContent));
    // console.log(editorContent);
    this.setState({
      editorContent
    });
  };
  //清空编辑器内容
  handleClearContent = ()=> {
    this.setState({
      editorState: ''
    })
  }

  //以富文本的方式保存，即以HTML格式的方式保存发送到后台
  saveAsHtml=()=>{
    let editorContent = draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
    editorContent = '<html lang="en"><head><meta charset="UTF-8"><title></title></head><body>' + editorContent + '</body></html>'
    // console.log(editorContent)
    this.props.parent.uploadHTML(editorContent)
  }


  uploadImageCallBack = file => new Promise(
    (resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let img = new Image();
      // let url = ''
      reader.onload = function (e) {
        img.src = this.result
        resolve({
          data: {
            link: img.src
          }
        })
      }
    }
  );

  render(){
    const { editorState, editorContent} = this.state;
    return(
      <div>
        <Card>
          <Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
          {/*<Button type="primary" onClick={this.handleGetHtml} style={{marginLeft:20}}>获取HTML文本</Button>*/}
          {/*<Button type="primary" onClick={this.handleGetJson} style={{marginLeft:20}}>获取JSON文本</Button>*/}
          <Button type="primary" onClick={this.saveAsHtml} style={{marginLeft:20}}>保存</Button>
          <Button type="primary" onClick={()=>{this.props.parent.getRecyclGuide();this.props.parent.setVisible();}} style={{marginLeft:20}}>取消</Button>
        </Card>
        <Card title="富文本编辑器">
          <Editor
            editorState={editorState}
            onContentStateChange={this.onEditorChange} //获取内容变化值
            onEditorStateChange={this.onEditorStateChange}  //编辑器状态发生变化时
            localization={{ locale: 'zh' }}
            toolbar={{
              image: {
                uploadEnabled: true,
                alignmentEnabled: true,
                uploadCallback: this.uploadImageCallBack,
                previewImage: true,
                inputAccept: 'image/*',
                alt: {present: false, mandatory: false}
              }
            }}
          />
        </Card>
      </div>
    )
  }
}