perf[Tinymce]: dynamic import tinymce(#2102)
This commit is contained in:
parent
bd81477202
commit
cf1f40ddad
|
@ -9,10 +9,6 @@
|
||||||
<title><%= webpackConfig.name %></title>
|
<title><%= webpackConfig.name %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- import cdn js -->
|
|
||||||
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
|
|
||||||
<script src="<%=js%>"></script>
|
|
||||||
<% } %>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -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
|
|
@ -15,6 +15,10 @@
|
||||||
import editorImage from './components/EditorImage'
|
import editorImage from './components/EditorImage'
|
||||||
import plugins from './plugins'
|
import plugins from './plugins'
|
||||||
import toolbar from './toolbar'
|
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 {
|
export default {
|
||||||
name: 'Tinymce',
|
name: 'Tinymce',
|
||||||
|
@ -91,10 +95,12 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initTinymce()
|
this.init()
|
||||||
},
|
},
|
||||||
activated() {
|
activated() {
|
||||||
this.initTinymce()
|
if (window.tinymce) {
|
||||||
|
this.initTinymce()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
deactivated() {
|
deactivated() {
|
||||||
this.destroyTinymce()
|
this.destroyTinymce()
|
||||||
|
@ -103,6 +109,16 @@ export default {
|
||||||
this.destroyTinymce()
|
this.destroyTinymce()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
init() {
|
||||||
|
// dynamic load tinymce from cdn
|
||||||
|
load(tinymceCDN, (err) => {
|
||||||
|
if (err) {
|
||||||
|
this.$message.error(err.message)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.initTinymce()
|
||||||
|
})
|
||||||
|
},
|
||||||
initTinymce() {
|
initTinymce() {
|
||||||
const _this = this
|
const _this = this
|
||||||
window.tinymce.init({
|
window.tinymce.init({
|
||||||
|
|
|
@ -57,16 +57,6 @@ module.exports = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
chainWebpack(config) {
|
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('preload') // TODO: need test
|
||||||
config.plugins.delete('prefetch') // TODO: need test
|
config.plugins.delete('prefetch') // TODO: need test
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue