@ttk/component/es/quill/index.js

ttk组件库

import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, e as _assertThisInitialized, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import PropTypes from 'prop-types';
import React__default, { PureComponent } from 'react';
import '../_commonjsHelpers-471920d6.js';

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var ueditorPath = './vendor/ueditor';

var ReactUeditor = /*#__PURE__*/function (_PureComponent) {
  _inherits(ReactUeditor, _PureComponent);

  var _super = _createSuper(ReactUeditor);

  function ReactUeditor(props) {
    var _this;

    _classCallCheck(this, ReactUeditor);

    _this = _super.call(this, props);

    _this.createScript = function (url) {
      var scriptTags = window.document.querySelectorAll('script');
      var len = scriptTags.length;
      var i = 0;

      var _url = window.location.origin + url;

      return new Promise(function (resolve, reject) {
        for (i = 0; i < len; i++) {
          var src = scriptTags[i].src;

          if (src && src === _url) {
            scriptTags[i].parentElement.removeChild(scriptTags[i]);
          }
        }

        var node = document.createElement('script');
        node.src = url;
        node.onload = resolve;
        document.body.appendChild(node);
      });
    };

    _this.initEditor = function () {
      var _this$props = _this.props,
          config = _this$props.config,
          onChange = _this$props.onChange,
          value = _this$props.value,
          getRef = _this$props.getRef,
          onReady = _this$props.onReady;
      _this.ueditor = config ? window.UE.getEditor(_this.containerID, config) : window.UE.getEditor(_this.containerID);
      _this.ueditor._react_ref = _assertThisInitialized(_this);
      getRef && getRef(_this.ueditor);

      _this.ueditor.ready(function () {
        _this.ueditor.addListener('contentChange', function () {
          // 由 componentWillReceiveProps 导致的 contentChange 不需要通知父组件
          if (_this.isContentChangedByWillReceiveProps) {
            _this.isContentChangedByWillReceiveProps = false;
          } else {
            _this.content = _this.ueditor.getContent();
            onChange && onChange(_this.content);
          }
        });

        if (_this.isContentChangedByWillReceiveProps) {
          _this.isContentChangedByWillReceiveProps = false;

          _this.ueditor.setContent(_this.content);
        } else {
          _this.ueditor.setContent(value);
        }

        onReady && onReady();
      });
    };

    _this.content = props.value || ''; // 存储编辑器的实时数据，用于传递给父组件

    _this.ueditor = null;
    _this.isContentChangedByWillReceiveProps = false;
    _this.tempfileInput = null;
    _this.containerID = 'reactueditor' + Math.random().toString(36).substr(2);
    _this.fileInputID = 'fileinput' + Math.random().toString(36).substr(2);
    _this.pasteImageAmount = 0;
    _this.state = {
      extendControls: _this.props.extendControls ? _this.props.extendControls : []
    };
    return _this;
  }

  _createClass(ReactUeditor, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      if (!window.UE && !window.UE_LOADING_PROMISE) {
        window.UE_LOADING_PROMISE = this.createScript(ueditorPath + '/ueditor.config.js').then(function () {
          return _this2.props.debug ? _this2.createScript(ueditorPath + '/ueditor.all.js') : _this2.createScript(ueditorPath + '/ueditor.all.min.js');
        });
      }

      window.UE_LOADING_PROMISE.then(function () {
        _this2.tempfileInput = document.getElementById(_this2.fileInputID);

        _this2.initEditor();
      });
    }
    /**
     * 这里存在两种情况会改变编辑器的内容：
     * 1. 父组件初始化传递的 value。父组件 value 的获取是异步的，因此会触发一次 componentWillReceiveProps，这种情况不需要将更新再通知父组件
     * 2. 用户对编辑器进行编辑
     */

  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this3 = this;

      if ('value' in nextProps && this.props.value !== nextProps.value) {
        this.isContentChangedByWillReceiveProps = true;
        this.content = nextProps.value;

        if (this.ueditor) {
          this.ueditor.ready(function () {
            _this3.ueditor.setContent(nextProps.value);
          });
        }
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.ueditor) {
        this.ueditor.destroy();
      }
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("script", {
        id: this.containerID,
        name: this.containerID,
        type: "text/plain"
      }));
    }
  }]);

  return ReactUeditor;
}(PureComponent);

ReactUeditor.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  onReady: PropTypes.func,
  debug: PropTypes.bool,
  getRef: PropTypes.func
};
ReactUeditor.defaultProps = {
  value: '',
  multipleImagesUpload: false,
  extendControls: [],
  debug: false
};

export { ReactUeditor as default };