react native 富文本编辑器如何实现图片上传并展示进度

[chris4010]

请问，react native 富文本编辑器如何实现图片上传并展示进度，具体效果类似 知乎 的文章发布中图片选择的效果。

目前的实现主要是使用https://github.com/wxik/react-native-rich-editor， 选择图片后，使用insertHTML 插入一个占位图，每当获取上传进度时通过commandDOM 修改占位图的上传进度展示，上传完成后，使用commandDOM删除占位图并插入图片。

目前遇到的问题时，这种实现会和编辑器的undo和redo的交互出现问题，会把占位图展示出来。

请问是否有合适的解决方法，或在编辑器中实现图片上传进度的方法。谢谢

大体的代码如下： `

/**

• 触发自动上传
• @param mediaItem
• @param config

• @private */ private async autoUpload(mediaItem: MediaItem, config: CustomConfig) { if (!this.richEditorRef?.current) { Log.warn("未绑定编辑器"); return; } // 维护一个 占位图的 id const tempImageId = "autoUpload-image-" + uuid.v4().toString(); // 先插入一个占位 视图 this.insertStubImage(tempImageId, mediaItem); // 上传图片 await this.handleImageUpload(tempImageId, mediaItem, config); // 监听上传进度，并修改占位图样式 // 上传成功后，删除占位图，替换为正式图片，触发成功回调 // 上传异常，修改占位图样式，触发错误回调 }

  /**

• 插入占位图
• @param tempImageId
• @param mediaItem

• @private */ private insertStubImage(tempImageId: string, mediaItem: MediaItem) { if (!this.richEditorRef?.current) { Log.warn("未绑定编辑器"); return; } this.richEditorRef.current.insertHTML(`

  

  ${RichEditorMediaUtil.progressSvg}

  ${RichEditorMediaUtil.errorSvg}

  加载失败

  ${RichEditorMediaUtil.deleteBtnSvg}

                                                  </div>
                                              </div>
                                             `);

  }

  /**

• 处理图片的自动上传
• @param tempImageId
• @param mediaItem
• @param config
• @private / private async handleImageUpload(tempImageId: string, mediaItem: MediaItem, config: CustomConfig) { if (!this.richEditorRef?.current) { Log.warn("未绑定编辑器"); return; } // 如果图片已上传，则不在处理 if (mediaItem.path.startsWith("http:")) { return; } // 构建上传资源 const res = await buildImageSources([mediaItem.path]); const uploaderServer = MediaConfigStore.config.uploader.server; const server = ObjectUtil.isString(uploaderServer) ? uploaderServer : ${MediaConfigStore.config.uploader.server.uploadUrl}/${MediaConfigStore.config.gid}${MediaConfigStore.config.uploader.server.uploadUrlSuffix}; Uploader.getInstance().uploadImages( server, config.businessType || RichEditorMediaUtil.IMAGE_DEFAULT_BUSINESS_TYPE, res ).progress(((sent, total) => { // 处理上传进度 let progress = sent / total; progress = Math.floor((progress > 1 ? 1 : progress) 100); if (this.richEditorRef?.current) { this.richEditorRef?.current.commandDOM( let node = $('#${tempImageId}').lastElementChild?.children[1]; node.style.display = 'block'; let node2 = $('#${tempImageId}').lastElementChild?.children[2]; node2.style.display = 'none'; let progressLen = 314; const textDom = node.getElementsByClassName('text')[0]; const circleDom = node.getElementsByClassName('circle')[0]; circleDom.style['stroke-dashoffset'] = progressLen - (progressLen / 100) * ${progress}; textDom.innerHTML = ${progress}; ); } })).then(resp => { const url = resp.get(mediaItem.path); if (url) { if (this.richEditorRef?.current) { this.richEditorRef?.current.commandDOM( if(!$('#${tempImageId}')){ return; } let node = $('#${tempImageId}').lastElementChild?.children[1]; node.style.display = 'none'; let node2 = $('#${tempImageId}').lastElementChild?.children[2]; node2.style.display = 'none'; document.getSelection().setPosition($('#${tempImageId}').parentElement); $('#${tempImageId}').parentElement.style.display = 'none'; document.execCommand('insertImage', false, '${url.downLink}'); ); // this.richEditorRef.current.insertImage(url.downLink); setTimeout(() => { this.richEditorRef?.current?.sendAction("UPDATE_HEIGHT"); }, 1000); } } }).catch((e) => { if (this.richEditorRef?.current) { this.richEditorRef?.current.commandDOM( let node = $('#${tempImageId}').lastElementChild?.children[1]; node.style.display = 'none'; let node2 = $('#${tempImageId}').lastElementChild?.children[2]; node2.style.display = 'block'; ); } }); }

`

[github-actions[bot]]

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.