Feat/demo (#1103)

* fix: 修复在单页面应用中编辑器无法切换语言

编辑器缓存i18n脚本时未考虑多语言切换
通过给缓存key加上语言的后缀解决

* feat: demo添加语言切换演示按钮

demo添加语言切换按钮
一是为了测试单页面语言切换正常工作
二是为了在demo中体现多语言支持

demo/index.html

@@ -63,6 +63,15 @@
     <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)">
+        <option selected="selected" value="zh_CN">zh_CN</option>
+        <option value="zh_TW">zh_TW</option>
+        <option value="en_US">en_US</option>
+        <option value="ru_RU">ru_RU</option>
+        <option value="ja_JP">ja_JP</option>
+        <option value="ko_KR">ko_KR</option>
+    </select>
 </div>
 <div id="vditor">
 <h1>Vditor</h1>

demo/index.js

@@ -2,7 +2,6 @@ import Vditor from '../src/index'
 import '../src/assets/scss/index.scss'
 
 // new VConsole()
-
 let toolbar
 if (window.innerWidth < 768) {
   toolbar = [
@@ -48,87 +47,96 @@ if (window.innerWidth < 768) {
       ],
     }]
 }
-
-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,
-  mode: 'wysiwyg',
-  height: window.innerHeight + 100,
-  outline: {
-    enable: true,
-    position: 'right',
-  },
-  debugger: true,
-  typewriterMode: true,
-  placeholder: 'Hello, Vditor!',
-  preview: {
-    markdown: {
-      toc: true,
-      mark: true,
-      footnotes: true,
-      autoSpace: true,
+let lang = 'zh_CN'
+function init(){
+  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,
+    mode: 'wysiwyg',
+    height: window.innerHeight + 100,
+    outline: {
+      enable: true,
+      position: 'right',
     },
-    math: {
-      engine: 'KaTeX',
+    debugger: true,
+    typewriterMode: true,
+    placeholder: 'Hello, Vditor!',
+    preview: {
+      markdown: {
+        toc: true,
+        mark: true,
+        footnotes: true,
+        autoSpace: true,
+      },
+      math: {
+        engine: 'KaTeX',
+      },
     },
-  },
-  toolbarConfig: {
-    pin: true,
-  },
-  counter: {
-    enable: true,
-    type: 'text',
-  },
-  hint: {
-    emojiPath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji',
-    emojiTail: '<a href="https://ld246.com/settings/function" target="_blank">设置常用表情</a>',
-    emoji: {
-      'sd': '💔',
-      'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
+    toolbarConfig: {
+      pin: true,
     },
-    parse: false,
-    extend: [
-      {
-        key: '@',
-        hint: (key) => {
-          console.log(key)
-          if ('vanessa'.indexOf(key.toLocaleLowerCase()) > -1) {
-            return [
-              {
-                value: '@Vanessa',
-                html: '<img src="https://avatars0.githubusercontent.com/u/970828?s=60&v=4"/> Vanessa',
-              }]
-          }
-          return []
-        },
+    counter: {
+      enable: true,
+      type: 'text',
+    },
+    hint: {
+      emojiPath: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/emoji',
+      emojiTail: '<a href="https://ld246.com/settings/function" target="_blank">设置常用表情</a>',
+      emoji: {
+        'sd': '💔',
+        'j': 'https://unpkg.com/[email protected]/dist/images/emoji/j.png',
       },
-      {
-        key: '#',
-        hint: (key) => {
-          console.log(key)
-          if ('vditor'.indexOf(key.toLocaleLowerCase()) > -1) {
-            return [
-              {
-                value: '#Vditor',
-                html: '<span style="color: #999;">#Vditor</span> ♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。',
-              }]
-          }
-          return []
+      parse: false,
+      extend: [
+        {
+          key: '@',
+          hint: (key) => {
+            console.log(key)
+            if ('vanessa'.indexOf(key.toLocaleLowerCase()) > -1) {
+              return [
+                {
+                  value: '@Vanessa',
+                  html: '<img src="https://avatars0.githubusercontent.com/u/970828?s=60&v=4"/> Vanessa',
+                }]
+            }
+            return []
+          },
         },
-      }],
-  },
-  tab: '\t',
-  upload: {
-    accept: 'image/*,.mp3, .wav, .rar',
-    token: 'test',
-    url: '/api/upload/editor',
-    linkToImgUrl: '/api/upload/fetch',
-    filename (name) {
-      return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
-        replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-        replace('/\\s/g', '')
+        {
+          key: '#',
+          hint: (key) => {
+            console.log(key)
+            if ('vditor'.indexOf(key.toLocaleLowerCase()) > -1) {
+              return [
+                {
+                  value: '#Vditor',
+                  html: '<span style="color: #999;">#Vditor</span> ♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。',
+                }]
+            }
+            return []
+          },
+        }],
+    },
+    tab: '\t',
+    upload: {
+      accept: 'image/*,.mp3, .wav, .rar',
+      token: 'test',
+      url: '/api/upload/editor',
+      linkToImgUrl: '/api/upload/fetch',
+      filename (name) {
+        return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
+          replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
+          replace('/\\s/g', '')
+      },
     },
-  },
-})
+  })
+}
+init()
+window.setLang = (l) => {
+  window.vditor.destroy()
+  lang = l
+  init()
+}

src/index.ts

@@ -73,7 +73,14 @@ class Vditor extends VditorMethod {
                     "options.lang error, see https://ld246.com/article/1549638745630#options",
                 );
             } else {
-                addScript(`${mergedOptions.cdn}/dist/js/i18n/${mergedOptions.lang}.js`, "vditorI18nScript").then(() => {
+                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);
                 });
             }
@@ -82,7 +89,7 @@ class Vditor extends VditorMethod {
             this.init(id, mergedOptions);
         }
     }
-
+    
     /** 设置主题 */
     public setTheme(
         theme: "dark" | "classic",