javascript - TinyMCE React 编辑器抛出 'Cannot set property ' onload' of null'

Question

我正在使用 react-tinymce 和 create-react-app(两者的最新版本)。

安装编辑器组件时出现以下错误:

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)

有问题的部分在 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() 返回 null。这只会间歇性地发生。有时编辑器会正确加载。我应该注意到我正在将编辑器集成到 react-redux-form 中, 作为 custom Control component .

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>
    );
}

我正在从 react-redux-form 连接到我的 redux 状态的 reducer 中初始化表单的值。 reducer 具有以下结构:

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;
    }
}

有时编辑器加载得很好，预填充了来自 reducer 的文章描述。这向我表明问题是异步的，并且当 TinyMCE 组件在从 react-redux-form reducer 接收到数据之前尝试挂载时就会发生。但是，我在 reducer 中设置了默认值，所以我不确定是否有其他原因导致了这个问题。

这是我对 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)}
    />
}

Answer 1

看起来 TinyMCE 有一个错误，它无法删除部分初始化的编辑器。我认为您的组件在安装后卸载得太快了。

该错误已在 TinyMCE 4.7.7 版中修复: https://github.com/tinymce/tinymce/blob/6b0075fdac4d190614de7d815d067b93300f029d/changelog.txt#L140