小程序
小游戏
企业微信
微信支付
扫描小程序码分享
rich-text富文本渲染的img图片,如何长按显示底部【发送给朋友】【保存到相册】的菜单?
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
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({
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
});
console.error('编辑器内容更新失败', err);
// 即使编辑器更新失败,也要更新文件列表
this.setData({ fileList });
}
console.error('获取编辑器内容失败', err);
// 即使获取内容失败,也要更新文件列表
} else {
// 如果不是图片或编辑器上下文不存在,只更新文件列表
wx.showToast({ title: '文件已删除', icon: 'success' });
// 如果没有fileID,直接从本地列表中移除
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
可以先通过正则把所有图片找出来,然后给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; },
不支持
show-menu-by-longpress
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
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' });
}
},
可以先通过正则把所有图片找出来,然后给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; },不支持
show-menu-by-longpress