[英]TinyMCE React editor throws 'Cannot set property 'onload' of null'
I'm using react-tinymce with create-react-app (latest versions of both). 我正在使用react-tinymce和create-react-app(两者的最新版本)。
I'm getting the following error when the editor component mounts: 编辑器组件安装时出现以下错误:
uncaught at handleCall TypeError: Cannot set property 'onload' of null
at p.unbindAllNativeEvents (https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=s057mcau7lzqdzu5tu3vx99qiek91pkj0od7u00dbw6kuk65:18:2293)
at p.remove (https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=s057mcau7lzqdzu5tu3vx99qiek91pkj0od7u00dbw6kuk65:20:9142)
at Object.execCommand (https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=s057mcau7lzqdzu5tu3vx99qiek91pkj0od7u00dbw6kuk65:20:19531)
at Object._remove (http://localhost:3000/static/js/bundle.js:127305:27)
at Object.componentWillUnmount (http://localhost:3000/static/js/bundle.js:127245:10)
The section in question is in tinymce.js : 有问题的部分在tinymce.js中 :
unbindAllNativeEvents: function() {
var a, b = this;
if (b.delegates) {
for (a in b.delegates)
b.dom.unbind(d(b, a), a, b.delegates[a]);
delete b.delegates
}
b.inline || (b.getBody().onload = null,
b.dom.unbind(b.getWin()),
b.dom.unbind(b.getDoc())),
b.dom.unbind(b.getBody()),
b.dom.unbind(b.getContainer())
}
b.getBody()
is returning null. b.getBody()
返回null。 This only happens intermittently. 这只是间歇性地发生。 Sometimes the editor loads correctly. 有时编辑器正确加载。 I should note that I am integrating the editor into react-redux-form , as a custom Control
component . 我要指出,我整合到编辑反应,Redux的形式 ,作为自定义Control
组件 。
render(): React.Element {
return (
<div>
<input type="file" id="image-upload-tinymce" name="single-image" style={{ display: "none" }}
accept="image/png, image/gif, image/jpeg, image/jpg, image/svg" />
<UIForm
as={Form}
model={this.props.formModel}
onSubmit={(foo) => this.handleSubmit(foo)}
>
<Control
model={this.props.fieldModel}
component={TinyMCECustom}
mapProps={{
content: (props) => props.viewValue,
}}
updateContent={this.props.updateContent}
validators={{
required: val => val && val.length > 10
}}
/>
</UIForm>
</div>
);
}
I am initializing the value of the form from a reducer that react-redux-form
connects to my redux
state. 我正在从reducer中初始化表单的值, react-redux-form
连接到我的redux
状态。 The reducer has the following structure: 减速机具有以下结构:
export default function reducer(state = initialState, action) {
switch (action.type) {
case articleModule.GET_SUCCESS:
case articleModule.SAVE_SUCCESS: {
const article = action.payload.data;
return {
...state,
description: article.description || '',
uuid: article.uuid,
}
}
default:
return state;
}
}
Sometimes the editor loads just fine, prepopulating with the description of article from the reducer. 有时编辑器加载很好,预先填充减速器中的文章描述。 This suggests to me that the issue is asynchronous, and is happening when the TinyMCE component attempts to mount before it has received the data from the react-redux-form
reducer. 这告诉我,这个问题是异步的,当TinyMCE组件在从react-redux-form
reducer接收到数据之前尝试挂载时,就会发生这个问题。 I am setting default values in the reducer, however, so I'm not sure if something else is causing this issue. 我在reducer中设置默认值,但是,我不确定是否有其他因素导致此问题。
This is my implementation of TinyMCECustom
: 这是我对TinyMCECustom
实现:
const filePickerCallback = (callback, value, meta) => {
if (meta.filetype !== 'image') {
return;
}
let input = document.getElementById('image-upload-tinymce');
input.click();
input.onchange = () => {
let file = input.files[0];
let reader = new FileReader();
reader.onload = (e) => {
let img = new Image();
img.src = reader.result;
callback(e.target.result, {
alt: file.name
});
};
reader.readAsDataURL(file);
};
}
const handleEditorChange = (e, props) => {
props.updateContent(e.target.getContent());
};
const handleOnBlur = (e, props) => {
props.updateContent(e.target.getContent());
}
const handleOnKeyup = (e, props) => {
const updateContent = _.debounce(() => props.updateContent(e.target.innerHTML), 300);
updateContent();
}
const TinyMCECustom = (props) => {
return <TinyMCE
content={props.content}
config={{
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
image_advtab: true,
file_browser_callback_types: 'image',
file_picker_callback: filePickerCallback,
branding: false,
height: 400,
}}
{...props}
onChange={(e) => handleEditorChange(e, props)}
onBlur={(e) => handleOnBlur(e, props)}
onKeyup={(e) => handleOnKeyup(e, props)}
/>
}
It looks like TinyMCE had a bug where it failed to remove a partially initialized editor. 看起来TinyMCE有一个错误,它无法删除部分初始化的编辑器。 I think your component is being unmounted too soon after being mounted. 我认为您的组件在安装后会很快卸载。
The bug was fixed in TinyMCE version 4.7.7: https://github.com/tinymce/tinymce/blob/6b0075fdac4d190614de7d815d067b93300f029d/changelog.txt#L140 该错误已在TinyMCE版本4.7.7中修复: https : //github.com/tinymce/tinymce/blob/6b0075fdac4d190614de7d815d067b93300f029d/changelog.txt#L140
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.