Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
T
train-admin-h5
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
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
tangjiale
train-admin-h5
Commits
3de65baa
Commit
3de65baa
authored
Jun 27, 2022
by
tangjiale
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
拓展富文本编辑器,上传图片功能
parent
85315eb9
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
126 additions
and
2 deletions
+126
-2
c-quill-editor.vue
components/common/c-quill-editor.vue
+117
-0
add-course.vue
pages/components/add-course.vue
+9
-2
No files found.
components/common/c-quill-editor.vue
0 → 100644
View file @
3de65baa
<!--
* @Author: tangjiale
* @eMail: 932055106@qq.com
* @Date: 2022-06-27 14:10:41
* @LastEditors: tangjiale
* @LastEditTime: 2022-06-27 15:11:42
-->
<
template
>
<div
style=
"width:100%"
>
<client-only
style=
"width:100%"
>
<div
style=
"width:100%"
>
<quill-editor
style=
"width:100%"
ref=
"myQuillEditor"
:value=
"quillContent"
:options=
"editorOption"
@
change=
"onEditorChange"
></quill-editor>
<el-upload
style=
"width:100%"
accept=
"image/png,image/jpeg,image/jpg,image/gif"
class=
"avatar-uploader quill-img"
name=
"imageFile"
:before-upload=
"getcloudDataMthod"
:action=
"pictureUrl"
:multiple=
"false"
:show-file-list=
"false"
:on-success=
"uploadSuccess"
:headers=
"uploadHeadData"
>
</el-upload>
</div>
</client-only>
</div>
</
template
>
<
script
>
const
toolbarOptions
=
[
[
'bold'
,
'italic'
,
'underline'
,
'strike'
],
[{
header
:
1
},
{
header
:
2
}],
[{
list
:
'ordered'
},
{
list
:
'bullet'
}],
[{
indent
:
'-1'
},
{
indent
:
'+1'
}],
[{
direction
:
'rtl'
}],
[{
color
:
[]
},
{
background
:
[]
}],
[{
align
:
[]
}],
[
'image'
],
]
export
default
{
props
:
{
quillContent
:
{
type
:
String
,
default
:
''
,
},
},
services
:[
'base'
],
data
(){
const
_this
=
this
return
{
pictureUrl
:
'https://test.xiaobentiyu.cn/pxpcapi/common/image'
,
uploadHeadData
:
null
,
editorOption
:
{
theme
:
'snow'
,
modules
:
{
toolbar
:
{
container
:
toolbarOptions
,
handlers
:
{
image
(
value
)
{
if
(
value
)
{
document
.
querySelector
(
'.quill-img input'
).
click
()
}
else
{
_this
.
quill
.
format
(
'image'
,
false
)
}
},
},
},
},
},
}
},
methods
:
{
async
getcloudDataMthod
(
file
)
{
let
formData
=
new
FormData
();
formData
.
append
(
"imageFile"
,
file
);
let
userInfo
=
this
.
myUserInfo
||
{}
//头部传参
this
.
uploadHeadData
=
{
token
:
userInfo
.
token
||
''
}
},
uploadSuccess
(
res
)
{
let
quill
=
this
.
$refs
.
myQuillEditor
.
quill
// 如果上传成功
if
(
res
.
code
&&
res
.
code
==
200
)
{
// 获取光标所在位置
let
length
=
quill
.
getSelection
().
index
;
// 插入图片,res为服务器返回的图片链接地址
quill
.
insertEmbed
(
length
,
'image'
,
res
.
data
)
// 调整光标到最后
quill
.
setSelection
(
length
+
1
)
}
else
{
// 提示信息,需引入Message
this
.
$message
.
error
(
'图片插入失败!'
)
}
},
onEditorChange
(
e
)
{
this
.
$emit
(
'updateQuillContent'
,
e
.
html
)
}
}
}
</
script
>
<
style
>
</
style
>
\ No newline at end of file
pages/components/add-course.vue
View file @
3de65baa
...
...
@@ -3,7 +3,7 @@
* @eMail: 932055106@qq.com
* @Date: 2022-06-06 09:28:37
* @LastEditors: tangjiale
* @LastEditTime: 2022-06-27 1
0:03:24
* @LastEditTime: 2022-06-27 1
5:13:10
-->
<
template
>
<div
class=
"add-course-bg"
>
...
...
@@ -80,7 +80,8 @@
</el-form-item>
<el-form-item
label=
"课程详情:"
prop=
"detail"
class=
"curstom-editor"
>
<quill-editor
:options=
"editorOption"
v-model=
"param.detail"
></quill-editor>
<!-- <quill-editor :options="editorOption" v-model="param.detail"></quill-editor> -->
<c-quill-editor
style=
"width:100%"
:quillContent=
"param.detail"
@
updateQuillContent=
"quillContent"
></c-quill-editor>
</el-form-item>
<div
class=
"btns"
>
...
...
@@ -94,8 +95,10 @@
<
script
>
import
{
Loading
}
from
'element-ui'
;
import
cQuillEditor
from
'../../components/common/c-quill-editor.vue'
export
default
{
services
:[
'base'
,
'course'
],
components
:{
cQuillEditor
},
data
(){
return
{
param
:{
...
...
@@ -135,6 +138,9 @@ export default {
},
methods
:{
quillContent
(
e
){
this
.
param
.
detail
=
e
},
handCheck
(
e
){
this
.
mangerList
=
[]
this
.
mangerSelect
=
[]
...
...
@@ -308,6 +314,7 @@ export default {
}
/
deep
/
.el-form-item__content
{
height
:
auto
!important
;
width
:
100%
;
}
.image-ctn
{
height
:
208px
;
...
...
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