13 changed files with 693 additions and 105 deletions
-
4.env.development
-
2package.json
-
12src/api/weixin/index.js
-
82src/assets/iconfonts/light/iconfont.css
-
2src/assets/iconfonts/light/iconfont.js
-
133src/assets/iconfonts/light/iconfont.json
-
BINsrc/assets/iconfonts/light/iconfont.ttf
-
BINsrc/assets/iconfonts/light/iconfont.woff
-
BINsrc/assets/iconfonts/light/iconfont.woff2
-
174src/components/wangEditor/index.vue
-
276src/views/weChatMiniProgram/activity.vue
-
52src/views/weChatMiniProgram/activityLog.vue
-
61src/views/weChatMiniProgram/module/activityDetail.vue
2
src/assets/iconfonts/light/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<div class="wang-editor"> |
|||
<Toolbar |
|||
:editor="editor" |
|||
:default-config="toolbarConfig" |
|||
/> |
|||
<Editor |
|||
v-model="html" |
|||
:default-config="editorConfig" |
|||
@onCreated="handleCreated" |
|||
@onChange="handleChange" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' |
|||
import { upload } from '@/utils/upload' |
|||
|
|||
export default { |
|||
name: 'WangEditor', |
|||
components: { Editor, Toolbar }, |
|||
props: { |
|||
value: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: '请输入内容...' |
|||
}, |
|||
height: { |
|||
type: [String, Number], |
|||
default: '450px' |
|||
}, |
|||
// 增加props，外部可传最大图片大小，单位字节 |
|||
maxImgSize: { |
|||
type: Number, |
|||
default: 2 * 1024 * 1024 // 默认2M |
|||
} |
|||
}, |
|||
data() { |
|||
const linkSrc = process.env.NODE_ENV === 'production' |
|||
? window.g.ApiUrl |
|||
: process.env.VUE_APP_BASE_API |
|||
const imgHttpsUrl = process.env.NODE_ENV === 'production' |
|||
? window.g.ApiUrl |
|||
: process.env.VUE_APP_WECHAT_URL |
|||
return { |
|||
editor: null, |
|||
imgHttpsUrl, |
|||
html: this.value, |
|||
linkSrc, |
|||
toolbarConfig: { |
|||
excludeKeys: ['video', 'code', 'todo', 'fullscreen'] |
|||
}, |
|||
editorConfig: { |
|||
placeholder: this.placeholder, |
|||
zIndex: 9999, |
|||
MENU_CONF: { |
|||
uploadImage: { |
|||
customUpload: async(file, insertFn) => { |
|||
if (file.size > this.maxImgSize) { |
|||
const sizeMb = (this.maxImgSize / 1024 / 1024).toFixed(1) |
|||
this.$message.error(`图片不能超过${sizeMb}M`) |
|||
return |
|||
} |
|||
try { |
|||
const res = await upload(`${this.linkSrc}/api/fileRelevant/uploadHttpsImg`, file) |
|||
if (res.data.code === 200) { |
|||
const imageUrl = `${this.imgHttpsUrl}/files/${res.data.data}` |
|||
insertFn(imageUrl) |
|||
} else { |
|||
this.$message.error(res.data.msg || '图片上传失败') |
|||
} |
|||
} catch (err) { |
|||
console.error('图片上传失败:', err) |
|||
this.$message.error('图片上传失败') |
|||
} |
|||
}, |
|||
maxFileSize: 2 * 1024 * 1024, |
|||
maxNumberOfFiles: 10 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
value(newVal) { |
|||
if (newVal !== this.html && this.editor) { |
|||
this.editor.setHtml(newVal) |
|||
} |
|||
}, |
|||
html(newVal) { |
|||
this.$emit('input', newVal) |
|||
this.$emit('contentData', newVal) |
|||
}, |
|||
placeholder(newVal) { |
|||
if (this.editor) { |
|||
this.editorConfig.placeholder = newVal |
|||
} |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.editor) { |
|||
this.editor.destroy() |
|||
this.editor = null |
|||
} |
|||
}, |
|||
methods: { |
|||
handleCreated(editor) { |
|||
this.editor = editor |
|||
editor.config.height = this.height |
|||
}, |
|||
handleChange(editor) { |
|||
this.$emit('change', editor.getHtml()) |
|||
}, |
|||
getHtmlContent() { |
|||
return this.editor ? this.editor.getHtml() : '' |
|||
}, |
|||
setHtmlContent(html) { |
|||
if (this.editor) { |
|||
this.editor.setHtml(html) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style src="@wangeditor/editor/dist/css/style.css"></style> |
|||
|
|||
<style scoped> |
|||
.wang-editor { |
|||
border: 1px solid #e4e7ed; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container { |
|||
height: calc(100% - 50px) !important; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container table { |
|||
width: 100% !important; |
|||
border-collapse: collapse; |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container table td, |
|||
::v-deep .w-e-text-container table th { |
|||
border: 1px solid #dcdfe6; |
|||
padding: 8px 12px; |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container table th { |
|||
background-color: #f5f7fa; |
|||
font-weight: 600; |
|||
color: #303133; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container table tr:nth-child(even) { |
|||
background-color: #fafafa; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container table tr:hover { |
|||
background-color: #f0f5ff; |
|||
} |
|||
|
|||
::v-deep .w-e-text-container img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue