15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 修复对话中表格中图片时出现错位 #1561 

(cherry picked from commit 8a0c204961)
This commit is contained in:
shaohuzhang1 2024-11-07 15:36:34 +08:00
parent cf66e33c58
commit 766f9fa745
2 changed files with 12 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ui/src/assets/load_error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

55
ui/src/components/markdown/MdRenderer.vue
View File

@ -32,6 +32,17 @@ import HtmlRander from './HtmlRander.vue'
import EchartsRander from './EchartsRander.vue'
config({
markdownItConfig(md) {
md.renderer.rules.image = (tokens, idx, options, env, self) => {
tokens[idx].attrSet('style', 'display:inline-block;min-height:33px;padding:0;margin:0')
if (tokens[idx].content) {
tokens[idx].attrSet('title', tokens[idx].content)
}
tokens[idx].attrSet(
'onerror',
'this.src="/ui/assets/load_error.png";this.onerror=null;this.height="33px"'
)
return md.renderer.renderToken(tokens, idx, options)
}
md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
tokens[idx].attrSet('target', '_blank')
return md.renderer.renderToken(tokens, idx, options)
@ -52,51 +63,9 @@ const props = withDefaults(
const editorRef = ref()
const md_view_list = computed(() => {
const temp_source = props.source
const temp_md_img_list = temp_source.match(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
const md_img_list = temp_md_img_list ? temp_md_img_list.filter((i) => i) : []
const split_img_value = temp_source
.split(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
.filter((item) => item !== undefined)
.filter((item) => !md_img_list?.includes(item))
const result = Array.from(
{ length: md_img_list.length + split_img_value.length },
(v, i) => i
).map((index) => {
if (index % 2 == 0) {
return split_img_value[Math.floor(index / 2)]
} else {
return md_img_list[Math.floor(index / 2)]
}
})
return split_echarts_rander(split_html_rander(split_quick_question(split_md_img(result))))
return split_echarts_rander(split_html_rander(split_quick_question([temp_source])))
})
const split_md_img = (result: Array<string>) => {
return result
.map((item) => split_md_img_(item))
.reduce((x: any, y: any) => {
return [...x, ...y]
}, [])
}
const split_md_img_ = (source: string) => {
const temp_md_img_list = source.match(/(!\[.*?\]\(.*?\){.*?})|(!\[.*?\]\(.*?\))/g)
const md_img_list = temp_md_img_list ? temp_md_img_list.filter((i) => i) : []
const split_img_value = source
.split(/(!\[.*?\]\(.*?\){.*?})|(!\[.*?\]\(.*?\))/g)
.filter((item) => item !== undefined)
.filter((item) => !md_img_list?.includes(item))
const result = Array.from(
{ length: md_img_list.length + split_img_value.length },
(v, i) => i
).map((index) => {
if (index % 2 == 0) {
return split_img_value[Math.floor(index / 2)]
} else {
return md_img_list[Math.floor(index / 2)]
}
})
return result
}
const split_quick_question = (result: Array<string>) => {
return result
.map((item) => split_quick_question_(item))