diff --git a/dev/App.tsx b/dev/App.tsx
index 23a6fd9b..775ffafb 100644
--- a/dev/App.tsx
+++ b/dev/App.tsx
@@ -47,13 +47,13 @@ export default defineComponent({
lang={lang.value}
/>
- {/*
+
*/}
+ />
);
diff --git a/packages/MdEditor/composition.ts b/packages/MdEditor/composition.ts
index e0b6d947..8d575d6b 100644
--- a/packages/MdEditor/composition.ts
+++ b/packages/MdEditor/composition.ts
@@ -1,4 +1,5 @@
import { reactive, watch, computed, onMounted, provide, ref, Ref, useId } from 'vue';
+import { deepClone, deepMerge } from '@vavt/util';
import {
InnerError,
SettingType,
@@ -34,7 +35,7 @@ import {
} from '~/static/event-name';
import bus from '~/utils/event-bus';
import { ContentExposeParam } from './layouts/Content/type';
-import { deepClone, deepMerge } from '@vavt/util';
+import { CDN_IDS } from './static';
/**
* 处理保存逻辑，主要是需要异步返回编译后的html
@@ -263,12 +264,12 @@ export const useExpansion = (props: EditorProps) => {
...css,
rel: 'stylesheet',
href: editorExtensions.cropper!.css,
- id: `${prefix}-cropperCss`
+ id: CDN_IDS.croppercss
});
appendHandler('script', {
...js,
src: editorExtensions.cropper!.js,
- id: `${prefix}-cropper`
+ id: CDN_IDS.cropperjs
});
}
@@ -278,7 +279,7 @@ export const useExpansion = (props: EditorProps) => {
appendHandler('script', {
...standaloneJs,
src: editorExtensions.prettier!.standaloneJs,
- id: `${prefix}-prettier`
+ id: CDN_IDS.prettier
});
}
@@ -288,7 +289,7 @@ export const useExpansion = (props: EditorProps) => {
appendHandler('script', {
...parserMarkdownJs,
src: editorExtensions.prettier!.parserMarkdownJs,
- id: `${prefix}-prettierMD`
+ id: CDN_IDS.prettierMD
});
}
});
diff --git a/packages/MdEditor/layouts/Content/composition/useHighlight.ts b/packages/MdEditor/layouts/Content/composition/useHighlight.ts
index 6265fdeb..2a6bbde0 100644
--- a/packages/MdEditor/layouts/Content/composition/useHighlight.ts
+++ b/packages/MdEditor/layouts/Content/composition/useHighlight.ts
@@ -1,7 +1,8 @@
import { ComputedRef, inject, onMounted, shallowRef, watch } from 'vue';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
import { appendHandler, updateHandler } from '~/utils/dom';
import { ContentPreviewProps } from '../ContentPreview';
+import { CDN_IDS } from '~/static';
/**
* 注册代码高亮扩展到页面
@@ -26,13 +27,13 @@ const useHighlight = (props: ContentPreviewProps) => {
appendHandler('link', {
...highlight.value.css,
rel: 'stylesheet',
- id: `${prefix}-hlCss`
+ id: CDN_IDS.hlcss
});
appendHandler(
'script',
{
...highlight.value.js,
- id: `${prefix}-hljs`,
+ id: CDN_IDS.hljs,
onload() {
hljsRef.value = window.hljs;
}
@@ -52,7 +53,7 @@ const useHighlight = (props: ContentPreviewProps) => {
updateHandler('link', {
...highlight.value.css,
rel: 'stylesheet',
- id: `${prefix}-hlCss`
+ id: CDN_IDS.hlcss
});
}
);
diff --git a/packages/MdEditor/layouts/Content/composition/useKatex.ts b/packages/MdEditor/layouts/Content/composition/useKatex.ts
index e09e104d..7336ce83 100644
--- a/packages/MdEditor/layouts/Content/composition/useKatex.ts
+++ b/packages/MdEditor/layouts/Content/composition/useKatex.ts
@@ -1,7 +1,8 @@
import { onMounted, shallowRef } from 'vue';
-import { prefix, configOption } from '~/config';
+import { configOption } from '~/config';
import { appendHandler } from '~/utils/dom';
import { ContentPreviewProps } from '../ContentPreview';
+import { CDN_IDS } from '~/static';
/**
* 注册katex扩展到页面
@@ -23,7 +24,7 @@ const useKatex = (props: ContentPreviewProps) => {
'script',
{
src: editorExtensions.katex!.js,
- id: `${prefix}-katex`,
+ id: CDN_IDS.katexjs,
onload() {
katex.value = window.katex;
}
@@ -34,7 +35,7 @@ const useKatex = (props: ContentPreviewProps) => {
appendHandler('link', {
rel: 'stylesheet',
href: editorExtensions.katex!.css,
- id: `${prefix}-katexCss`
+ id: CDN_IDS.katexcss
});
});
diff --git a/packages/MdEditor/layouts/Content/composition/useMermaid.ts b/packages/MdEditor/layouts/Content/composition/useMermaid.ts
index 51156370..95613107 100644
--- a/packages/MdEditor/layouts/Content/composition/useMermaid.ts
+++ b/packages/MdEditor/layouts/Content/composition/useMermaid.ts
@@ -1,8 +1,9 @@
import { watch, inject, ComputedRef, onMounted, shallowRef, Ref } from 'vue';
+import { randomId } from '@vavt/util';
import { prefix, configOption } from '~/config';
import { appendHandler } from '~/utils/dom';
-import { randomId } from '@vavt/util';
import { mermaidCache } from '~/utils/cache';
+import { CDN_IDS } from '~/static';
import { ContentPreviewProps } from '../ContentPreview';
@@ -52,7 +53,7 @@ const useMermaid = (props: ContentPreviewProps) => {
...editorExtensionsAttrs.mermaid?.js,
rel: 'modulepreload',
href: jsSrc,
- id: `${prefix}-mermaid-m`
+ id: CDN_IDS.mermaidM
});
import(
@@ -69,7 +70,7 @@ const useMermaid = (props: ContentPreviewProps) => {
{
...editorExtensionsAttrs.mermaid?.js,
src: jsSrc,
- id: `${prefix}-mermaid`,
+ id: CDN_IDS.mermaid,
onload() {
mermaidRef.value = window.mermaid;
configMermaid();
diff --git a/packages/MdEditor/layouts/Toolbar/composition.ts b/packages/MdEditor/layouts/Toolbar/composition.ts
index 3474f479..950a5088 100644
--- a/packages/MdEditor/layouts/Toolbar/composition.ts
+++ b/packages/MdEditor/layouts/Toolbar/composition.ts
@@ -1,7 +1,8 @@
import { onMounted, inject, ref } from 'vue';
-import { configOption, prefix } from '~/config';
+import { configOption } from '~/config';
import { appendHandler } from '~/utils/dom';
import bus from '~/utils/event-bus';
+import { CDN_IDS } from '~/static';
import { CHANGE_FULL_SCREEN, ERROR_CATCHER } from '~/static/event-name';
import { ToolbarProps } from './props';
@@ -64,7 +65,7 @@ export const useSreenfull = (props: ToolbarProps) => {
{
...editorExtensionsAttrs.screenfull?.js,
src: editorExtensions.screenfull!.js,
- id: `${prefix}-screenfull`,
+ id: CDN_IDS.screenfull,
onload: screenfullLoad
},
'screenfull'
diff --git a/packages/MdEditor/static/index.ts b/packages/MdEditor/static/index.ts
new file mode 100644
index 00000000..5bc237fd
--- /dev/null
+++ b/packages/MdEditor/static/index.ts
@@ -0,0 +1,15 @@
+import { prefix } from '../config';
+
+export const CDN_IDS = {
+ hljs: `${prefix}-hljs`,
+ hlcss: `${prefix}-hlCss`,
+ prettier: `${prefix}-prettier`,
+ prettierMD: `${prefix}-prettierMD`,
+ cropperjs: `${prefix}-cropper`,
+ croppercss: `${prefix}-cropperCss`,
+ screenfull: `${prefix}-screenfull`,
+ mermaidM: `${prefix}-mermaid-m`,
+ mermaid: `${prefix}-mermaid`,
+ katexjs: `${prefix}-katex`,
+ katexcss: `${prefix}-katexCss`
+};
diff --git a/packages/index.ts b/packages/index.ts
index 6315bb0b..54889692 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -9,8 +9,8 @@ export { default as MdModal } from './MdEditor/components/Modal';
export { default as StrIcon } from './MdEditor/components/Icon/Str';
export { default as NormalFooterToolbar } from './NormalFooterToolbar';
-export * from './MdEditor/layouts/Content/markdownIt/xss';
-
+export * from '~/layouts/Content/markdownIt/xss';
export * from './config';
+export * from './util';
export * from '~/type';
diff --git a/packages/util.ts b/packages/util.ts
new file mode 100644
index 00000000..a28d1c58
--- /dev/null
+++ b/packages/util.ts
@@ -0,0 +1,15 @@
+import { CDN_IDS } from './MdEditor/static';
+
+/**
+ * 清空组件带来的副作用，例如
+ * 1. 使用CDN嵌入的链接，为了保证多个组件能够正常使用，组件在卸载时不会主动移除
+ */
+export const clearSideEffects = () => {
+ (Object.keys(CDN_IDS) as Array).forEach((key) => {
+ const ele = document.getElementById(CDN_IDS[key]);
+
+ if (ele) {
+ ele.remove();
+ }
+ });
+};