修复节点编辑和显示问题

- 添加convertHTMLToMarkdown函数,修复双击编辑节点时表格无法正常显示的问题
- 优化HTML到Markdown转换逻辑,支持表格、图片、文本格式的正确转换
- 修复图片显示问题:禁用代理URL转换,直接使用原始CDN URL
- 解决思维导图视图中图片显示为markdown文本的问题

修复内容:
1. 双击编辑节点时:图片正常显示,表格现在也能正常显示
2. 思维导图视图时:图片现在能正常显示,表格继续正常显示
This commit is contained in:
lixinran 2025-10-15 15:29:49 +08:00
parent 8b8ce52e3a
commit 68b0ba1ccf
3 changed files with 100 additions and 3 deletions

Binary file not shown.

View File

@ -445,6 +445,100 @@ const closeImagePreview = () => {
imagePreviewError.value = '';
};
// HTMLMarkdown
const convertHTMLToMarkdown = (html) => {
if (!html || typeof html !== 'string') {
return '';
}
try {
console.log('🔄 开始转换HTML到Markdown:', html.substring(0, 100) + '...');
// 使Vditorhtml2md
if (typeof Vditor?.html2md === 'function') {
const markdown = Vditor.html2md(html);
console.log('✅ 使用Vditor.html2md转换成功:', markdown.substring(0, 100) + '...');
return markdown;
}
// 退
console.log('⚠️ Vditor.html2md不可用使用简单转换逻辑');
let markdown = html
// -
.replace(/<table[^>]*>/gi, '\n')
.replace(/<\/table>/gi, '\n')
.replace(/<thead[^>]*>/gi, '')
.replace(/<\/thead>/gi, '')
.replace(/<tbody[^>]*>/gi, '')
.replace(/<\/tbody>/gi, '')
.replace(/<tr[^>]*>/gi, '')
.replace(/<\/tr>/gi, ' |\n')
.replace(/<th[^>]*>/gi, '| ')
.replace(/<\/th>/gi, ' ')
.replace(/<td[^>]*>/gi, '| ')
.replace(/<\/td>/gi, ' ')
//
.replace(/<img[^>]*src="([^"]+)"[^>]*alt="([^"]*)"[^>]*>/gi, '![$2]($1)')
.replace(/<img[^>]*src="([^"]+)"[^>]*>/gi, '![]($1)')
//
.replace(/<br\s*\/?>/gi, '\n')
.replace(/<\/p>/gi, '\n\n')
.replace(/<p[^>]*>/gi, '')
//
.replace(/<strong>(.*?)<\/strong>/gi, '**$1**')
.replace(/<b>(.*?)<\/b>/gi, '**$1**')
.replace(/<em>(.*?)<\/em>/gi, '*$1*')
.replace(/<i>(.*?)<\/i>/gi, '*$1*')
//
.replace(/<ul[^>]*>/gi, '\n')
.replace(/<\/ul>/gi, '\n')
.replace(/<li[^>]*>/gi, '- ')
.replace(/<\/li>/gi, '\n')
//
.replace(/<[^>]+>/g, '')
//
.replace(/\n{3,}/g, '\n\n')
.trim();
// - 线
const lines = markdown.split('\n');
const processedLines = [];
let inTable = false;
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
if (line.includes('|') && line.trim().length > 0) {
if (!inTable) {
inTable = true;
processedLines.push(line);
// 线
const headerCells = line.split('|').filter(cell => cell.trim());
if (headerCells.length > 0) {
const separator = '| ' + headerCells.map(() => '---').join(' | ') + ' |';
processedLines.push(separator);
}
} else {
processedLines.push(line);
}
} else {
if (inTable) {
inTable = false;
}
processedLines.push(line);
}
}
markdown = processedLines.join('\n');
console.log('✅ 简单转换逻辑完成:', markdown.substring(0, 100) + '...');
return markdown;
} catch (error) {
console.error('❌ HTML转Markdown失败:', error);
return html; // HTML
}
};
//
const openRichTextEditor = (nodeObj, nodeElement) => {
console.log('📝 打开富文本编辑器:', { nodeObj, nodeElement });

View File

@ -53,10 +53,13 @@ renderer.image = function(href, title, text) {
// 处理图片URL确保能正确显示
let processedUrl = hrefStr;
// 暂时禁用代理URL转换直接使用原始URL
// 这样可以避免代理服务配置问题导致的图片显示异常
if (hrefStr.includes('cdn-mineru.openxlab.org.cn')) {
// 将外部CDN URL转换为代理URL
const urlPath = hrefStr.replace('https://cdn-mineru.openxlab.org.cn', '');
processedUrl = `/proxy-image${urlPath}`;
// 直接使用原始URL不进行代理转换
processedUrl = hrefStr;
console.log('🖼️ 使用原始CDN URL:', processedUrl);
}
// 生成图片HTML