Tinymce 异步加载之后打包出现问题

Question

react工程，服务端渲染，使用tinymce富文本编辑器，方式是异步加载，然后开发环境没有问题，打包过后出现报错。

就是各种事件都没有绑定成功。有没有大神知道是为什么，开发环境没有问题~
下面是tinymce的配置：

import React, { PropTypes } from 'react';
import assign from 'object-assign';
import util from './util';
import EditorConfig from './editorConfig';
// Include all of the Native DOM and custom events from:
// https://github.com/tinymce/tinymce/blob/master/tools/docs/tinymce.Editor.js#L5-L12
const EVENTS = [
  'click', 'dblclick', 'mousedown', 'mouseup',
  'mousemove', 'mouseover', 'beforepaste', 'paste', 'cut', 'copy',
  'selectionchange', 'mouseout', 'mouseenter', 'mouseleave', 'keydown',
  'keypress', 'keyup', 'contextmenu', 'dragend', 'dragover', 'draggesture',
  'dragdrop', 'drop', 'drag', 'BeforeRenderUI', 'SetAttrib', 'PreInit',
  'PostRender', 'init', 'deactivate', 'activate', 'NodeChange',
  'BeforeExecCommand', 'ExecCommand', 'show', 'hide', 'ProgressState',
  'LoadContent', 'SaveContent', 'BeforeSetContent', 'SetContent',
  'BeforeGetContent', 'GetContent', 'VisualAid', 'remove', 'submit', 'reset',
  'BeforeAddUndo', 'AddUndo', 'change', 'undo', 'redo', 'ClearUndos',
  'ObjectSelected', 'ObjectResizeStart', 'ObjectResized', 'PreProcess',
  'PostProcess', 'focus', 'blur',
];

// Note: because the capitalization of the events is weird, we're going to get
// some inconsistently-named handlers, for example compare:
// 'onMouseleave' and 'onNodeChange'
const HANDLER_NAMES = EVENTS.map(event => `on${util.uc_first(event)}`);


class Tinymce extends React.Component {
  componentWillMount() {
    if (typeof window.tinymce !== 'object') {
      console.warn('TinyMCE is not found in global, init failed');
    }
    this.id = this.id || util.uuid();
  }

  componentDidMount() {
    this.init(this.props.config);
  }


  componentWillReceiveProps(nextProps) {
    if (!util.isEqual(nextProps.config, this.props.config)) {
      this.init(nextProps.config, nextProps.content);
    }
    if (nextProps.content !== this.props.content && window.tinymce) {
      if (!this.isInited) {
        this.contentToBeSet = nextProps.content;
      }
    }
  }

  shouldComponentUpdate(nextProps) {
    return (
      !util.isEqual(this.props.content, nextProps.content) ||
      !util.isEqual(this.props.config, nextProps.config)
    );
  }

  componentWillUnmount() {
    this.remove();
  }

  setTinymceContent = (value) => {
    const editor = window.tinymce.get(this.id);
    editor.setContent(value);
    editor.selection.select(editor.getBody(), true);
    editor.selection.collapse(false);
  }

  saveRef = refName => (c) => {
    this[refName] = c;
  }

  resetValue = (value) => {
    if (this.setValueTimer) {
      clearTimeout(this.setValueTimer);
    }
    this.setValueTimer = setTimeout(() => {
      if (this.isInited) {
        this.setTinymceContent(value);
      } else {
        this.contentToBeSet = value;
      }
    }, this.props.changeDelay);
  }

  init = (config, content) => {
    if (this.isInited) {
      this.remove();
    }
    // hide the textarea until init finished
    this.root.style.visibility = 'hidden';
    const trueConfig = assign({}, EditorConfig, config);
    trueConfig.selector = `#${this.id}`;
    if (!trueConfig.language) {
      trueConfig.language = 'zh_CN';
    }
    trueConfig.setup = (editor) => {
      EVENTS.forEach((event, index) => {
        const handler = this.props[HANDLER_NAMES[index]];
        if (typeof handler !== 'function') return;
        editor.on(event, (e) => {
          // native DOM events don't have access to the editor so we pass it here
          handler(e, editor);
        });
      });
      // need to set content here because the textarea will still have the
      // old `this.props.content`
      editor.on('init', () => {
        this.isInited = true;
        editor.execCommand('fontName', false, 'Microsoft YaHei');
        editor.execCommand('fontSize', false, '12pt');
        if (this.contentToBeSet) {
          editor.setContent(this.contentToBeSet);
        } else if (content) {
          editor.setContent(content);
        }
      });
    };
    window.tinymce.baseURL = 'https://g.alicdn.com/platform/c/tinymce/4.3.12';
    window.tinymce.init(trueConfig);
    this.root.style.visibility = '';
  }

  remove = () => {
    window.tinymce.EditorManager.execCommand('mceRemoveEditor', true, this.id);
    this.isInited = false;
  }

  render() {
    return (
      <textarea
        ref={this.saveRef('root')}
        id={this.id} defaultValue={this.props.content}
        placeholder={this.props.placeholder}
      />
    );
  }
}

Tinymce.defaultProps = {
  config: {},
  changeDelay: 500,
};


// http://facebook.github.io/react/docs/reusable-components.html
Tinymce.propTypes = {
  config: PropTypes.object,
  /* eslint-disable */
  placeholder: PropTypes.string,
  content: PropTypes.string,
  changeDelay: PropTypes.number,
};

// add handler propTypes
HANDLER_NAMES.forEach((name) => {
  Tinymce.propTypes[name] = PropTypes.func;
});

Tinymce.displayName = 'Tinymce';

export default Tinymce;

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

已解决

1. 列表项目