🎨 fix Vanessa219#1010

chafan-dev · Dec 11, 2021 · 99a0e67 · 99a0e67
1 parent 47757a9
commit 99a0e67
Show file tree

Hide file tree

Showing 23 changed files with 777 additions and 1,151 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -98,6 +98,9 @@
 
 ### v3.8.5 / 2021-06-xx
 
+* [1010](https://github.com/Vanessa219/vditor/issues/1010) 多语言分离 `改进功能`
+* [1008](https://github.com/Vanessa219/vditor/pull/1008) 自定义多语言 `引入特性`
+
 ### v3.8.4 / 2021-05-13
 
 * [1000](https://github.com/Vanessa219/vditor/issues/1000) 升级 hljs 并添加更多的语言支持 `改进功能`

diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,6 @@ import VditorMethod from "./method";
 import {Constants, VDITOR_VERSION} from "./ts/constants";
 import {DevTools} from "./ts/devtools/index";
 import {Hint} from "./ts/hint/index";
-import {i18n} from "./ts/i18n/index";
 import {IR} from "./ts/ir/index";
 import {input as irInput} from "./ts/ir/input";
 import {processAfterRender} from "./ts/ir/process";
@@ -32,8 +31,8 @@ import {getSelectText} from "./ts/util/getSelectText";
 import {Options} from "./ts/util/Options";
 import {processCodeRender} from "./ts/util/processCode";
 import {getCursorPosition, getEditorRange} from "./ts/util/selection";
-import {WYSIWYG} from "./ts/wysiwyg/index";
 import {afterRenderEvent} from "./ts/wysiwyg/afterRenderEvent";
+import {WYSIWYG} from "./ts/wysiwyg/index";
 import {input} from "./ts/wysiwyg/input";
 import {renderDomByMd} from "./ts/wysiwyg/renderDomByMd";
 
@@ -57,7 +56,7 @@ class Vditor extends VditorMethod {
                     },
                 };
             } else if (!options.cache) {
-                options.cache = { id: `vditor${id}` };
+                options.cache = {id: `vditor${id}`};
             } else if (!options.cache.id) {
                 options.cache.id = `vditor${id}`;
             }
@@ -68,110 +67,34 @@ class Vditor extends VditorMethod {
         const mergedOptions = getOptions.merge();
 
         // 支持自定义国际化
-
-        if (
-            !!mergedOptions.lang &&
-            !["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN"].includes(
-                mergedOptions.lang
-            )
-        ) {
-            throw new Error(
-                "options.lang error, see https://ld246.com/article/1549638745630#options"
-            );
-        }
-
-        this.vditor = {
-            currentMode: mergedOptions.mode,
-            element: id,
-            hint: new Hint(mergedOptions.hint.extend),
-            lute: undefined,
-            options: mergedOptions,
-            originalInnerHTML: id.innerHTML,
-            outline: new Outline(
-                !!mergedOptions.lang
-                    ? i18n[mergedOptions.lang].outline
-                    : mergedOptions.i18n.outline
-            ),
-            tip: new Tip(),
-        };
-
-        this.vditor.sv = new Editor(this.vditor);
-        this.vditor.undo = new Undo();
-        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
-        this.vditor.ir = new IR(this.vditor);
-        this.vditor.toolbar = new Toolbar(this.vditor);
-
-        if (mergedOptions.resize.enable) {
-            this.vditor.resize = new Resize(this.vditor);
-        }
-
-        if (this.vditor.toolbar.elements.devtools) {
-            this.vditor.devtools = new DevTools();
-        }
-
-        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
-            this.vditor.upload = new Upload();
-        }
-
-        addScript(
-            options._lutePath ||
-                `${mergedOptions.cdn}/dist/js/lute/lute.min.js`,
-            "vditorLuteScript"
-        ).then(() => {
-            this.vditor.lute = setLute({
-                autoSpace: this.vditor.options.preview.markdown.autoSpace,
-                codeBlockPreview: this.vditor.options.preview.markdown
-                    .codeBlockPreview,
-                emojiSite: this.vditor.options.hint.emojiPath,
-                emojis: this.vditor.options.hint.emoji,
-                fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
-                footnotes: this.vditor.options.preview.markdown.footnotes,
-                headingAnchor: false,
-                inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
-                linkBase: this.vditor.options.preview.markdown.linkBase,
-                linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
-                listStyle: this.vditor.options.preview.markdown.listStyle,
-                mark: this.vditor.options.preview.markdown.mark,
-                mathBlockPreview: this.vditor.options.preview.markdown
-                    .mathBlockPreview,
-                paragraphBeginningSpace: this.vditor.options.preview.markdown
-                    .paragraphBeginningSpace,
-                sanitize: this.vditor.options.preview.markdown.sanitize,
-                toc: this.vditor.options.preview.markdown.toc,
-            });
-
-            this.vditor.preview = new Preview(this.vditor);
-
-            initUI(this.vditor);
-
-            if (mergedOptions.after) {
-                mergedOptions.after();
-            }
-            if (mergedOptions.icon) {
-                // 防止初始化 2 个编辑器时加载 2 次
-                addScriptSync(
-                    `${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`,
-                    "vditorIconScript"
+        if (!mergedOptions.i18n) {
+            if (!["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+                throw new Error(
+                    "options.lang error, see https://ld246.com/article/1549638745630#options",
                 );
+            } else {
+                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript").then(() => {
+                    this.init(id as HTMLElement, mergedOptions);
+                });
             }
-        });
+        } else {
+            window.VditorI18n = mergedOptions.i18n
+            this.init(id, mergedOptions)
+        }
     }
 
     /** 设置主题 */
     public setTheme(
         theme: "dark" | "classic",
         contentTheme?: string,
         codeTheme?: string,
-        contentThemePath?: string
+        contentThemePath?: string,
     ) {
         this.vditor.options.theme = theme;
         setTheme(this.vditor);
         if (contentTheme) {
             this.vditor.options.preview.theme.current = contentTheme;
-            setContentTheme(
-                contentTheme,
-                contentThemePath || this.vditor.options.preview.theme.path
-            );
+            setContentTheme(contentTheme, contentThemePath || this.vditor.options.preview.theme.path,);
         }
         if (codeTheme) {
             this.vditor.options.preview.hljs.style = codeTheme;
@@ -216,35 +139,22 @@ class Vditor extends VditorMethod {
         hidePanel(this.vditor, ["subToolbar", "hint", "popover"]);
         disableToolbar(
             this.vditor.toolbar.elements,
-            Constants.EDIT_TOOLBARS.concat([
-                "undo",
-                "redo",
-                "fullscreen",
-                "edit-mode",
-            ])
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode",]),
         );
         this.vditor[this.vditor.currentMode].element.setAttribute(
             "contenteditable",
-            "false"
+            "false",
         );
     }
 
     /** 解除编辑器禁用 */
     public enable() {
         enableToolbar(
             this.vditor.toolbar.elements,
-            Constants.EDIT_TOOLBARS.concat([
-                "undo",
-                "redo",
-                "fullscreen",
-                "edit-mode",
-            ])
+            Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode",]),
         );
         this.vditor.undo.resetIcon(this.vditor);
-        this.vditor[this.vditor.currentMode].element.setAttribute(
-            "contenteditable",
-            "true"
-        );
+        this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true",);
     }
 
     /** 返回选中的字符串 */
@@ -287,7 +197,7 @@ class Vditor extends VditorMethod {
     public enableCache() {
         if (!this.vditor.options.cache.id) {
             throw new Error(
-                "need options.cache.id, see https://ld246.com/article/1549638745630#options"
+                "need options.cache.id, see https://ld246.com/article/1549638745630#options",
             );
         }
         this.vditor.options.cache.enable = true;
@@ -359,9 +269,7 @@ class Vditor extends VditorMethod {
     /** 设置编辑器内容 */
     public setValue(markdown: string, clearStack = false) {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.element.innerHTML = this.vditor.lute.SpinVditorSVDOM(
-                markdown
-            );
+            this.vditor.sv.element.innerHTML = this.vditor.lute.SpinVditorSVDOM(markdown,);
             processSVAfterRender(this.vditor, {
                 enableAddUndoStack: true,
                 enableHint: false,
@@ -374,9 +282,7 @@ class Vditor extends VditorMethod {
                 enableInput: false,
             });
         } else {
-            this.vditor.ir.element.innerHTML = this.vditor.lute.Md2VditorIRDOM(
-                markdown
-            );
+            this.vditor.ir.element.innerHTML = this.vditor.lute.Md2VditorIRDOM(markdown,);
             this.vditor.ir.element
                 .querySelectorAll(".vditor-ir__preview[data-render='2']")
                 .forEach((item: HTMLElement) => {
@@ -520,6 +426,80 @@ class Vditor extends VditorMethod {
             enableInput: false,
         });
     }
+
+    private init(id: HTMLElement, mergedOptions: IOptions) {
+        this.vditor = {
+            currentMode: mergedOptions.mode,
+            element: id,
+            hint: new Hint(mergedOptions.hint.extend),
+            lute: undefined,
+            options: mergedOptions,
+            originalInnerHTML: id.innerHTML,
+            outline: new Outline(window.VditorI18n.outline),
+            tip: new Tip(),
+        };
+
+        this.vditor.sv = new Editor(this.vditor);
+        this.vditor.undo = new Undo();
+        this.vditor.wysiwyg = new WYSIWYG(this.vditor);
+        this.vditor.ir = new IR(this.vditor);
+        this.vditor.toolbar = new Toolbar(this.vditor);
+
+        if (mergedOptions.resize.enable) {
+            this.vditor.resize = new Resize(this.vditor);
+        }
+
+        if (this.vditor.toolbar.elements.devtools) {
+            this.vditor.devtools = new DevTools();
+        }
+
+        if (mergedOptions.upload.url || mergedOptions.upload.handler) {
+            this.vditor.upload = new Upload();
+        }
+
+        addScript(
+            mergedOptions._lutePath ||
+            `${mergedOptions.cdn}/dist/js/lute/lute.min.js`,
+            "vditorLuteScript",
+        ).then(() => {
+            this.vditor.lute = setLute({
+                autoSpace: this.vditor.options.preview.markdown.autoSpace,
+                codeBlockPreview: this.vditor.options.preview.markdown
+                    .codeBlockPreview,
+                emojiSite: this.vditor.options.hint.emojiPath,
+                emojis: this.vditor.options.hint.emoji,
+                fixTermTypo: this.vditor.options.preview.markdown.fixTermTypo,
+                footnotes: this.vditor.options.preview.markdown.footnotes,
+                headingAnchor: false,
+                inlineMathDigit: this.vditor.options.preview.math.inlineDigit,
+                linkBase: this.vditor.options.preview.markdown.linkBase,
+                linkPrefix: this.vditor.options.preview.markdown.linkPrefix,
+                listStyle: this.vditor.options.preview.markdown.listStyle,
+                mark: this.vditor.options.preview.markdown.mark,
+                mathBlockPreview: this.vditor.options.preview.markdown
+                    .mathBlockPreview,
+                paragraphBeginningSpace: this.vditor.options.preview.markdown
+                    .paragraphBeginningSpace,
+                sanitize: this.vditor.options.preview.markdown.sanitize,
+                toc: this.vditor.options.preview.markdown.toc,
+            });
+
+            this.vditor.preview = new Preview(this.vditor);
+
+            initUI(this.vditor);
+
+            if (mergedOptions.after) {
+                mergedOptions.after();
+            }
+            if (mergedOptions.icon) {
+                // 防止初始化 2 个编辑器时加载 2 次
+                addScriptSync(
+                    `${mergedOptions.cdn}/dist/js/icons/${mergedOptions.icon}.js`,
+                    "vditorIconScript",
+                );
+            }
+        });
+    }
 }
 
 export default Vditor;
diff --git a/src/js/i18n/en_US.js b/src/js/i18n/en_US.js
@@ -0,0 +1,79 @@
+window.VditorI18n = {
+  "alignCenter": "Center",
+  "alignLeft": "Left",
+  "alignRight": "Right",
+  "alternateText": "Alternate text",
+  "bold": "Blod",
+  "both": "editor & preview",
+  "check": "Task List",
+  "close": "Close",
+  "code": "Code Block",
+  "code-theme": "Code Block Theme Preview",
+  "column": "Column",
+  "comment": "Comment",
+  "confirm": "Confirm",
+  "content-theme": "Content Theme Preview",
+  "copied": "Copied",
+  "copy": "Copy",
+  "delete-column": "Delete Row",
+  "delete-row": "Delete Column",
+  "devtools": "DevTools",
+  "down": "Down",
+  "downloadTip": "The browser does not support the download function",
+  "edit": "Edit",
+  "edit-mode": "Toggle Edit Mode",
+  "emoji": "Emoji",
+  "export": "Export",
+  "fileTypeError": "file type is error",
+  "footnoteRef": "Footnote Ref",
+  "fullscreen": "Toggle Fullscreen",
+  "generate": "Generating",
+  "headings": "Headings",
+  "help": "Help",
+  "imageURL": "image URL",
+  "indent": "Indent",
+  "info": "Info",
+  "inline-code": "Inline Code",
+  "insert-after": "Insert line after",
+  "insert-before": "Insert line Before",
+  "insertColumnLeft": "Insert 1 left",
+  "insertColumnRight": "Insert 1 right",
+  "insertRowAbove": "Insert 1 above",
+  "insertRowBelow": "Insert 1 below",
+  "instantRendering": "Instant Rendering",
+  "italic": "Italic",
+  "language": "Language",
+  "line": "Line",
+  "link": "Link",
+  "linkRef": "Link Ref",
+  "list": "List",
+  "more": "More",
+  "nameEmpty": "Name is empty",
+  "ordered-list": "Order List",
+  "outdent": "Outdent",
+  "outline": "Outline",
+  "over": "over",
+  "performanceTip": "Real-time preview requires ${x}ms, you can close it",
+  "preview": "Preview",
+  "quote": "Quote",
+  "record": "Start Record/End Record",
+  "record-tip": "The device does not support recording",
+  "recording": "recording...",
+  "redo": "Redo",
+  "remove": "Remove",
+  "row": "Row",
+  "spin": "Spin",
+  "splitView": "Split View",
+  "strike": "Strike",
+  "table": "Table",
+  "textIsNotEmpty": "text(no empty)",
+  "title": "Title",
+  "tooltipText": "Tooltip text",
+  "undo": "Undo",
+  "up": "Up",
+  "update": "Update",
+  "upload": "Upload image or file",
+  "uploadError": "upload error",
+  "uploading": "uploading...",
+  "wysiwyg": "WYSIWYG"
+}