收藏
回答

rich-text富文本渲染的img图片,如何长按显示底部【发送给朋友】【保存到相册】的菜单?

rich-text富文本渲染的img图片,如何长按显示底部【发送给朋友】【保存到相册】的菜单?

回答关注问题邀请回答
收藏

5 个回答

  • 范徐18010461620
    范徐18010461620
    10-10

     deleteFile(e) {

        const index = e.currentTarget.dataset.index;

        const fileList = [...this.data.fileList];

        const fileToDelete = fileList[index];

        

        // 检查是否是图片文件且在编辑器中有引用

        const isImageToRemove = fileToDelete.type === 'image' && fileToDelete.fileID;

        

        // 从fileID中提取文件名,用于更准确的匹配

        const fileName = fileToDelete.fileID ? fileToDelete.fileID.split('/').pop() : '';

        console.log('要删除的文件:', fileToDelete);

        console.log('提取的文件名:', fileName);

        

        // 如果有fileID(已上传到云端),先删除云端文件

        if (fileToDelete.fileID) {

          wx.cloud.deleteFile({

            fileList: [fileToDelete.fileID],

            success: res => {

              console.log('云端文件删除成功', res);

            },

            fail: err => {

              console.error('云端文件删除失败', err);

            },

            complete: () => {

              // 无论云端删除成功与否,都从本地列表中移除

              fileList.splice(index, 1);

              

              // 如果是图片且需要从编辑器中移除

              if (isImageToRemove && this.data.editorCtx) {

                // 获取编辑器当前内容

                this.data.editorCtx.getContents({

                  success: res => {

                    let currentContent = res.html;

                    console.log('编辑器原始内容:', res);

                    

                    // 改进正则表达式 - 只匹配文件名部分,忽略URL结构

                    // 使用字符串包含检查作为备选方案,更简单可靠

                    let updatedContent = currentContent;

                    

                    // 方案1:使用正则表达式(处理更复杂的HTML结构)

                    const imgRegex = new RegExp(

                      `<img[^>]*?${fileName}[^>]*?>`, 

                      'gi'

                    );

                    console.log('使用正则表达式:', imgRegex);

                    updatedContent = updatedContent.replace(imgRegex, '');

                    

                    // 强制清理可能残留的空白段落和换行

                    updatedContent = updatedContent

                      .replace(/<p>\s*<br>\s*<\/p>/gi, '') // 清理空段落

                      .replace(/<p><\/p>/gi, '')           // 清理无内容段落

                      .trim();                            // 清理首尾空白

                    

                    console.log('替换后内容:', updatedContent);

                    

                    // 更新编辑器内容 - 直接设置内容

                    this.data.editorCtx.setContents({

                      html: updatedContent,

                      success: () => {

                        console.log('编辑器内容更新成功');

                        

                        // 立即更新数据,不再等待重新获取内容

                        this.setData({

                          fileList,

                          content: updatedContent

                        });

                      },

                      fail: err => {

                        console.error('编辑器内容更新失败', err);

                        // 即使编辑器更新失败,也要更新文件列表

                        this.setData({ fileList });

                      }

                    });

                  },

                  fail: err => {

                    console.error('获取编辑器内容失败', err);

                    // 即使获取内容失败,也要更新文件列表

                    this.setData({ fileList });

                  }

                });

              } else {

                // 如果不是图片或编辑器上下文不存在,只更新文件列表

                this.setData({ fileList });

              }

              

              wx.showToast({ title: '文件已删除', icon: 'success' });

            }

          });

        } else {

          // 如果没有fileID,直接从本地列表中移除

          fileList.splice(index, 1);

          this.setData({ fileList });

          wx.showToast({ title: '文件已删除', icon: 'success' });

        }

      },

    10-10
    有用
    回复
  • 韭菜一枚
    韭菜一枚
    05-22

    可以先通过正则把所有图片找出来,然后给rich-text一个事件,预览图片,图片预览后就有长按事件了

      getImgSrcFromHTML(htmlContent) {
        var imgSrcRegex = /<img.*?src=['"](.*?)['"]/gi;
        var imgSrcArray = [];
        var match;
    
    
        while ((match = imgSrcRegex.exec(htmlContent)) !== null) {
          imgSrcArray.push(match[1]);
        }
    
    
        return imgSrcArray;
      },
    
    05-22
    有用
    回复 1
    • 甜言
      甜言
      08-25
      实现了是吗? 文本内容也想复制怎么办
      08-25
      回复
  • 小黎
    小黎
    2024-12-03

    2024-12-03
    有用
    回复
  • hello world
    hello world
    2024-12-02

    不支持

    2024-12-02
    有用
    回复
  • ㅤ
    2024-12-02

    show-menu-by-longpress

    2024-12-02
    有用
    回复 2
    • 赫巴
      赫巴
      2024-12-02
      没用,你这个是image标签的属性,富文本里不行
      2024-12-02
      回复
    • ㅤ
      2024-12-03回复赫巴
      不是image就别考虑了
      2024-12-03
      回复
登录 后发表内容