From 2d280b8f0b3f76d8d9a1a04a26e3ec3f9abee63b Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 17 May 2019 18:03:18 +0800 Subject: [PATCH] tweak --- public/index.html | 4 ---- src/components/Tinymce/dynamicLoadScript.js | 22 +++++++++++++++++++++ src/components/Tinymce/index.vue | 13 +++++++++++- vue.config.js | 10 ---------- 4 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 src/components/Tinymce/dynamicLoadScript.js diff --git a/public/index.html b/public/index.html index 9bb2d7fc..e9185009 100644 --- a/public/index.html +++ b/public/index.html @@ -9,10 +9,6 @@ <%= webpackConfig.name %> - - <% for(var js of htmlWebpackPlugin.options.cdn.js) { %> - - <% } %>
diff --git a/src/components/Tinymce/dynamicLoadScript.js b/src/components/Tinymce/dynamicLoadScript.js new file mode 100644 index 00000000..40734d8d --- /dev/null +++ b/src/components/Tinymce/dynamicLoadScript.js @@ -0,0 +1,22 @@ +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) + + script.onload = () => { + if (cb) cb(null, script) + } + script.onerror = () => { + cb(new Error('Failed to load ' + src), script) + } + } + + if (existingScript && cb) cb() +} + +export default dynamicLoadScript diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index 62cb2c06..7edf27b2 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -15,6 +15,11 @@ import editorImage from './components/EditorImage' import plugins from './plugins' import toolbar from './toolbar' +import load from './dynamicLoadScript' + +// inject tinymce into index.html +// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one +const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js' export default { name: 'Tinymce', @@ -82,7 +87,13 @@ export default { } }, mounted() { - this.initTinymce() + load(tinymceCDN, (err) => { + if (err) { + this.$message.error(err.message) + return + } + this.initTinymce() + }) }, activated() { this.initTinymce() diff --git a/vue.config.js b/vue.config.js index 41a7f600..c5e31642 100644 --- a/vue.config.js +++ b/vue.config.js @@ -57,16 +57,6 @@ module.exports = { } }, chainWebpack(config) { - const cdn = { - // inject tinymce into index.html - // why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one - js: ['https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'] - } - config.plugin('html') - .tap(args => { - args[0].cdn = cdn - return args - }) config.plugins.delete('preload') // TODO: need test config.plugins.delete('prefetch') // TODO: need test