:art: https://github.com/Vanessa219/vditor/issues/1583

CHANGELOG.md

@@ -8,12 +8,17 @@
   * 添加 option.link 和 options.image
   * 添加 hljs.defaultLang
   * 添加 hljs.renderMenu
+  * 添加 preview.render.media.enable
 
 ### TODO
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
-### v3.10.2 / 2024-04
+### v3.10.3 / 2024-04
+
+* [添加 `preview.render.media.enable` 参数](https://github.com/Vanessa219/vditor/issues/1583) `引入特性`
+
+### v3.10.2 / 2024-03-19
 
 * [使用 object 内嵌 plantuml 以支持特殊语法](https://github.com/Vanessa219/vditor/pull/1579) `改进功能`
 * [⬆️ Bump follow-redirects from 1.15.4 to 1.15.6](https://github.com/Vanessa219/vditor/pull/1582) `dependencies`

README.md

@@ -359,6 +359,12 @@ new Vditor('vditor', {
 | className | 按钮类名 | - |
 | click(key: string) | 按钮点击回调事件 | - |
 
+#### options.preview.render.media
+
+|        | 说明        | 默认值  |
+|--------|-----------|------|
+| enable | 是否启用多媒体渲染 | true |
+
 #### options.image
 
 |   | 说明 | 默认值 |
@@ -575,6 +581,7 @@ options?: IPreviewOptions {
   lazyLoadImage?: string; // 设置为 Loading 图片地址后将启用图片的懒加载
   markdown?: options.preview.markdown;
   theme?: options.preview.theme;
+  render?: options.preview.render;
   renderers?: ILuteRender; // 自定义渲染 https://ld246.com/article/1588412297062
 }
 ```

README_en_US.md

@@ -334,6 +334,12 @@ Default: ["desktop", "tablet", "mobile", "mp-wechat", "zhihu"]
 | className | Button Class | - |
 | click(key: string) | Click Event | - |
 
+#### options.preview.render.media
+
+|        | Explanation        | Default  |
+|--------|-----------|------|
+| enable | Whether to enable multimedia render | true |
+
 #### options.image
 
 |   | Explanation | Default |
@@ -527,6 +533,7 @@ options?: IPreviewOptions {
   cdn?: string; // Self-built CDN address
   lazyLoadImage?: string; // use "https://unpkg.com/vditor/dist/images/img-loading.svg" to lazy load image
   markdown?: options.preview.markdown;
+  render?: options.preview.render;
   renderers?: ILuteRender; // Custom rendering method https://ld246.com/article/1588412297062
 }
 ```

demo/render.js

@@ -20,7 +20,7 @@ const render = (fileName) => {
     fetch(`/demo/markdown/${fileName}.md`).then(response => response.text()).then(markdown => {
 
         Vditor.preview(previewElement, markdown, {
-            cdn: 'https://cdn.jsdelivr.net/npm/vditor',
+            cdn: '',
             markdown: {
                 toc: true, listStyle: fileName === 'cute-list',
             },

src/ts/export/index.ts

@@ -75,7 +75,7 @@ export const exportHTML = (vditor: IVditor) => {
     Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.abcRender(previewElement, '${vditor.options.cdn}');
-    Vditor.mediaRender(previewElement);
+    ${vditor.options.preview.render.media.enable ? 'Vditor.mediaRender(previewElement);' : ""}
     Vditor.speechRender(previewElement);
 </script>
 <script src="${vditor.options.cdn}/dist/js/icons/${vditor.options.icon}.js"></script></body></html>`;

src/ts/markdown/previewRender.ts

@@ -35,6 +35,11 @@ const mergeOptions = (options?: IPreviewOptions) => {
         speech: {
             enable: false,
         },
+        render: {
+            media: {
+                enable: true,
+            }
+        },
         theme: Constants.THEME_OPTIONS,
     };
     if (options.cdn) {
@@ -133,7 +138,9 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     plantumlRender(previewElement, mergedOptions.cdn);
     abcRender(previewElement, mergedOptions.cdn);
-    mediaRender(previewElement);
+    if (mergedOptions.render.media.enable) {
+        mediaRender(previewElement);
+    }
     if (mergedOptions.speech.enable) {
         speechRender(previewElement);
     }

src/ts/preview/index.ts

@@ -231,7 +231,9 @@ export class Preview {
         mindmapRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         plantumlRender(vditor.preview.previewElement, vditor.options.cdn);
         abcRender(vditor.preview.previewElement, vditor.options.cdn);
-        mediaRender(vditor.preview.previewElement);
+        if (vditor.options.preview.render.media.enable) {
+            mediaRender(vditor.preview.previewElement);
+        }
         vditor.options.customRenders.forEach((item) => {
             item.render(vditor.preview.previewElement, vditor);
         })

src/ts/util/Options.ts

@@ -59,6 +59,11 @@ export class Options {
             maxWidth: 800,
             mode: "both",
             theme: Constants.THEME_OPTIONS,
+            render: {
+                media: {
+                    enable: true,
+                }
+            }
         },
         link: {
             isOpen: true,
@@ -150,6 +155,9 @@ export class Options {
             if (this.options.preview?.theme?.list) {
                 this.defaultOptions.preview.theme.list = this.options.preview.theme.list;
             }
+            if (this.options.preview?.render?.media?.enable) {
+                this.defaultOptions.preview.render.media.enable = this.options.preview.render.media.enable;
+            }
             if (this.options.hint?.emoji) {
                 this.defaultOptions.hint.emoji = this.options.hint.emoji;
             }

types/index.d.ts

@@ -435,6 +435,7 @@ interface IHljs {
     enable?: boolean;
     /** 自定义指定语言: CODE_LANGUAGES */
     langs?: string[];
+
     /** 渲染右上角菜单按钮 */
     renderMenu?(element: HTMLElement, menuElement: HTMLElement): void;
 }
@@ -501,7 +502,7 @@ interface IPreview {
     theme?: IPreviewTheme;
     /** @link https://ld246.com/article/1549638745630#options-preview-actions  */
     actions?: Array<IPreviewAction | IPreviewActionCustom>;
-
+    render?: IPreviewRender
     /** 预览回调 */
     parse?(element: HTMLElement): void;
 
@@ -509,6 +510,12 @@ interface IPreview {
     transform?(html: string): string;
 }
 
+interface IPreviewRender {
+    media?: {
+        enable?: boolean;
+    }
+}
+
 type IPreviewAction = "desktop" | "tablet" | "mobile" | "mp-wechat" | "zhihu";
 
 interface IPreviewActionCustom {
@@ -542,6 +549,7 @@ interface IPreviewOptions {
     renderers?: ILuteRender;
     theme?: IPreviewTheme;
     icon?: "ant" | "material" | undefined;
+    render?: IPreviewRender
 
     transform?(html: string): string;