From 17de6259efbb9cf73e84bdd8c505f6c16e8736a0 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Tue, 24 May 2022 11:07:05 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20vditor=20=E7=BB=84=E4=BB=B6=20cdn=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/comment/main.vue     | 23 ++++++++++++++++-------
 config/api.config.js                   |  8 ++++++--
 pages/admin/tag/post/_tag_id.vue       |  5 +++++
 pages/admin/topic/post/_topic_id.vue   |  5 +++++
 pages/article/_article_id.vue          | 21 +++++++++++++--------
 pages/article/post/_article_id.vue     |  5 +++++
 pages/chats/_account.vue               |  5 +++++
 pages/draft/_draft_id.vue              | 18 +++++++++++-------
 pages/guides/markdown.vue              |  5 +++++
 pages/guides/vditor.vue                |  5 +++++
 pages/portfolio/post/_portfolio_id.vue |  5 +++++
 11 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/components/common/comment/main.vue b/components/common/comment/main.vue
index b126fba..ef5ac4b 100644
--- a/components/common/comment/main.vue
+++ b/components/common/comment/main.vue
@@ -135,6 +135,7 @@
 <script>
 import Vue from 'vue';
 import {mapState} from 'vuex';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "Comment",
@@ -249,6 +250,7 @@ export default {
         toolbar,
         mode: 'ir',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: this.postId ? false : true,
           id: this.postId ? this.postId : '',
@@ -277,6 +279,9 @@ export default {
             }
             // LazyLoadImage();
             // Vue.Vditor.highlightRender({style:'github'}, element, document);
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         upload: {
@@ -403,15 +408,19 @@ export default {
         for (let i in previewElements) {
           const previewElement = previewElements[i];
           Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
-          Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": true, "style": "github"}, previewElement);
+          Vue.VditorPreview.highlightRender({
+            "enable": true,
+            "lineNumber": true,
+            "style": "github"
+          }, previewElement, apiConfig.VDITOR);
           Vue.VditorPreview.mathRender(previewElement, {
-            math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
+            math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
           });
-          Vue.VditorPreview.mermaidRender(previewElement);
-          Vue.VditorPreview.graphvizRender(previewElement);
-          Vue.VditorPreview.chartRender(previewElement);
-          Vue.VditorPreview.mindmapRender(previewElement);
-          Vue.VditorPreview.abcRender(previewElement);
+          Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
+          Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
+          Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
+          Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
+          Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
           Vue.VditorPreview.mediaRender(previewElement);
           Vue.VditorPreview.lazyLoadImageRender(previewElement);
           //VditorPreview.outlineRender(previewElement, outLineElement);
diff --git a/config/api.config.js b/config/api.config.js
index b59303c..4c041d3 100644
--- a/config/api.config.js
+++ b/config/api.config.js
@@ -7,7 +7,9 @@ const apisMap = {
     CDN: '',
     PROXY: '/proxy',
     SOCKET: 'http://localhost:3000/ws',
-    GRAVATAR: '/proxy/static.rymcu.com/avatar'
+    GRAVATAR: '/proxy/static.rymcu.com/avatar',
+    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
   },
   production: {
     FE: 'https://rymcu.com',
@@ -15,7 +17,9 @@ const apisMap = {
     CDN: 'https://static.rymcu.com',
     PROXY: 'https://static.rymcu.com/proxy',
     SOCKET: 'https://rymcu.com/wss',
-    GRAVATAR: 'https://static.rymcu.com/avatar'
+    GRAVATAR: 'https://static.rymcu.com/avatar',
+    VDITOR: 'https://static.rymcu.com/vditor@3.8.14/',
+    VDITOR_CSS: 'https://static.rymcu.com/vditor@3.8.14/dist/css/content-theme'
   }
 }
 
diff --git a/pages/admin/tag/post/_tag_id.vue b/pages/admin/tag/post/_tag_id.vue
index 4885007..6356ed9 100644
--- a/pages/admin/tag/post/_tag_id.vue
+++ b/pages/admin/tag/post/_tag_id.vue
@@ -122,6 +122,7 @@ import Vue from "vue";
 import {mapState} from 'vuex';
 import VueCropper from "vue-cropperjs";
 import 'cropperjs/dist/cropper.css';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "PostTag",
@@ -208,6 +209,7 @@ export default {
         toolbar,
         mode: 'sv',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: this.$route.params.tag_id ? false : true,
           id: this.$route.params.tag_id ? this.$route.params.tag_id : '',
@@ -239,6 +241,9 @@ export default {
             }
             // LazyLoadImage();
             // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         height: data.height,
diff --git a/pages/admin/topic/post/_topic_id.vue b/pages/admin/topic/post/_topic_id.vue
index 8980bbb..a92434f 100644
--- a/pages/admin/topic/post/_topic_id.vue
+++ b/pages/admin/topic/post/_topic_id.vue
@@ -120,6 +120,7 @@ import Vue from 'vue';
 import {mapState} from 'vuex';
 import VueCropper from 'vue-cropperjs';
 import 'cropperjs/dist/cropper.css';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "adminTopicPost",
@@ -210,6 +211,7 @@ export default {
         toolbar,
         mode: 'sv',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: this.$route.params.topic_id ? false : true,
           id: this.$route.params.topic_id ? this.$route.params.topic_id : '',
@@ -241,6 +243,9 @@ export default {
             }
             // LazyLoadImage();
             // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         height: data.height,
diff --git a/pages/article/_article_id.vue b/pages/article/_article_id.vue
index 24890a2..6e62398 100644
--- a/pages/article/_article_id.vue
+++ b/pages/article/_article_id.vue
@@ -167,6 +167,7 @@ import PortfoliosWidget from '~/components/widget/portfolios';
 import EditTags from '~/components/widget/tags';
 import 'vditor/dist/css/content-theme/light.css';
 import {buymeacoffee} from "simple-icons"
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "ArticleDetail",
@@ -408,15 +409,19 @@ export default {
       // //const outLineElement = document.getElementById("articleToC");
       // VditorPreview.setContentTheme('light');
       Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
-      Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": true, "style": "github"}, previewElement);
+      Vue.VditorPreview.highlightRender({
+        "enable": true,
+        "lineNumber": true,
+        "style": "github"
+      }, previewElement, apiConfig.VDITOR);
       Vue.VditorPreview.mathRender(previewElement, {
-        math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
+        math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
       });
-      Vue.VditorPreview.mermaidRender(previewElement);
-      Vue.VditorPreview.graphvizRender(previewElement);
-      Vue.VditorPreview.chartRender(previewElement);
-      Vue.VditorPreview.mindmapRender(previewElement);
-      Vue.VditorPreview.abcRender(previewElement);
+      Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
+      Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
+      Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
+      Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
+      Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
       Vue.VditorPreview.mediaRender(previewElement);
       Vue.VditorPreview.lazyLoadImageRender(previewElement);
       //VditorPreview.outlineRender(previewElement, outLineElement);
@@ -433,7 +438,7 @@ export default {
 </script>
 
 <style lang="less">
-  @import "~vditor/src/assets/less/index.less";
+@import "~vditor/src/assets/less/index.less";
 
 .article__wrapper {
   max-width: 980px;
diff --git a/pages/article/post/_article_id.vue b/pages/article/post/_article_id.vue
index 897c16f..ab3e694 100644
--- a/pages/article/post/_article_id.vue
+++ b/pages/article/post/_article_id.vue
@@ -59,6 +59,7 @@
 <script>
   import Vue from 'vue';
   import {mapState} from 'vuex';
+  import apiConfig from '~/config/api.config';
 
   export default {
     name: "PostArticle",
@@ -160,6 +161,7 @@
           toolbar,
           mode: 'sv',
           tab: '\t',
+          cdn: apiConfig.VDITOR,
           cache: {
             enable: this.$route.params.article_id ? false : true,
             id: this.$route.params.article_id ? this.$route.params.article_id : '',
@@ -192,6 +194,9 @@
               }
               // LazyLoadImage();
               // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
+            },
+            theme: {
+              cdn: apiConfig.VDITOR_CSS
             }
           },
           upload: {
diff --git a/pages/chats/_account.vue b/pages/chats/_account.vue
index 772afe7..ba60630 100644
--- a/pages/chats/_account.vue
+++ b/pages/chats/_account.vue
@@ -39,6 +39,7 @@
 import Vue from 'vue';
 import {mapState} from 'vuex';
 import sockClient from '~/plugins/sockjs';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "Chat",
@@ -115,6 +116,7 @@ export default {
         toolbar,
         mode: 'sv',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: this.postId ? false : true,
           id: this.postId ? this.postId : '',
@@ -135,6 +137,9 @@ export default {
             }
             // LazyLoadImage();
             // Vue.Vditor.highlightRender({style:'github'}, element, document);
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         upload: {
diff --git a/pages/draft/_draft_id.vue b/pages/draft/_draft_id.vue
index 34cd782..c9189f2 100644
--- a/pages/draft/_draft_id.vue
+++ b/pages/draft/_draft_id.vue
@@ -143,15 +143,19 @@
         // //const outLineElement = document.getElementById("articleToC");
         // VditorPreview.setContentTheme('light');
         Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
-        Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": false, "style": "github"}, previewElement);
+        Vue.VditorPreview.highlightRender({
+          "enable": true,
+          "lineNumber": true,
+          "style": "github"
+        }, previewElement, apiConfig.VDITOR);
         Vue.VditorPreview.mathRender(previewElement, {
-          math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
+          math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}}, cdn: apiConfig.VDITOR
         });
-        Vue.VditorPreview.mermaidRender(previewElement, ".language-mermaid");
-        Vue.VditorPreview.graphvizRender(previewElement);
-        Vue.VditorPreview.chartRender(previewElement);
-        Vue.VditorPreview.mindmapRender(previewElement);
-        Vue.VditorPreview.abcRender(previewElement);
+        Vue.VditorPreview.mermaidRender(previewElement, apiConfig.VDITOR);
+        Vue.VditorPreview.graphvizRender(previewElement, apiConfig.VDITOR);
+        Vue.VditorPreview.chartRender(previewElement, apiConfig.VDITOR);
+        Vue.VditorPreview.mindmapRender(previewElement, apiConfig.VDITOR);
+        Vue.VditorPreview.abcRender(previewElement, apiConfig.VDITOR);
         Vue.VditorPreview.mediaRender(previewElement);
         Vue.VditorPreview.lazyLoadImageRender(previewElement);
         //VditorPreview.outlineRender(previewElement, outLineElement);
diff --git a/pages/guides/markdown.vue b/pages/guides/markdown.vue
index 59d5155..da455d7 100644
--- a/pages/guides/markdown.vue
+++ b/pages/guides/markdown.vue
@@ -12,6 +12,7 @@
 <script>
 import Vue from 'vue';
 import markdownGuide from 'static/guides/markdown.txt';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "markdown",
@@ -61,6 +62,7 @@ export default {
         toolbar,
         mode: 'wysiwyg',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: false
         },
@@ -89,6 +91,9 @@ export default {
             if (element.style.display === 'none') {
               return
             }
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         height: data.height,
diff --git a/pages/guides/vditor.vue b/pages/guides/vditor.vue
index 1594773..f472e58 100644
--- a/pages/guides/vditor.vue
+++ b/pages/guides/vditor.vue
@@ -11,6 +11,7 @@
 
 <script>
 import Vue from 'vue';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "vditor",
@@ -60,6 +61,7 @@ export default {
         toolbar,
         mode: 'wysiwyg',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: false
         },
@@ -88,6 +90,9 @@ export default {
             if (element.style.display === 'none') {
               return
             }
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         height: data.height,
diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue
index 478ec1b..f0eb792 100644
--- a/pages/portfolio/post/_portfolio_id.vue
+++ b/pages/portfolio/post/_portfolio_id.vue
@@ -99,6 +99,7 @@ import Vue from 'vue';
 import {mapState} from 'vuex';
 import VueCropper from 'vue-cropperjs';
 import 'cropperjs/dist/cropper.css';
+import apiConfig from '~/config/api.config';
 
 export default {
   name: "PortfolioPost",
@@ -215,6 +216,7 @@ export default {
         toolbar,
         mode: 'sv',
         tab: '\t',
+        cdn: apiConfig.VDITOR,
         cache: {
           enable: this.$route.params.article_id ? false : true,
           id: this.$route.params.article_id ? this.$route.params.article_id : '',
@@ -241,6 +243,9 @@ export default {
             }
             // LazyLoadImage();
             // Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
+          },
+          theme: {
+            cdn: apiConfig.VDITOR_CSS
           }
         },
         height: data.height,