修复节点编辑和显示问题
- 添加convertHTMLToMarkdown函数,修复双击编辑节点时表格无法正常显示的问题 - 优化HTML到Markdown转换逻辑,支持表格、图片、文本格式的正确转换 - 修复图片显示问题:禁用代理URL转换,直接使用原始CDN URL - 解决思维导图视图中图片显示为markdown文本的问题 修复内容: 1. 双击编辑节点时:图片正常显示,表格现在也能正常显示 2. 思维导图视图时:图片现在能正常显示,表格继续正常显示
This commit is contained in:
parent
8b8ce52e3a
commit
68b0ba1ccf
Binary file not shown.
|
|
@ -445,6 +445,100 @@ const closeImagePreview = () => {
|
|||
imagePreviewError.value = '';
|
||||
};
|
||||
|
||||
// HTML转Markdown函数
|
||||
const convertHTMLToMarkdown = (html) => {
|
||||
if (!html || typeof html !== 'string') {
|
||||
return '';
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('🔄 开始转换HTML到Markdown:', html.substring(0, 100) + '...');
|
||||
|
||||
// 使用Vditor的html2md功能(如果可用)
|
||||
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, '')
|
||||
.replace(/<img[^>]*src="([^"]+)"[^>]*>/gi, '')
|
||||
// 换行与段落
|
||||
.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 });
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue