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
-
262src/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