index.jsx 2.71 KB
Newer Older
wuhao's avatar
wuhao committed
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
import "braft-editor/dist/index.css";
import BraftEditor from "braft-editor";
import React, { useState, useMemo, useEffect } from "react";
import moment from "moment";

export default function Editor({
  value,
  onChange,
  height,
  rerender,
  serverURL,
  style,
  bordered,
}) {
  let [editorState, ceditor] = useState(
      BraftEditor.createEditorState(
        '<p style="text-align:start;" size="0" _root="undefined" __ownerID="undefined" __hash="undefined" __altered="false"></p>'
      )
    ),
    [defaultvalue, cd] = useState(true);

  let handleChange = (editorState) => {
    ceditor(editorState);
    onChange(editorState.toHTML());
  };

  let UploadFn = (param) => {
    const xhr = new XMLHttpRequest();
    const fd = new FormData();
    const successFn = (response) => {
      // 假设服务端直接返回文件上传后的地址
      // 上传成功后调用param.success并传入上传后的文件地址
      param.success({
        url: xhr.responseText
          ? JSON.parse(xhr.responseText).data?.dataList[0].url
          : null,
        meta: {
          id: moment(),
          title: param.file.name,
          alt: param.file.name,
          loop: true, // 指定音视频是否循环播放
          autoPlay: true, // 指定音视频是否自动播放
          controls: true, // 指定音视频是否显示控制栏
          poster: "http://xxx/xx.png", // 指定视频播放器的封面
        },
      });
    };
    const progressFn = (event) => {
      // 上传进度发生变化时调用param.progress
      param.progress((event.loaded / event.total) * 100);
    };
    const errorFn = (response) => {
      // 上传发生错误时调用param.error
      param.error({
        msg: "上传失败",
      });
    };
    xhr.upload.addEventListener("progress", progressFn, false);
    xhr.addEventListener("load", successFn, false);
    xhr.addEventListener("error", errorFn, false);
    xhr.addEventListener("abort", errorFn, false);
    fd.append("file", param.file);
    xhr.open(
      "POST",
      serverURL ? serverURL : window?.dataconfig?.serverURL,
      true
    );
    xhr.send(fd);
  };

  useEffect(() => {
    if (rerender) {
      cd(rerender);
    }
  }, [rerender]);

  useEffect(() => {
    if (value && defaultvalue) {
      ceditor(BraftEditor.createEditorState(value));
      cd(false);
    }
  }, [value]);

  return (
    <div
      style={{
        ...style,
        border: bordered === false ? "#f9f9f9 solid 1px" : "#ddd solid 1px",
        border: "#ddd solid 1px",
        height: height ? height : 400,
        overflow: "hidden",
      }}
    >
      <BraftEditor
        media={{ uploadFn: UploadFn }}
        value={editorState}
        onChange={handleChange}
      />
    </div>
  );
}