From 2d280b8f0b3f76d8d9a1a04a26e3ec3f9abee63b Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 17 May 2019 18:03:18 +0800 Subject: [PATCH 1/5] 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 9bb2d7fc34e..e91850091e7 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 00000000000..40734d8d6b0 --- /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 62cb2c06934..7edf27b24e3 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 41a7f600be8..c5e31642dcc 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 From 92ca2ff0a3e9283dc042b7f41d4b99ccf9a40dd4 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 17 May 2019 18:16:42 +0800 Subject: [PATCH 2/5] refine --- src/components/Tinymce/index.vue | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index 7edf27b24e3..38008b39128 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -87,16 +87,10 @@ export default { } }, mounted() { - load(tinymceCDN, (err) => { - if (err) { - this.$message.error(err.message) - return - } - this.initTinymce() - }) + this.init() }, activated() { - this.initTinymce() + this.init() }, deactivated() { this.destroyTinymce() @@ -105,6 +99,15 @@ export default { this.destroyTinymce() }, methods: { + init() { + load(tinymceCDN, (err) => { + if (err) { + this.$message.error(err.message) + return + } + this.initTinymce() + }) + }, initTinymce() { const _this = this window.tinymce.init({ From 24f082156bec1a211dac08c09915c409565d9749 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 17 May 2019 18:22:32 +0800 Subject: [PATCH 3/5] support ie --- src/components/Tinymce/dynamicLoadScript.js | 25 +++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/Tinymce/dynamicLoadScript.js b/src/components/Tinymce/dynamicLoadScript.js index 40734d8d6b0..122c012c8a6 100644 --- a/src/components/Tinymce/dynamicLoadScript.js +++ b/src/components/Tinymce/dynamicLoadScript.js @@ -8,15 +8,32 @@ const dynamicLoadScript = (src, callback) => { script.id = src document.body.appendChild(script) - script.onload = () => { - if (cb) cb(null, script) + const onend = 'onload' in script ? stdOnEnd : ieOnEnd + onend(script, cb) + } + + if (existingScript && cb) cb() + + function stdOnEnd(script, cb) { + script.onload = function() { + this.onerror = this.onload = null + cb(null, script) } - script.onerror = () => { + script.onerror = function() { + // this.onload = null here is necessary + // because even IE9 works not like others + this.onerror = this.onload = null cb(new Error('Failed to load ' + src), script) } } - if (existingScript && cb) cb() + function ieOnEnd(script, cb) { + script.onreadystatechange = function() { + if (this.readyState !== 'complete' && this.readyState !== 'loaded') return + this.onreadystatechange = null + cb(null, script) // there is no way to catch loading errors in IE8 + } + } } export default dynamicLoadScript From 35fd903af3d7525088d9e28561c58f8140bd6a83 Mon Sep 17 00:00:00 2001 From: Pan Date: Mon, 20 May 2019 10:36:30 +0800 Subject: [PATCH 4/5] fix bug --- src/components/Tinymce/dynamicLoadScript.js | 10 +++++----- src/components/Tinymce/index.vue | 4 +++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Tinymce/dynamicLoadScript.js b/src/components/Tinymce/dynamicLoadScript.js index 122c012c8a6..46a93290ada 100644 --- a/src/components/Tinymce/dynamicLoadScript.js +++ b/src/components/Tinymce/dynamicLoadScript.js @@ -8,20 +8,20 @@ const dynamicLoadScript = (src, callback) => { script.id = src document.body.appendChild(script) - const onend = 'onload' in script ? stdOnEnd : ieOnEnd - onend(script, cb) + const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd + onEnd(script, cb) } - if (existingScript && cb) cb() + if (existingScript && cb) cb(null, existingScript) function stdOnEnd(script, cb) { script.onload = function() { + // this.onload = null here is necessary + // because even IE9 works not like others this.onerror = this.onload = null cb(null, script) } script.onerror = function() { - // this.onload = null here is necessary - // because even IE9 works not like others this.onerror = this.onload = null cb(new Error('Failed to load ' + src), script) } diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index 38008b39128..7a38e59f96b 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -90,7 +90,9 @@ export default { this.init() }, activated() { - this.init() + if (window.tinymce) { + this.initTinymce() + } }, deactivated() { this.destroyTinymce() From fd7160644a9c1a239fab7088819abf7fb06a9033 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 21 May 2019 10:23:19 +0800 Subject: [PATCH 5/5] refine --- src/components/Tinymce/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue index 7a38e59f96b..a46b37d63ec 100644 --- a/src/components/Tinymce/index.vue +++ b/src/components/Tinymce/index.vue @@ -17,7 +17,6 @@ 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' @@ -102,6 +101,7 @@ export default { }, methods: { init() { + // dynamic load tinymce from cdn load(tinymceCDN, (err) => { if (err) { this.$message.error(err.message)