react+wangeditor+图片上传服务器

一、安装 wangeditor

1.1 python 环境

下载安装 python 2.x 版本

去官网 www.python.org 下载 2.7.18 版本，点击安装，整个安装过程十分简单，只有一个地方需要注意：设置自动添加环境变量

安装好之后，打开cmd，输入python，看到版本号即为成功

1.2 安装 wangeditor

npm install wangeditor --save

二、使用 wangeditor

2.1 引入

import E from "wangeditor";

2.2 组件封装–图片上传到阿里云+回显

import React, { Component } from "react";
import { Link, Router, history, connect, Dispatch } from "umi";
import E from "wangeditor";

class MyWangEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorContent: props.content ? props.content : "",
    };
  }

  componentDidMount() {
    this.initEditor();
  }

  // 初始化富文本编辑器
  initEditor = () => {
    const elemMenu = this.refs.editorElemMenu;
    const elemBody = this.refs.editorElemBody;
    const editor = new E(elemMenu, elemBody);
    // 1.输入change监听
    editor.customConfig.onchange = (html) => {
      console.log(`html`, editor.txt.html());
      this.setState(
        {
          editorContent: editor.txt.html(),
        },
        () => {
          // 将编辑内容传给父组件
          this.props.getContent(this.state.editorContent); // 向父组件传参
        }
      );
    };
    // 2.工具栏配置
    editor.customConfig.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      // 'video',  // 插入视频
      // 'code',  // 插入代码
      "undo", // 撤销
      "redo", // 重复
    ];
    // 3.组件自动上传图片配置-自定义上传到服务器见4
    // editor.customConfig.uploadImgShowBase64 = true
    // editor.customConfig.uploadImgServer = 'http://farmer-service.oss-cn-beijing.aliyuncs.com/' // 图片上传地址：服务器地址
    // editor.customConfig.uploadImgServer = 'F:/MyWorkPlace/upload' // 图片上传地址：静态地址本地地址，不允许访问本地文件地址
    // editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 图片大小3M
    editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024; // 图片大小3M
    editor.customConfig.uploadImgMaxLength = 5; // 图片数量最多5张
    editor.customConfig.uploadFileName = "editor_img"; // 自定义文件名
    // editor.customConfig.uploadImgTimeout = 50000 // 超时时间，默认10s
    // editor.customConfig.uploadImgParamsWithUrl = true // 如果需要将参数拼接到 url 中，进行这个配置
    // 4.自定义控制上传过程--上传到阿里云
    editor.customConfig.customUploadImg = (files, insert) => {
      for (let i = 0; i < files.length; i++) {
        const fileData = new FormData();
        fileData.append("file", files[i]);
        this.props
          .dispatch({
            type: "commentModal/imageUpload", // 上传请求接口
            payload: fileData, // 请求参数
          })
          .finally(() => {
            console.log(this.props.commentModal.imgStatus);
            if (this.props.commentModal.imgStatus.statusCode == 200) {
              insert(this.props.commentModal.imgStatus.data.fileUrl);
            }
          });
      }
    };
    // 5.创建实体
    editor.create();
    // 6.初始化内容
    editor.txt.html(this.state.editorContent); // 初始化内容
    // editor.txt.clear() // 清空编辑器--配合“取消”按钮
  };

  render() {
    return (
      <div className="shop">
        <div className="text-area">
          <div
            ref="editorElemMenu"
            style={{
              backgroundColor: "#f1f1f1",
              border: "1px solid #ccc",
              overflow: "scroll",
            }}
            className="editorElem-menu"
          ></div>
          <div
            style={{
              height: 300,
              border: "1px solid #ccc",
              borderTop: "none",
            }}
            ref="editorElemBody"
            className="editorElem-body"
          ></div>
        </div>
      </div>
    );
  }
}

// export default MyWangEditor;
export default connect(({ planMade, commentModal, loading }) => ({
  planMade,
  commentModal,
  loading: loading.effects["planMade/uploadEditorPhoto"],
}))(MyWangEditor);

2.3 在其他组件中引入和使用

import MyWangEditor from "../globalComponents/global-wangeditor";

{this.getContent}
  content={
    this.state.editData ? this.state.editData.content : ""
  }
  disabled={!this.state.editStatus && isEdit == "edit"}
/>