react project, server-side rendering, using tinymce rich text editor, loading asynchronously, then the development environment is no problem, and an error occurs after packaging.
is that all kinds of events are not successfully bound. Does any god know why there is nothing wrong with the development environment?
here is the configuration of 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-sharpL5-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 = `-sharp${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;
problem description
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)