From 766f9fa745efbee13db4758dd6f30b81e974709d Mon Sep 17 00:00:00 2001 From: shaohuzhang1 Date: Thu, 7 Nov 2024 15:36:34 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E4=B8=AD=E8=A1=A8=E6=A0=BC=E4=B8=AD=E5=9B=BE=E7=89=87=E6=97=B6?= =?UTF-8?q?=E5=87=BA=E7=8E=B0=E9=94=99=E4=BD=8D=20#1561?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit 8a0c20496182d7f25b330e0d3698b42008762fcc) --- ui/src/assets/load_error.png | Bin 0 -> 11156 bytes ui/src/components/markdown/MdRenderer.vue | 55 +++++----------------- 2 files changed, 12 insertions(+), 43 deletions(-) create mode 100644 ui/src/assets/load_error.png diff --git a/ui/src/assets/load_error.png b/ui/src/assets/load_error.png new file mode 100644 index 0000000000000000000000000000000000000000..695abfd885e460f29d7a47ce4fef571d9ecbc4cf GIT binary patch literal 11156 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 literal 0 HcmV?d00001 diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue index ec7f03fac..517a3bc56 100644 --- a/ui/src/components/markdown/MdRenderer.vue +++ b/ui/src/components/markdown/MdRenderer.vue @@ -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) => { - 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) => { return result .map((item) => split_quick_question_(item))