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