Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄瑜
VueElementTemplate
Commits
a10cfcc8
Commit
a10cfcc8
authored
8 years ago
by
Pan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add tinymce upload demo
parent
c8e632f0
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
125 additions
and
1 deletion
+125
-1
editorImage.vue
src/components/Tinymce/components/editorImage.vue
+102
-0
index.vue
src/components/Tinymce/index.vue
+23
-1
No files found.
src/components/Tinymce/components/editorImage.vue
0 → 100644
View file @
a10cfcc8
<
template
>
<div
class=
"upload-container"
>
<el-button
icon=
'upload'
:style=
"
{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
</el-button>
<el-dialog
v-model=
"dialogVisible"
>
<el-upload
class=
"editor-slide-upload"
action=
"https://httpbin.org/post"
:multiple=
"true"
:file-list=
"fileList"
:show-file-list=
"true"
list-type=
"picture-card"
:on-remove=
"handleRemove"
:on-success=
"handleSuccess"
:before-upload=
"beforeUpload"
>
<el-button
size=
"small"
type=
"primary"
>
点击上传
</el-button>
</el-upload>
<el-button
@
click=
"dialogVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"handleSubmit"
>
确 定
</el-button>
</el-dialog>
</div>
</
template
>
<
script
>
// import { getToken } from 'api/qiniu'
export
default
{
name
:
'editorSlideUpload'
,
props
:
{
color
:
{
type
:
String
,
default
:
'#20a0ff'
}
},
data
()
{
return
{
dialogVisible
:
false
,
listObj
:
{},
fileList
:
[]
}
},
methods
:
{
checkAllSuccess
()
{
return
Object
.
keys
(
this
.
listObj
).
every
(
item
=>
this
.
listObj
[
item
].
hasSuccess
)
},
handleSubmit
()
{
const
arr
=
Object
.
keys
(
this
.
listObj
).
map
(
v
=>
this
.
listObj
[
v
])
if
(
!
this
.
checkAllSuccess
())
{
this
.
$message
(
'请等待所有图片上传成功 或 出现了网络问题,请刷新页面重新上传!'
)
return
}
console
.
log
(
arr
)
this
.
$emit
(
'successCBK'
,
arr
)
this
.
listObj
=
{}
this
.
fileList
=
[]
this
.
dialogVisible
=
false
},
handleSuccess
(
response
,
file
)
{
const
uid
=
file
.
uid
const
objKeyArr
=
Object
.
keys
(
this
.
listObj
)
for
(
let
i
=
0
,
len
=
objKeyArr
.
length
;
i
<
len
;
i
++
)
{
if
(
this
.
listObj
[
objKeyArr
[
i
]].
uid
===
uid
)
{
this
.
listObj
[
objKeyArr
[
i
]].
url
=
response
.
files
.
file
this
.
listObj
[
objKeyArr
[
i
]].
hasSuccess
=
true
return
}
}
},
handleRemove
(
file
)
{
const
uid
=
file
.
uid
const
objKeyArr
=
Object
.
keys
(
this
.
listObj
)
for
(
let
i
=
0
,
len
=
objKeyArr
.
length
;
i
<
len
;
i
++
)
{
if
(
this
.
listObj
[
objKeyArr
[
i
]].
uid
===
uid
)
{
delete
this
.
listObj
[
objKeyArr
[
i
]]
return
}
}
},
beforeUpload
(
file
)
{
const
_self
=
this
const
_URL
=
window
.
URL
||
window
.
webkitURL
const
fileName
=
file
.
uid
this
.
listObj
[
fileName
]
=
{}
return
new
Promise
((
resolve
,
reject
)
=>
{
const
img
=
new
Image
()
img
.
src
=
_URL
.
createObjectURL
(
file
)
img
.
onload
=
function
()
{
_self
.
listObj
[
fileName
]
=
{
hasSuccess
:
false
,
uid
:
file
.
uid
,
width
:
this
.
width
,
height
:
this
.
height
}
}
resolve
(
true
)
})
}
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.upload-container
{
.editor-slide-upload
{
margin-bottom
:
20px
;
}
}
</
style
>
This diff is collapsed.
Click to expand it.
src/components/Tinymce/index.vue
View file @
a10cfcc8
<
template
>
<div
class=
'tinymce-container editor-container'
>
<textarea
class=
'tinymce-textarea'
:id=
"id"
></textarea>
<div
class=
"editor-custom-btn-container"
>
<editorImage
color=
"#20a0ff"
class=
"editor-upload-btn"
@
successCBK=
"imageSuccessCBK"
></editorImage>
</div>
</div>
</
template
>
<
script
>
import
editorImage
from
'./components/editorImage'
export
default
{
name
:
'tinymce'
,
components
:
{
editorImage
},
props
:
{
id
:
{
type
:
String
,
...
...
@@ -143,6 +149,14 @@ export default {
}
})
},
methods
:
{
imageSuccessCBK
(
arr
)
{
const
_this
=
this
arr
.
forEach
(
v
=>
{
window
.
tinymce
.
get
(
_this
.
id
).
insertContent
(
`<img class="wscnph" src="
${
v
.
url
}
" >`
)
})
}
},
destroyed
()
{
window
.
tinymce
.
get
(
this
.
id
).
destroy
()
}
...
...
@@ -153,9 +167,17 @@ export default {
.tinymce-container
{
position
:
relative
}
.tinymce-textarea
{
visibility
:
hidden
;
z-index
:
-1
;
}
.editor-custom-btn-container
{
position
:
absolute
;
right
:
15px
;
/*z-index: 2005;*/
top
:
18px
;
}
.editor-upload-btn
{
display
:
inline-block
;
}
</
style
>
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment