书评新增内容图片上传
This commit is contained in:
@fawn-nine
@@ -143,7 +143,7 @@ import global from '../../common/common.vue' //引入共用组间
|
||||
this.dataForm.bookId = data.bookChapter.id
|
||||
this.dataForm.chapter = data.bookChapter.chapter
|
||||
this.dataForm.content = data.bookChapter.content
|
||||
if (data.bookChapter.voices != '') {
|
||||
if (data.bookChapter.voices != '' && data.bookChapter.voices != null) {
|
||||
this.fileListVoices.push({
|
||||
name:data.bookChapter.chapter,
|
||||
url: data.bookChapter.voices
|
||||
|
||||
@@ -31,6 +31,8 @@
|
||||
<el-input type="textarea" rows="4" v-model="dataForm.bookdesc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="书评详情" prop="productDetails">
|
||||
<el-upload class="avatar-uploader" :action="baseUrl + '/oss/fileoss'" accept=".jpeg,.jpg,.gif,.png" :show-file-list="false" :on-success="contentUploadSuccess" >
|
||||
</el-upload>
|
||||
<quill-editor v-model="dataForm.productDetails" ref="myQuillEditor" :options="editorOption"
|
||||
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
|
||||
@ready="onEditorReady($event)" class="shangpin_editor">
|
||||
@@ -57,6 +59,23 @@
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
|
||||
const toolbarOptions = [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
|
||||
['blockquote', 'code-block'], //引用，代码块
|
||||
[{ 'header': 1 }, { 'header': 2 }], // 几级标题
|
||||
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表，无序列表
|
||||
[{ 'script': 'sub' }, { 'script': 'super' }], // 下角标，上角标
|
||||
[{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
|
||||
[{ 'direction': 'rtl' }], // 文字输入方向
|
||||
[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
|
||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
|
||||
[{ 'color': [] }, { 'background': [] }], // 颜色选择
|
||||
[{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
|
||||
[{ 'align': [] }], // 居中
|
||||
['clean'], // 清除样式,
|
||||
['link', 'image'], // 上传图片、上传视频
|
||||
]
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -103,51 +122,71 @@
|
||||
// 富文本编辑器配置
|
||||
editorOption: {
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
['blockquote', 'code-block'], // 引用 代码块
|
||||
[{
|
||||
header: 1
|
||||
}, {
|
||||
header: 2
|
||||
}], // 1、2 级标题
|
||||
[{
|
||||
list: 'ordered'
|
||||
}, {
|
||||
list: 'bullet'
|
||||
}], // 有序、无序列表
|
||||
[{
|
||||
script: 'sub'
|
||||
}, {
|
||||
script: 'super'
|
||||
}], // 上标/下标
|
||||
[{
|
||||
indent: '-1'
|
||||
}, {
|
||||
indent: '+1'
|
||||
}], // 缩进
|
||||
[{
|
||||
direction: 'rtl'
|
||||
}], // 文本方向
|
||||
[{
|
||||
size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
|
||||
}], // 字体大小
|
||||
[{
|
||||
header: [1, 2, 3, 4, 5, 6]
|
||||
}], // 标题
|
||||
[{
|
||||
color: []
|
||||
}, {
|
||||
background: []
|
||||
}], // 字体颜色、字体背景颜色
|
||||
// [{ font: ['songti'] }], // 字体种类
|
||||
[{
|
||||
align: []
|
||||
}], // 对齐方式
|
||||
['clean'], // 清除文本格式
|
||||
['image', 'video'] // 链接、图片、视频
|
||||
]
|
||||
history: {
|
||||
delay: 1000,
|
||||
maxStack: 50,
|
||||
userOnly: false
|
||||
},
|
||||
toolbar: {
|
||||
container: toolbarOptions,
|
||||
handlers: {
|
||||
image: function (value) {
|
||||
if (value) {
|
||||
// 调用element的图片上传组件
|
||||
document.querySelector('.avatar-uploader input').click()
|
||||
} else {
|
||||
this.quill.format('image', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
// modules: {
|
||||
// toolbar: [
|
||||
// ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
|
||||
// ['blockquote', 'code-block'], // 引用 代码块
|
||||
// [{
|
||||
// header: 1
|
||||
// }, {
|
||||
// header: 2
|
||||
// }], // 1、2 级标题
|
||||
// [{
|
||||
// list: 'ordered'
|
||||
// }, {
|
||||
// list: 'bullet'
|
||||
// }], // 有序、无序列表
|
||||
// [{
|
||||
// script: 'sub'
|
||||
// }, {
|
||||
// script: 'super'
|
||||
// }], // 上标/下标
|
||||
// [{
|
||||
// indent: '-1'
|
||||
// }, {
|
||||
// indent: '+1'
|
||||
// }], // 缩进
|
||||
// [{
|
||||
// direction: 'rtl'
|
||||
// }], // 文本方向
|
||||
// [{
|
||||
// size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
|
||||
// }], // 字体大小
|
||||
// [{
|
||||
// header: [1, 2, 3, 4, 5, 6]
|
||||
// }], // 标题
|
||||
// [{
|
||||
// color: []
|
||||
// }, {
|
||||
// background: []
|
||||
// }], // 字体颜色、字体背景颜色
|
||||
// // [{ font: ['songti'] }], // 字体种类
|
||||
// [{
|
||||
// align: []
|
||||
// }], // 对齐方式
|
||||
// ['clean'], // 清除文本格式
|
||||
// ['image'] // 链接、图片、视频
|
||||
// ]
|
||||
// },
|
||||
placeholder: '请输入正文'
|
||||
},
|
||||
}
|
||||
@@ -157,6 +196,7 @@
|
||||
},
|
||||
methods: {
|
||||
init(id, bookid) {
|
||||
id ? '' : id=0
|
||||
this.productPid = bookid
|
||||
this.dataForm.shupingid = id || null
|
||||
// console.log(id,this.productPid,'this.productPid')
|
||||
@@ -173,7 +213,7 @@
|
||||
data
|
||||
}) => {
|
||||
// console.log(data,666)
|
||||
if (data && data.code === 0) {
|
||||
if (data && data.code === 0 && data.BookForumArticlesEntity != null) {
|
||||
this.dataForm.title = data.BookForumArticlesEntity.title
|
||||
this.dataForm.bookdesc = data.BookForumArticlesEntity.bookdesc
|
||||
this.dataForm.productImages = data.BookForumArticlesEntity.image
|
||||
@@ -269,6 +309,23 @@
|
||||
} else {
|
||||
return arr.toString()
|
||||
}
|
||||
},
|
||||
contentUploadSuccess(res, file) {
|
||||
// console.log(res)
|
||||
let quill = this.$refs.myQuillEditor.quill
|
||||
// 如果上传成功
|
||||
if (res) {
|
||||
// 获取光标所在位置
|
||||
let length = quill.getSelection().index;
|
||||
// 插入图片，res为服务器返回的图片链接地址
|
||||
quill.insertEmbed(length, 'image', res.url)
|
||||
// 调整光标到最后
|
||||
quill.setSelection(length + 1)
|
||||
} else {
|
||||
// 提示信息，需引入Message
|
||||
this.$message.error('图片插入失败！')
|
||||
}
|
||||
|
||||
},
|
||||
handlePicSuccess(res, file) {
|
||||
// console.log(res,'res')
|
||||
|
||||
Reference in New Issue
Block a user