:recycle: #1103

CHANGELOG.md

@@ -95,8 +95,10 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
-### v3.8.8 / 2021-10-xx
+### v3.8.8 / 2021-11-xx
 
+* [1103](https://github.com/Vanessa219/vditor/pull/1103) 支持多语言切换 `改进功能`
+* [1105](https://github.com/Vanessa219/vditor/pull/1105) 兼容 Firefox 中的代码语言选择 `修复缺陷`
 * [1098](https://github.com/Vanessa219/vditor/pull/1098) 兼容 Firefox 中的文件拖拽 `修复缺陷`
 * [1097](https://github.com/Vanessa219/vditor/pull/1097) options.hint.extend[].hint 支持异步 `改进功能`
 * [1101](https://github.com/Vanessa219/vditor/pull/1101) 支持 options.upload.handler 异步 `改进功能`

demo/index.html

@@ -62,9 +62,8 @@
     </button> &nbsp; &nbsp;
     <button onclick="window.vditor.setTheme('light', 'light', 'github');document.querySelector('body').style.backgroundColor=''">
         Light Mode
-    </button>
-    &nbsp; &nbsp; &nbsp; &nbsp;
-    <select autocomplete="off" onchange="console.log(this.value);setLang(this.value)">
+    </button> &nbsp; &nbsp;
+    <select autocomplete="off" onchange="setLang(this.value)">
         <option selected="selected" value="zh_CN">zh_CN</option>
         <option value="zh_TW">zh_TW</option>
         <option value="en_US">en_US</option>

demo/index.js

@@ -2,6 +2,7 @@ import Vditor from '../src/index'
 import '../src/assets/scss/index.scss'
 
 // new VConsole()
+
 let toolbar
 if (window.innerWidth < 768) {
   toolbar = [
@@ -47,14 +48,13 @@ if (window.innerWidth < 768) {
       ],
     }]
 }
-let lang = 'zh_CN'
-function init(){
+const initVditor = (language) => {
   window.vditor = new Vditor('vditor', {
     // _lutePath: `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`,
     _lutePath: 'src/js/lute/lute.min.js',
     cdn: "http://localhost:9000",
     toolbar,
-    lang: lang,
+    lang: language,
     mode: 'wysiwyg',
     height: window.innerHeight + 100,
     outline: {
@@ -134,9 +134,8 @@ function init(){
     },
   })
 }
-init()
-window.setLang = (l) => {
+initVditor("zh_CN");
+window.setLang = (language) => {
   window.vditor.destroy()
-  lang = l
-  init()
-}
+  initVditor(language)
+}

src/index.ts

@@ -73,13 +73,13 @@ class Vditor extends VditorMethod {
                     "options.lang error, see https://ld246.com/article/1549638745630#options",
                 );
             } else {
-                const i18nScriptPrefix = "vditorI18nScript"
-                const i18nScriptID = i18nScriptPrefix + "_" + mergedOptions.lang
-                document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach(el=>{
-                    if(el.id !== i18nScriptID){
-                        document.head.removeChild(el)
+                const i18nScriptPrefix = "vditorI18nScript";
+                const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+                document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                    if (el.id !== i18nScriptID) {
+                        document.head.removeChild(el);
                     }
-                })
+                });
                 addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID).then(() => {
                     this.init(id as HTMLElement, mergedOptions);
                 });
@@ -89,7 +89,7 @@ class Vditor extends VditorMethod {
             this.init(id, mergedOptions);
         }
     }
-    
+
     /** 设置主题 */
     public setTheme(
         theme: "dark" | "classic",

src/ts/hint/index.ts

@@ -151,7 +151,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
         if (vditor.currentMode === "wysiwyg" && range.startContainer.nodeType !== 3 ) {
             const startContainer = range.startContainer as HTMLElement;
             let inputElement: HTMLInputElement;
-            if(startContainer.classList.contains("vditor-input")) {
+            if (startContainer.classList.contains("vditor-input")) {
                 inputElement = startContainer as HTMLInputElement;
             } else {
                 inputElement = startContainer.firstElementChild as HTMLInputElement;

src/ts/markdown/previewRender.ts

@@ -90,7 +90,14 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
                 "options.lang error, see https://ld246.com/article/1549638745630#options",
             );
         } else {
-            addScriptSync(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript");
+            const i18nScriptPrefix = "vditorI18nScript";
+            const i18nScriptID = i18nScriptPrefix + mergedOptions.lang;
+            document.querySelectorAll(`head script[id^="${i18nScriptPrefix}"]`).forEach((el) => {
+                if (el.id !== i18nScriptID) {
+                    document.head.removeChild(el);
+                }
+            });
+            addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, i18nScriptID);
         }
     } else {
         window.VditorI18n = mergedOptions.i18n;