React TinyMCE的外部图像上传按钮

Question

我试图像这样制作一个外部图片上传按钮：

现在，我已经为TinyMCE定义了images_upload_handler用于其图像上传功能（如果我点击工具栏内的默认图像上传按钮，它已经正常运行）。如何通过单击此外部按钮来引用该处理函数？

我为外部图片上传按钮创建了一个单独的组件。我的TinyMCE组件看起来像这样（注意images_upload_handler）：

<TinyMCE
    className={this.props.className || ''}
    ref={this.props.editorRef}
    content={this.props.value}
    config={{
        setup: (editor) => {
        images_upload_handler: function (blobInfo, success, failure, progress) {
            // error out if max is reached
            const { maxAttachmentSizeBytes, attachments } = this.props;
            const file = blobInfo.blob();
            if (file.size > maxAttachmentSizeBytes || _.sum(_.map(attachments, f => isNaN(f.fileSize) ? 0 : parseInt(f.fileSize))) + file.size > maxAttachmentSizeBytes) {
                failure(I18n.t('Your email provider limits attachments to: ') + getFormattedSize(maxAttachmentSizeBytes));
                return;
            }

            window.tinymce.activeEditor._skinLoaded = true;
            let xhr, formData;
            const config = getConfig(this.props.env);

            }).catch(() => {
                window.tinymce.activeEditor.setContent(window.tinymce.activeEditor.getContent().replace(/<img.*?src="(data:|blob:).*?(>|\/>)/g, ''));
                failure('You are not logged in.');
            });
        }.bind(this),
........

Answer 1

让它发挥作用。我终于找到了图像上传按钮的onClick函数的路径：Window.tinyMCE.activeEditor.buttons.image.onclick。

{window.tinymce.activeEditor && this.props.showImageUpload &&
<div className="attachments-button" onClick={window.tinyMCE.activeEditor.buttons.image.onclick}>
<ImageIcon fill='#666666'/> <span id="attachment-label">{this.props.showLabel ? 'Upload an image' : ''}</span>
</div>}