@51yzone/pc-components/es/editor/editor.js

An enterprise-class UI design language and React-based implementation

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
/**
 * 关键字：富文本编辑
 * 新增人：徐友万
 * 完善中
 */


import React, { useEffect, useState } from 'react';
import BraftEditor from 'braft-editor';
import classnames from 'classnames';
import EditorPreview from './editor-preview';
import 'braft-editor/dist/index.css'; // 富文本数据是否初始化

var init = false; // 上传到服务端的排序号

var order = 0;

var Editor = function Editor(props) {
  var value = props.value,
      request = props.request,
      action = props.action,
      data = props.data,
      prefixCls = props.prefixCls,
      className = props.className,
      style = props.style,
      onChange = props.onChange,
      rest = __rest(props, ["value", "request", "action", "data", "prefixCls", "className", "style", "onChange"]); // 富文本


  var _useState = useState(BraftEditor.createEditorState(value)),
      _useState2 = _slicedToArray(_useState, 2),
      editorState = _useState2[0],
      setEditorState = _useState2[1]; // 富文本预览


  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      previewVisible = _useState4[0],
      setPreviewVisible = _useState4[1]; // onChange


  var handleEditorChange = function handleEditorChange(newEditorState) {
    if (init || !init && value === '<p></p>') {
      init = true;
      setEditorState(newEditorState);
      var changeValue = newEditorState.toHTML() === '<p></p>' ? '' : newEditorState.toHTML();
      onChange(changeValue);
    }
  }; // 富文本预览


  var extendControls = [{
    key: 'preview-button',
    type: 'button',
    text: '预览',
    onClick: function onClick() {
      return setPreviewVisible(true);
    }
  }]; // 自定义媒体

  var media = {
    uploadFn: function uploadFn(_ref) {
      var file = _ref.file,
          progress = _ref.progress,
          error = _ref.error,
          success = _ref.success;
      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var baseRequestForm;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                // 自定义上传
                baseRequestForm = request.requestForm.bind(request);
                order += 1;
                baseRequestForm(action, _extends({
                  file: file,
                  order: order
                }, data), {
                  onUploadProgress: function onUploadProgress(_ref2) {
                    var total = _ref2.total,
                        loaded = _ref2.loaded;
                    progress(loaded / total * 100);
                  }
                }).then(function (res) {
                  var newRes = res.value || res.valueObj || {};
                  var _newRes$imageUrl = newRes.imageUrl,
                      imageUrl = _newRes$imageUrl === void 0 ? '' : _newRes$imageUrl,
                      _newRes$attachUrl = newRes.attachUrl,
                      attachUrl = _newRes$attachUrl === void 0 ? '' : _newRes$attachUrl,
                      _newRes$attachId = newRes.attachId,
                      attachId = _newRes$attachId === void 0 ? '' : _newRes$attachId;
                  res.url = imageUrl || attachUrl;
                  res.uid = attachId;
                  res.width = '100%';
                  res.height = 'auto';
                  success(res);
                })["catch"](error);

              case 3:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
    }
  };
  useEffect(function () {
    if (!init && value !== '<p></p>') {
      setEditorState(BraftEditor.createEditorState(value));
      init = true;
    }
  }, [value]);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BraftEditor, _extends({
    className: classnames(className, "".concat(prefixCls, "-wrapper")),
    style: style,
    contentStyle: {
      boxShadow: 'inset 0 1px 3px rgba(0,0,0,.1)'
    },
    contentClassName: "editor-content",
    extendControls: extendControls,
    media: media,
    value: editorState,
    onChange: handleEditorChange
  }, rest)), /*#__PURE__*/React.createElement(EditorPreview, {
    value: editorState.toHTML(),
    visible: previewVisible,
    onCancel: function onCancel() {
      return setPreviewVisible(false);
    }
  }));
};

Editor.defaultProps = {
  value: '<p></p>',
  data: {},
  prefixCls: 'yz-editor',
  className: '',
  style: {}
};
export default Editor;