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..46a93290
--- /dev/null
+++ b/src/components/Tinymce/dynamicLoadScript.js
@@ -0,0 +1,39 @@
+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)
+
+ const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
+ onEnd(script, 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.onerror = this.onload = null
+ cb(new Error('Failed to load ' + src), script)
+ }
+ }
+
+ 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
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 08ef768d..670a0e53 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -15,6 +15,10 @@
import editorImage from './components/EditorImage'
import plugins from './plugins'
import toolbar from './toolbar'
+import load from './dynamicLoadScript'
+
+// 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',
@@ -91,10 +95,12 @@ export default {
}
},
mounted() {
- this.initTinymce()
+ this.init()
},
activated() {
- this.initTinymce()
+ if (window.tinymce) {
+ this.initTinymce()
+ }
},
deactivated() {
this.destroyTinymce()
@@ -103,6 +109,16 @@ export default {
this.destroyTinymce()
},
methods: {
+ init() {
+ // dynamic load tinymce from cdn
+ load(tinymceCDN, (err) => {
+ if (err) {
+ this.$message.error(err.message)
+ return
+ }
+ this.initTinymce()
+ })
+ },
initTinymce() {
const _this = this
window.tinymce.init({
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