✨ fix #11

Vanessa219 · Dec 4, 2019 · 51740c5 · 51740c5
1 parent a18cad7
commit 51740c5
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,8 +36,9 @@
 * [3](https://github.com/Vanessa219/vditor/issues/3) 编辑预览同步滚动改进 `enhancement`
 * [4](https://github.com/Vanessa219/vditor/issues/4) 添加支持思维导图的功能 `enhancement`
 
-### v1.10.3 / 2019-11-30
+### v1.10.5 / 2019-12-04
 
+* [11](https://github.com/Vanessa219/vditor/issues/11) 添加 CDN 配置  `enhancement`
 * [9](https://github.com/Vanessa219/vditor/issues/9) 没有预览界面时依旧出现预览耗时提示 `bug`
 * [1](https://github.com/Vanessa219/vditor/issues/1) 上传时支持 xhr.setRequestHeader 设置 `enhancement`
 * [172](https://github.com/b3log/vditor/issues/172) 上传改进  `enhancement`
@@ -51,6 +52,7 @@
   * hotkey 和 setSelection 方法不支持 wysiwyg
   * setValue 参数改为 markdown
   * 添加 options.upload.headers
+  * 为 options, IPreviewOptions, highlightRender, mathRenderByLute, mathRender 添加 cdn
 
 ### v1.9.7 / 2019-11-11
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vditor",
-  "version": "1.10.4",
+  "version": "1.10.5",
   "cdn": "https://cdn.jsdelivr.net/npm",
   "description": "A markdown editor written in TypeScript",
   "author": " Vanessa <[email protected]> (http://vanessa.b3log.org)",

diff --git a/src/ts/markdown/highlightRender.ts b/src/ts/markdown/highlightRender.ts
@@ -1,7 +1,7 @@
 import {CDN_PATH, VDITOR_VERSION} from "../constants";
 import {addStyle} from "../util/addStyle";
 
-export const highlightRender = async (hljsOption?: IHljs, element: HTMLElement | Document = document) => {
+export const highlightRender = async (hljsOption?: IHljs, element: HTMLElement | Document = document, cdn?: string) => {
 
     const hljsThemes = ["abap", "algol", "algol_nu", "arduino", "autumn", "borland", "bw", "colorful", "dracula",
         "emacs", "friendly", "fruity", "github", "igor", "lovelace", "manni", "monokai", "monokailight", "murphy",
@@ -11,7 +11,7 @@ export const highlightRender = async (hljsOption?: IHljs, element: HTMLElement |
     if (!hljsThemes.includes(hljsOption.style)) {
         hljsOption.style = "github";
     }
-    addStyle(`${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/highlight.js/styles/${hljsOption.style}.css`,
+    addStyle(`${cdn || CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/highlight.js/styles/${hljsOption.style}.css`,
         "vditorHljsStyle");
 
     if (!hljsOption.enable) {

diff --git a/src/ts/markdown/mathRender.ts b/src/ts/markdown/mathRender.ts
@@ -1,14 +1,14 @@
-import {CDN_PATH} from "../constants";
+import {CDN_PATH, VDITOR_VERSION} from "../constants";
 import {addStyle} from "../util/addStyle";
 import {code160to32} from "../util/code160to32";
 
-export const mathRender = (element: HTMLElement) => {
+export const mathRender = (element: HTMLElement, cdn?: string) => {
     const text = code160to32(element.innerText);
     if (text.split("$").length > 2 || (text.split("\\(").length > 1 && text.split("\\)").length > 1)) {
         import(/* webpackChunkName: "katex" */ "katex").then(() => {
             import(/* webpackChunkName: "katex" */ "katex/contrib/auto-render/auto-render")
                 .then((renderMathInElement) => {
-                    addStyle(`${CDN_PATH}/vditor/dist/js/katex/katex.min.css`,
+                    addStyle(`${cdn || CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/katex/katex.min.css`,
                         "vditorKatexStyle");
                     renderMathInElement.default(element, {
                         delimiters: [

diff --git a/src/ts/markdown/mathRenderByLute.ts b/src/ts/markdown/mathRenderByLute.ts
@@ -1,15 +1,15 @@
-import {CDN_PATH} from "../constants";
+import {CDN_PATH, VDITOR_VERSION} from "../constants";
 import {addStyle} from "../util/addStyle";
 import {code160to32} from "../util/code160to32";
 
-export const mathRenderByLute = (element: HTMLElement) => {
+export const mathRenderByLute = (element: HTMLElement, cdn?: string) => {
     const mathElements = element.querySelectorAll(".vditor-math");
 
     if (mathElements.length === 0) {
         return;
     }
     import(/* webpackChunkName: "katex" */ "katex").then((katex) => {
-        addStyle(`${CDN_PATH}/vditor/dist/js/katex/katex.min.css`, "vditorKatexStyle");
+        addStyle(`${cdn || CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/katex/katex.min.css`, "vditorKatexStyle");
         mathElements.forEach((mathElement) => {
             if (mathElement.getAttribute("data-math")) {
                 return;

diff --git a/src/ts/markdown/md2html.ts b/src/ts/markdown/md2html.ts
@@ -5,7 +5,7 @@ declare const Lute: ILute;
 export const loadLuteJs = (vditor?: IVditor) => {
     const scriptElement = document.createElement("script");
     scriptElement.type = "text/javascript";
-    scriptElement.src = `${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/lute/lute.min.js`;
+    scriptElement.src = `${vditor.options.cdn || CDN_PATH}/vditor@${VDITOR_VERSION}/dist/js/lute/lute.min.js`;
     // scriptElement.src = `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`;
     document.getElementsByTagName("head")[0].appendChild(scriptElement);
 
@@ -28,7 +28,7 @@ export const md2htmlByPreview = async (mdText: string, options?: IPreviewOptions
         await loadLuteJs();
     }
     options = Object.assign({
-        emojiSite: `${CDN_PATH}/vditor/dist/images/emoji`,
+        emojiSite: `${(options && options.cdn) || CDN_PATH}/vditor@${VDITOR_VERSION}/dist/images/emoji`,
         emojis: {},
     }, options);
 

diff --git a/src/ts/markdown/previewRender.ts b/src/ts/markdown/previewRender.ts
@@ -1,4 +1,4 @@
-import {CDN_PATH} from "../constants";
+import {CDN_PATH, VDITOR_VERSION} from "../constants";
 import {abcRender} from "./abcRender";
 import {anchorRender} from "./anchorRender";
 import {chartRender} from "./chartRender";
@@ -13,9 +13,10 @@ import {speechRender} from "./speechRender";
 export const previewRender = async (previewElement: HTMLDivElement, markdown: string, options?: IPreviewOptions) => {
     const defaultOption = {
         anchor: false,
+        cdn: "",
         className: (options && options.anchor) ? "vditor-reset vditor-reset--anchor" : "vditor-reset",
         customEmoji: {},
-        emojiPath: `${CDN_PATH}/vditor/dist/images/emoji`,
+        emojiPath: `${(options && options.cdn) || CDN_PATH}/vditor@${VDITOR_VERSION}/dist/images/emoji`,
         hljs: {
             enable: true,
             lineNumber: false,
@@ -44,8 +45,8 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     previewElement.className = options.className;
 
     codeRender(previewElement, options.lang);
-    highlightRender(options.hljs, previewElement);
-    mathRenderByLute(previewElement);
+    highlightRender(options.hljs, previewElement, options.cdn);
+    mathRenderByLute(previewElement,  options.cdn);
     mermaidRender(previewElement);
     chartRender(previewElement);
     abcRender(previewElement);

diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts
@@ -105,8 +105,9 @@ export class Preview {
             vditor.preview.element.removeAttribute("data-type");
         }
         codeRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.lang);
-        highlightRender(vditor.options.preview.hljs, vditor.preview.element.children[0] as HTMLElement);
-        mathRenderByLute(vditor.preview.element.children[0] as HTMLElement);
+        highlightRender(vditor.options.preview.hljs, vditor.preview.element.children[0] as HTMLElement,
+            vditor.options.cdn);
+        mathRenderByLute(vditor.preview.element.children[0] as HTMLElement, vditor.options.cdn);
         mermaidRender(vditor.preview.element.children[0] as HTMLElement);
         chartRender(vditor.preview.element.children[0] as HTMLElement);
         abcRender(vditor.preview.element.children[0] as HTMLElement);

diff --git a/src/ts/types/index.d.ts b/src/ts/types/index.d.ts
@@ -161,6 +161,7 @@ interface IPreviewOptions {
     };
     anchor?: boolean;
     inlineMathDigit?: boolean;
+    cdn?: string;
 
     transform?(html: string): string;
 }
@@ -203,7 +204,7 @@ interface IOptions {
     hint?: IHint;
     upload?: IUpload;
     classes?: IClasses;
-
+    cdn?: string;
     tab?: string;
 
     input?(value: string, previewElement?: HTMLElement): void;
@@ -285,11 +286,11 @@ declare class IVditorConstructor {
 
     public static codeRender(element: HTMLElement, lang?: (keyof II18nLang)): void;
 
-    public static highlightRender(hljsOption?: IHljs, element?: HTMLElement | Document): void;
+    public static highlightRender(hljsOption?: IHljs, element?: HTMLElement | Document, cdn?: string): void;
 
-    public static mathRenderByLute(element: HTMLElement): void;
+    public static mathRenderByLute(element: HTMLElement, cdn?: string): void;
 
-    public static mathRender(element: HTMLElement): void;
+    public static mathRender(element: HTMLElement, cdn?: string): void;
 
     public static mermaidRender(element: HTMLElement, className?: string): void;
 

diff --git a/src/ts/util/Options.ts b/src/ts/util/Options.ts
@@ -1,10 +1,11 @@
-import {CDN_PATH} from "../constants";
+import {CDN_PATH, VDITOR_VERSION} from "../constants";
 
 export class Options {
     public options: IOptions;
     private defaultOptions: IOptions = {
         after: undefined,
         cache: true,
+        cdn: "",
         classes: {
             preview: "",
         },
@@ -18,7 +19,7 @@ export class Options {
                 "cold_sweat": "😰",
                 "heart": "❤️",
             },
-            emojiPath: `${CDN_PATH}/vditor/dist/images/emoji`,
+            emojiPath: `${CDN_PATH}/vditor@${VDITOR_VERSION}/dist/images/emoji`,
         },
         keymap: {
             deleteLine: "⌘-Backspace",

diff --git a/src/ts/wysiwyg/highlightToolbar.ts b/src/ts/wysiwyg/highlightToolbar.ts
@@ -380,7 +380,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                 } else if (language.value === "echarts") {
                     chartRender(previewObj.previewPanel);
                 } else {
-                    highlightRender(vditor.options.preview.hljs, previewObj.previewPanel);
+                    highlightRender(vditor.options.preview.hljs, previewObj.previewPanel, vditor.options.cdn);
                     codeRender(previewObj.previewPanel, vditor.options.lang);
                 }
             } else if (blockType.indexOf("html") > -1) {
@@ -389,7 +389,7 @@ export const highlightToolbar = (vditor: IVditor) => {
                 const tagName = blockType === "math-block" ? "div" : "span";
                 previewObj.previewPanel.innerHTML =
                     `<${tagName} class="vditor-math">${blockElement.firstChild.textContent}</${tagName}>`;
-                mathRenderByLute(previewObj.previewPanel);
+                mathRenderByLute(previewObj.previewPanel, vditor.options.cdn);
             }
         }, blockElement, blockType.indexOf("block") > -1 ? "div" : "span");
         vditor.wysiwyg.popover.insertAdjacentElement("beforeend", previewObj.preview);