diff --git a/CHANGELOG.md b/CHANGELOG.md
index 86e4ffe..9533276 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # 更新记录
 
+### v1.6.2
+
+- ⬆️ 升级Vditor版本至3.10.2
+- ✨ 添加页面加载CDN设置，添加自定义CDN支持 `#30`
+
+#### 关于CDN配置
+
+由于Vditor本体加载CDN的方式，无法支持类似`cdnjs`的url格式。当前内置4种CDN: `内置`,`jsDelivr`, `unpkg`, `zstatic`
+
+**如何确认cdn是否可用:**
+
+您可以访问`<你的cdn>/dist/index.min.js`，能加载出来则说明可用，同时注意cdn是否包含该版本资源，版本升级信息会在更新日志中体现。
+
 ### v1.6.1
 
 - 🐛 修复单页文章加载Vditor资源时 version 未成功替换问题 `#27`
diff --git a/console/package.json b/console/package.json
index 1ef4946..a2c1436 100644
--- a/console/package.json
+++ b/console/package.json
@@ -15,7 +15,7 @@
     "@halo-dev/api-client": "^2.11.0",
     "@halo-dev/components": "^1.10.0",
     "@halo-dev/console-shared": "^2.11.0",
-    "vditor": "3.9.9",
+    "vditor": "3.10.2",
     "canvas-confetti": "^1.6.0",
     "vue": "^3.3.4"
   },
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index 9afcc7e..3f34ae4 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -21,8 +21,8 @@ dependencies:
     specifier: ^1.6.0
     version: 1.9.2
   vditor:
-    specifier: 3.9.9
-    version: 3.9.9
+    specifier: 3.10.2
+    version: 3.10.2
   vue:
     specifier: ^3.3.4
     version: 3.3.12(typescript@4.7.4)
