Skip to content

perf[Tinymce]: dynamic import tinymce #2102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 21, 2019
Merged

perf[Tinymce]: dynamic import tinymce #2102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2d280b8
tweak
PanJiaChen May 17, 2019
92ca2ff
refine
PanJiaChen May 17, 2019
24f0821
support ie
PanJiaChen May 17, 2019
35fd903
fix bug
PanJiaChen May 20, 2019
fd71606
refine
PanJiaChen May 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@
<title><%= webpackConfig.name %></title>
</head>
<body>
<!-- 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>
Expand Down
39 changes: 39 additions & 0 deletions src/components/Tinymce/dynamicLoadScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
20 changes: 18 additions & 2 deletions src/components/Tinymce/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/tinymce.min.js'

export default {
name: 'Tinymce',
Expand Down Expand Up @@ -82,10 +86,12 @@ export default {
}
},
mounted() {
this.initTinymce()
this.init()
},
activated() {
this.initTinymce()
if (window.tinymce) {
this.initTinymce()
}
},
deactivated() {
this.destroyTinymce()
Expand All @@ -94,6 +100,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({
Expand Down
10 changes: 0 additions & 10 deletions vue.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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

Expand Down