perf(Tinymce): 动态加载 tinymce

Author: cklwblove

public/index.html

@@ -11,10 +11,6 @@
     <noscript>
       <strong>很抱歉，如果没有启用JavaScript，此项目将无法正常运行。请启用它。</strong>
     </noscript>
-    <!-- import cdn js -->
-    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
-    <script src="<%=js%>"></script>
-    <% } %>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

src/components/Tinymce/dynamicLoadScript.ts

@@ -0,0 +1,67 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+
+let callbacks: any = [];
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce;
+}
+
+const dynamicLoadScript = (src, callback) => {
+  const existingScript = document.getElementById(src);
+  const cb = callback || function () {
+  };
+
+  if (!existingScript) {
+    const script = document.createElement('script');
+    script.src = src; // src url for the third-party library being loaded.
+    script.id = src;
+    document.body.appendChild(script);
+    callbacks.push(cb);
+    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;
+    onEnd(script);
+  }
+
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript);
+    } else {
+      callbacks.push(cb);
+    }
+  }
+
+  function stdOnEnd(script) {
+    // tslint:disable-next-line:space-before-function-paren
+    script.onload = function () {
+      // this.onload = null here is necessary
+      // because even IE9 works not like others
+      this.onerror = this.onload = null;
+      for (const cb of callbacks) {
+        cb(null, script);
+      }
+      callbacks = null;
+    };
+    // tslint:disable-next-line:space-before-function-paren
+    script.onerror = function () {
+      this.onerror = this.onload = null;
+      cb(new Error('Failed to load ' + src), script);
+    };
+  }
+
+  function ieOnEnd(script) {
+    // tslint:disable-next-line:space-before-function-paren
+    script.onreadystatechange = function () {
+      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;
+      this.onreadystatechange = null;
+      for (const cb of callbacks) {
+        cb(null, script); // there is no way to catch loading errors in IE8
+      }
+      callbacks = null;
+    };
+  }
+};
+
+export default dynamicLoadScript;