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初始化表单的值。减速机具有以下结构：

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

TinyMCE React编辑器抛出＆＃39;无法设置属性＆＃39; onload＆＃39; of null＆＃39;

1 个答案: