🎨 fix #1522

Vanessa219 · Dec 15, 2023 · a42598c · a42598c
1 parent a694a1e
commit a42598c
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,10 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
+### v3.9.8 / 2023-12
+
+* [简化 CDN 配置](https://github.com/Vanessa219/vditor/issues/1522) `改进功能`
+
 ### v3.9.7 / 2023-12-14
 
 * [改进带端口的超链接解析](https://github.com/Vanessa219/vditor/issues/1513) `改进功能`

diff --git a/demo/comment.html b/demo/comment.html
@@ -16,11 +16,11 @@
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
     <meta name="twitter:description" property="og:description" itemprop="description"
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
-    <link rel="dns-prefetch" href="//unpkg.com/"/>
-    <link rel="preconnect" href="https://unpkg.com">
-    <link rel="icon" type="image/png" href="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <link rel="apple-touch-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
-    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
+    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
     <meta name="copyright" content="B3log"/>
     <meta http-equiv="Window-target" content="_top"/>
     <meta property="og:locale" content="zh-cmn-Hans"/>
@@ -34,8 +34,8 @@
           content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG,  Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
     <meta name="twitter:site" content="@B3logOS"/>
     <meta name="twitter:url" content="https://b3log.org/vditor"/>
-    <meta property="og:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <meta name="twitter:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
+    <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
     <style>
         body {
             margin: 0;
@@ -58,7 +58,7 @@
             position: absolute;
         }
     </style>
-    <script src="https://unpkg.com/[email protected]/dist/vconsole.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js"></script>
 </head>
 <body>
 <div class="vditor-reset nav">

diff --git a/demo/index.html b/demo/index.html
@@ -16,11 +16,11 @@
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
     <meta name="twitter:description" property="og:description" itemprop="description"
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
-    <link rel="dns-prefetch" href="//unpkg.com/"/>
-    <link rel="preconnect" href="https://unpkg.com">
-    <link rel="icon" type="image/png" href="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <link rel="apple-touch-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
-    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
+    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
     <meta name="copyright" content="B3log"/>
     <meta http-equiv="Window-target" content="_top"/>
     <meta property="og:locale" content="zh-cmn-Hans"/>
@@ -34,8 +34,8 @@
           content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG,  Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
     <meta name="twitter:site" content="@B3logOS"/>
     <meta name="twitter:url" content="https://b3log.org/vditor"/>
-    <meta property="og:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <meta name="twitter:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
+    <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
     <style>
         body {
             margin: 0;
@@ -51,7 +51,7 @@
             color: #4285f4;
         }
     </style>
-    <script src="https://unpkg.com/[email protected]/dist/vconsole.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js"></script>
 </head>
 <body>
 <div class="vditor-reset nav">

diff --git a/demo/index.js b/demo/index.js
@@ -52,7 +52,7 @@ const initVditor = (language) => {
     window.vditor = new Vditor('vditor', {
         // _lutePath: `http://192.168.31.194:9090/lute.min.js?${new Date().getTime()}`,
         _lutePath: 'src/js/lute/lute.min.js',
-        // cdn: 'http://localhost:9000',
+        cdn: 'https://cdn.jsdelivr.net/npm/vditor',
         toolbar,
         lang: language,
         mode: 'wysiwyg',
@@ -83,11 +83,11 @@ const initVditor = (language) => {
             type: 'text',
         },
         hint: {
-            emojiPath: 'https://unpkg.com/[email protected]/dist/images/emoji',
+            emojiPath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji',
             emojiTail: '<a href="https://ld246.com/settings/function" target="_blank">设置常用表情</a>',
             emoji: {
                 'sd': '💔',
-                'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
+                'j': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji/j.png',
             },
             parse: false,
             extend: [

diff --git a/demo/jest-puppeteer.html b/demo/jest-puppeteer.html
@@ -15,11 +15,11 @@
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
     <meta name="twitter:description" property="og:description" itemprop="description"
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
-    <link rel="dns-prefetch" href="//unpkg.com/"/>
-    <link rel="preconnect" href="https://unpkg.com">
-    <link rel="icon" type="image/png" href="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <link rel="apple-touch-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
-    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
+    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
     <meta name="copyright" content="B3log"/>
     <meta http-equiv="Window-target" content="_top"/>
     <meta property="og:locale" content="zh-cmn-Hans"/>
@@ -32,8 +32,8 @@
           content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG,  Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
     <meta name="twitter:site" content="@B3logOS"/>
     <meta name="twitter:url" content="https://b3log.org/vditor"/>
-    <meta property="og:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <meta name="twitter:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
+    <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 </head>
 <body>
 <h2>Vditor for jest puppeteer</h2>

diff --git a/demo/jest-puppeteer.js b/demo/jest-puppeteer.js
@@ -27,13 +27,13 @@ window.vditorTest = new Vditor('vditorTest', {
     },
   },
   hint: {
-    emojiPath: 'https://unpkg.com/vditor/dist/images/emoji',
+    emojiPath: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/emoji',
     emojiTail: '<a href="https://ld246.com/settings/function" target="_blank">设置常用表情</a>',
     emoji: {
       '+1': '👍',
       '-1': '👎',
-      'trollface': 'https://unpkg.com/[email protected]/dist/images/emoji/trollface.png',
-      'huaji': 'https://unpkg.com/[email protected]/dist/images/emoji/huaji.gif',
+      'trollface': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji/trollface.png',
+      'huaji': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji/huaji.gif',
     },
     at: (key) => {
       console.log(`atUser: ${key}`)

diff --git a/demo/render.html b/demo/render.html
@@ -16,11 +16,11 @@
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
     <meta name="twitter:description" property="og:description" itemprop="description"
           content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
-    <link rel="dns-prefetch" href="//unpkg.com/"/>
-    <link rel="preconnect" href="https://unpkg.com">
-    <link rel="icon" type="image/png" href="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <link rel="apple-touch-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
-    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
+    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
     <meta name="copyright" content="B3log"/>
     <meta http-equiv="Window-target" content="_top"/>
     <meta property="og:locale" content="zh-cmn-Hans"/>
@@ -34,8 +34,8 @@
           content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG,  Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
     <meta name="twitter:site" content="@B3logOS"/>
     <meta name="twitter:url" content="https://b3log.org/vditor"/>
-    <meta property="og:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
-    <meta name="twitter:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
+    <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+    <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
     <style>
         body {
             margin: 0;

diff --git a/demo/render.js b/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: 'http://localhost:9000',
+            cdn: 'https://cdn.jsdelivr.net/npm/vditor',
             markdown: {
                 toc: true, listStyle: fileName === 'cute-list',
             },
@@ -36,7 +36,7 @@ const render = (fileName) => {
                     outlineElement.style.display = 'block'
                 }
             },
-            lazyLoadImage: 'https://unpkg.com/vditor/dist/images/img-loading.svg',
+            lazyLoadImage: 'https://cdn.jsdelivr.net/npm/vditor/dist/images/img-loading.svg',
             renderers: {
                 renderHeading: (node, entering) => {
                     const id = Lute.GetHeadingID(node)
@@ -55,12 +55,12 @@ render('zh_CN')
 window.setTheme = (theme) => {
     if (theme === 'dark') {
         Vditor.setCodeTheme('native')
-        Vditor.setContentTheme('dark', 'https://unpkg.com/vditor/dist/css/content-theme')
+        Vditor.setContentTheme('dark', 'https://cdn.jsdelivr.net/npm/vditor/dist/css/content-theme')
         outlineElement.classList.add('dark')
         document.querySelector('html').style.backgroundColor = '#2f363d'
     } else {
         Vditor.setCodeTheme('github')
-        Vditor.setContentTheme('light', 'https://unpkg.com/vditor/dist/css/content-theme')
+        Vditor.setContentTheme('light', 'https://cdn.jsdelivr.net/npm/vditor/dist/css/content-theme')
         outlineElement.classList.remove('dark')
         document.querySelector('html').style.backgroundColor = '#fff'
     }

diff --git a/demo/static.html b/demo/static.html
@@ -16,11 +16,11 @@
         content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
   <meta name="twitter:description" property="og:description" itemprop="description"
         content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
-  <link rel="dns-prefetch" href="//unpkg.com/"/>
-  <link rel="preconnect" href="https://unpkg.com">
-  <link rel="icon" type="image/png" href="https://unpkg.com/vditor/dist/images/logo.png"/>
-  <link rel="apple-touch-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
-  <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.com/vditor/dist/images/logo.png">
+  <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
+  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+  <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+  <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
+  <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
   <meta name="copyright" content="B3log"/>
   <meta http-equiv="Window-target" content="_top"/>
   <meta property="og:locale" content="zh-cmn-Hans"/>
@@ -34,8 +34,8 @@
         content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG,  Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
   <meta name="twitter:site" content="@B3logOS"/>
   <meta name="twitter:url" content="https://b3log.org/vditor"/>
-  <meta property="og:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
-  <meta name="twitter:image" content="https://unpkg.com/vditor/dist/images/logo.png"/>
+  <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
+  <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
   <style>
     body {
       margin: 0;
@@ -51,8 +51,8 @@
       color: #4285f4;
     }
   </style>
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/index.css">
-  <script src="https://unpkg.com/[email protected]/dist/index.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.css">
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
 </head>
 <body>
 <div class="vditor-reset nav">

diff --git a/src/ts/markdown/previewRender.ts b/src/ts/markdown/previewRender.ts
@@ -25,9 +25,7 @@ const mergeOptions = (options?: IPreviewOptions) => {
         anchor: 0,
         cdn: Constants.CDN,
         customEmoji: {},
-        emojiPath: `${
-            (options && options.emojiPath) || Constants.CDN
-        }/dist/images/emoji`,
+        emojiPath: `${Constants.CDN}/dist/images/emoji`,
         hljs: Constants.HLJS_OPTIONS,
         icon: "ant",
         lang: "zh_CN",
@@ -39,6 +37,14 @@ const mergeOptions = (options?: IPreviewOptions) => {
         },
         theme: Constants.THEME_OPTIONS,
     };
+    if (options.cdn) {
+        if (!options.theme?.path) {
+            defaultOption.theme.path = `${options.cdn}/dist/css/content-theme`
+        }
+        if (!options.emojiPath) {
+            defaultOption.emojiPath = `${options.cdn}/dist/images/emoji`;
+        }
+    }
     return merge(defaultOption, options);
 };
 

diff --git a/src/ts/util/Options.ts b/src/ts/util/Options.ts
@@ -155,10 +155,15 @@ export class Options {
             if (this.options.comment) {
                 this.defaultOptions.comment = this.options.comment;
             }
-            // 支持不够完善，我先注释了，后期再打开
-            // if (this.options.rtl) {
-            //     this.defaultOptions.rtl = this.options.rtl;
-            // }
+
+            if (this.options.cdn) {
+                if (!this.options.preview?.theme?.path) {
+                    this.defaultOptions.preview.theme.path = `${this.options.cdn}/dist/css/content-theme`
+                }
+                if (!this.options.hint?.emojiPath) {
+                    this.defaultOptions.hint.emojiPath = `${this.options.cdn}/dist/images/emoji`;
+                }
+            }
         }
 
         const mergedOptions = merge(this.defaultOptions, this.options);