gitee/mall4v
1
0
Fork 0
mirror of https://gitee.com/gz-yami/mall4v.git synced 2025-12-26 07:16:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

商品详情编辑可上传图片

Browse Source
This commit is contained in:
liaoanqi 2023-02-27 10:13:57 +08:00
parent 282b26b4dd
commit 239b24cb95
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/tiny-mce/index.vue
View File

@ -1,6 +1,18 @@
<template>
<div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<el-upload
class="upload-demo"
list-type="picture"
:action="$http.adornUrl('/admin/file/upload/element')"
:headers="{Authorization: $cookie.get('Authorization')}"
:on-success="imageSuccessCBK"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<el-button size="small" type="primary">点击上传图片</el-button>
</el-upload>
</div>
</div>
</template>
@ -9,17 +21,19 @@
* docs:
* https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
*/
import mulPicUpload from '@/components/mul-pic-upload'
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 resourceCdn2 = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
const resourceCdn3 = 'https://unpkg.zhimg.com/tinymce-all-in-one@4.9.3/tinymce.min.js'
const resourceCdn1 = 'https://unpkg.com/tinymce-all-in-one@4.9.3/tinymce.min.js'
const resourceCdn1 = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
const resourceCdn2 = 'https://unpkg.zhimg.com/tinymce-all-in-one@4.9.3/tinymce.min.js'
const resourceCdn3 = 'https://unpkg.com/tinymce-all-in-one@4.9.3/tinymce.min.js'
export default {
name: 'Tinymce',
components: { mulPicUpload },
props: {
id: {
type: String,
@ -58,7 +72,8 @@ export default {
hasChange: false,
hasInit: false,
tinymceId: this.id,
fullscreen: false
fullscreen: false,
resourcesUrl: process.env.VUE_APP_RESOURCES_URL
}
},
computed: {
@ -215,10 +230,22 @@ export default {
getContent () {
window.tinymce.get(this.tinymceId).getContent()
},
imageSuccessCBK (arr) {
// 限制图片上传大小
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
if (!isJPG) {
this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!')
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isLt2M && isJPG
},
imageSuccessCBK (response, file, fileList) {
const _this = this
arr.forEach(v => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v}" >`)
fileList.forEach(v => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${this.resourcesUrl + v.response}" >`)
})
}
}