8000 add TinyMce components · pycoder404/blog-vue@442be45 · GitHub
[go: up one dir, main page]
Skip to content

Commit 442be45

Browse files
pycoder404pycoder404
committed
add TinyMce components
1 parent 138b669 commit 442be45

File tree

6 files changed

+467
-0
lines changed

6 files changed

+467
-0
lines changed

‎src/components/TinyMce/components/EditorImage.vue

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<template>
2+
<div class="upload-container">
3+
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
4+
upload
5+
</el-button>
6+
<el-dialog v-model:visable="dialogVisible">
7+
<el-upload
8+
:multiple="true"
9+
:file-list="fileList"
10+
:show-file-list="true"
11+
:on-remove="handleRemove"
12+
:on-success="handleSuccess"
13+
:before-upload="beforeUpload"
14+
class="editor-slide-upload"
15+
action="https://httpbin.org/post"
16+
list-type="picture-card"
17+
>
18+
<el-button size="small" type="primary">
19+
Click upload
20+
</el-button>
21+
</el-upload>
22+
<el-button @click="dialogVisible = false">
23+
Cancel
24+
</el-button>
25+
<el-button type="primary" @click="handleSubmit">
26+
Confirm
27+
</el-button>
28+
</el-dialog>
29+
</div>
30+
</template>
31+
32+
<script>
33+
// import { getToken } from 'api/qiniu'
34+
35+
export default {
36+
name: 'EditorSlideUpload',
37+
props: {
38+
color: {
39+
type: String,
40+
default: '#1890ff'
41+
}
42+
},
43+
data() {
44+
return {
45+
dialogVisible: false,
46+
listObj: {},
47+
fileList: []
48+
}
49+
},
50+
methods: {
51+
checkAllSuccess() {
52+
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
53+
},
54+
handleSubmit() {
55+
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
56+
if (!this.checkAllSuccess()) {
57+
this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
58+
return
59+
}
60+
this.$emit('successCBK', arr)
61+
this.listObj = {}
62+
this.fileList = []
63+
this.dialogVisible = false
64+
},
65+
handleSuccess(response, file) {
66+
const uid = file.uid
67+
const objKeyArr = Object.keys(this.listObj)
68+
for (let i = 0, len = objKeyArr.length; i < len; i++) {
69+
if (this.listObj[objKeyArr[i]].uid === uid) {
70+
this.listObj[objKeyArr[i]].url = response.files.file
71+
this.listObj[objKeyArr[i]].hasSuccess = true
72+
return
73+
}
74+
}
75+
},
76+
handleRemove(file) {
77+
const uid = file.uid
78+
const objKeyArr = Object.keys(this.listObj)
79+
for (let i = 0, len = objKeyArr.length; i < len; i++) {
80+
if (this.listObj[objKeyArr[i]].uid === uid) {
81+
delete this.listObj[objKeyArr[i]]
82+
return
83+
}
84+
}
85+
},
86+
beforeUpload(file) {
87+
const _self = this
88+
const _URL = window.URL || window.webkitURL
89+
const fileName = file.uid
90+
this.listObj[fileName] = {}
91+
return new Promise((resolve,reject) => {
92+
const img = new Image()
93+
img.src = _URL.createObjectURL(file)
94+
img.onload = function() {
95+
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
96+
}
97+
resolve(true)
98+
if (img===0) {
99+
reject("xxxx")
100+
}
101+
})
102+
}
103+
}
104+
}
105+
</script>
106+
107+
<style lang="scss" scoped>
108+
.editor-slide-upload {
109+
margin-bottom: 20px;
110+
::v-deep .el-upload--picture-card {
111+
width: 100%;
112+
}
113+
}
114+
</style>

‎src/components/TinyMce/dynamicLoadScript.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
let callbacks = []
2+
3+
function loadedTinymce() {
4+
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
5+
// check is successfully downloaded script
6+
return window.tinymce
7+
}
8+
9+
const dynamicLoadScript = (src, callback) => {
10+
const existingScript = document.getElementById(src)
11+
const cb = callback || function() {}
12+
13+
if (!existingScript) {
14+
const script = document.createElement('script')
15+
script.src = src // src url for the third-party library being loaded.
16+
script.id = src
17+
document.body.appendChild(script)
18+
callbacks.push(cb)
19+
const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
20+
onEnd(script)
21+
}
22+
23+
if (existingScript && cb) {
24+
if (loadedTinymce()) {
25+
cb(null, existingScript)
26+
} else {
27+
callbacks.push(cb)
28+
}
29+
}
30+
31+
function stdOnEnd(script) {
32+
script.onload = function() {
33+
// this.onload = null here is necessary
34+
// because even IE9 works not like others
35+
this.onerror = this.onload = null
36+
for (const cb of callbacks) {
37+
cb(null, script)
38+
}
39+
callbacks = null
40+
}
41+
script.onerror = function() {
42+
this.onerror = this.onload = null
43+
cb(new Error('Failed to load ' + src), script)
44+
}
45+
}
46+
47+
function ieOnEnd(script) {
48+
script.onreadystatechange = function() {
49+
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
50+
this.onreadystatechange = null
51+
for (const cb of callbacks) {
52+
cb(null, script) // there is no way to catch loading errors in IE8
53+
}
54+
callbacks = null
55+
}
56+
}
57+
}
58+
59+
export default dynamicLoadScript

0 commit comments

Comments
 (0)
0