@@ -3718,8 +3718,8 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vditor@3.9.9:
-    resolution: {integrity: sha512-yeUb6E//ppiN0bX85O0sDCZ7tf/b3Lz6CcR8n77mwuZWNYOmJaqG15CfSFHg21NyNFStdN54A3P/s+eq/TkwLg==}
+  /vditor@3.10.2:
+    resolution: {integrity: sha512-NtnsqKoU7cFUb7HPLct+fSjRnuhSlfSp0bpCDm0GcH2emngoZb6m1cEyg8yhu1WkHt8ugD9i1OMrA1tnMEW6fA==}
     dependencies:
       diff-match-patch: 1.0.5
     dev: false
diff --git a/download_dist.bat b/download_dist.bat
index 766dcc4..ce52e05 100644
--- a/download_dist.bat
+++ b/download_dist.bat
@@ -1,7 +1,7 @@
 cd src/main/resources/static
 if exist dist rmdir /s /q dist
 echo %cd%
-bitsadmin /transfer vditorDownloadJob https://registry.npmjs.org/vditor/-/vditor-3.9.9.tgz %cd%\vditor.tgz
+bitsadmin /transfer vditorDownloadJob https://registry.npmjs.org/vditor/-/vditor-3.10.2.tgz %cd%\vditor.tgz
 7z x vditor.tgz
 7z x vditor.tar
 move /y %cd%\package\dist %cd%
diff --git a/download_dist.sh b/download_dist.sh
index af953d1..e904cca 100755
--- a/download_dist.sh
+++ b/download_dist.sh
@@ -4,7 +4,7 @@ cd src/main/resources/static
 rm -rf dist
 pwd
 curl -o vditor.tgz \
- https://registry.npmjs.org/vditor/-/vditor-3.9.9.tgz
+ https://registry.npmjs.org/vditor/-/vditor-3.10.2.tgz
 tar -xzvf vditor.tgz
 mv package/dist .
 rm -rf package
diff --git a/gradle.properties b/gradle.properties
index 2877f83..f96d02e 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -1 +1 @@
-version=1.6.1-SNAPSHOT
+version=1.6.2-SNAPSHOT
diff --git a/src/main/java/top/mczhengyi/vditor/bean/RenderConfig.java b/src/main/java/top/mczhengyi/vditor/bean/RenderConfig.java
index fbe7cee..80575ba 100644
--- a/src/main/java/top/mczhengyi/vditor/bean/RenderConfig.java
+++ b/src/main/java/top/mczhengyi/vditor/bean/RenderConfig.java
@@ -4,8 +4,19 @@ import lombok.Data;
 
 @Data
 public class RenderConfig {
+    private final String VDITOR_VERSION = "3.10.2";
+
     Boolean enableRender;
     String darkMode;
     Boolean mediaRender;
     Boolean onlyMarkdown;
+    String cdn;
+    String cdnUrl;
+
+    public String getCdn() {
+        if ("self-hosted".equals(cdn)) {
+            return cdnUrl.replace("${v}", VDITOR_VERSION);
+        }
+        return cdn.replace("${v}", VDITOR_VERSION);
+    }
 }
diff --git a/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java b/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
index cc65c07..7774745 100644
--- a/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
+++ b/src/main/java/top/mczhengyi/vditor/utils/ScriptUtils.java
@@ -12,7 +12,7 @@ public class ScriptUtils {
     public static String renderScript(RenderConfig renderConfig) {
         ScriptBuilder script = new ScriptBuilder();
         script.sign("article-sign")
-            .variable("cdn", "/plugins/vditor-mde/assets/static/")
+            .variable("cdn", renderConfig.getCdn())
             .stylesheet("vditor-render.css", "style")
             .script("dist/method.min.js", "methods")
             .script("render-utils.js", "render-utils"); // 标记文章位置
diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml
index 55cbc18..a73ee95 100644
--- a/src/main/resources/extensions/settings.yaml
+++ b/src/main/resources/extensions/settings.yaml
@@ -89,6 +89,29 @@ spec:
               label: "仅在Markdown模式下渲染"
               help: "启用该功能将仅在Markdown格式的文章下注入渲染脚本"
               value: true
+            - $formkit: select
+              id: cdn
+              name: cdn
+              label: "Vditor CDN"
+              help: "前台渲染所使用的 CDN 配置"
+              value: "/plugins/vditor-mde/assets/static"
+              options:
+                - label: "内建"
+                  value: "/plugins/vditor-mde/assets/static"
+                - label: "jsDelivr(国外)"
+                  value: "https://cdn.jsdelivr.net/npm/vditor@${v}"
+                - label: "unpkg(国外)"
+                  value: "https://unpkg.com/vditor@${v}"
+                - label: "npmmirror(国内)"
+                  value: "https://registry.npmmirror.com/vditor/${v}/files"
+                - label: "自建"
+                  value: "self-hosted"
+            - $formkit: text
+              if: "$cdn == 'self-hosted'"
+              name: cdnUrl
+              label: CDN URL
+              placeholder: "在此处填入您的自建cdn(不支持 cdnjs 格式，使用${v}代替版本号)"
+              value: ""
         - group: developer
           label: 开发者设置
           formSchema:
diff --git a/src/main/resources/static/render-utils.js b/src/main/resources/static/render-utils.js
index 6f9eced..ccd62f9 100644
--- a/src/main/resources/static/render-utils.js
+++ b/src/main/resources/static/render-utils.js
@@ -45,16 +45,17 @@
         }
         root = root.parentElement
         root.classList.add("vditor-reset")
+        console.log(`Using CDN: ${this.CDN}`)
         // Render
         const renderTheme = darkMode?"dark":"classic"
-        Vditor.mathRender(root, {cdn: CDN})
-        Vditor.mindmapRender(root, CDN, renderTheme)
-        Vditor.mermaidRender(root, CDN, renderTheme)
-        Vditor.chartRender(root, CDN, renderTheme)
-        Vditor.abcRender(root, CDN)
-        Vditor.graphvizRender(root, CDN)
-        Vditor.flowchartRender(root, CDN)
-        Vditor.plantumlRender(root, CDN)
+        Vditor.mathRender(root, {cdn: this.CDN})
+        Vditor.mindmapRender(root, this.CDN, renderTheme)
+        Vditor.mermaidRender(root, this.CDN, renderTheme)
+        Vditor.chartRender(root, this.CDN, renderTheme)
+        Vditor.abcRender(root, this.CDN)
+        Vditor.graphvizRender(root, this.CDN)
+        Vditor.flowchartRender(root, this.CDN)
+        Vditor.plantumlRender(root, this.CDN)
         // Run External Plugin
         functionList.forEach(func => {
             func({