Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
frontend-yd-email
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Sweet Zhang
frontend-yd-email
Commits
fc7ce3a7
Commit
fc7ce3a7
authored
Dec 09, 2025
by
Sweet Zhang
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
直接发邮件时改签名
parent
575d46a2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
31 additions
and
47 deletions
+31
-47
src/components/RichTextEditor.vue
+30
-46
src/views/ComposeEmail.vue
+1
-1
No files found.
src/components/RichTextEditor.vue
View file @
fc7ce3a7
...
@@ -8,19 +8,12 @@
...
@@ -8,19 +8,12 @@
import
{
ref
,
defineProps
,
defineEmits
,
watch
,
onMounted
,
onUnmounted
}
from
'vue'
import
{
ref
,
defineProps
,
defineEmits
,
watch
,
onMounted
,
onUnmounted
}
from
'vue'
import
WangEditor
from
'wangeditor'
import
WangEditor
from
'wangeditor'
import
axios
from
'axios'
import
axios
from
'axios'
import
{
env
}
from
'@/utils/env'
// 之前创建的环境配置文件
// Props
定义(保持和原组件一致,无缝替换)
// Props
/Emits 保持不变
const
props
=
defineProps
<
{
const
props
=
defineProps
<
{
modelValue
:
string
modelValue
:
string
config
?:
{
config
?:
{
height
?:
number
;
uploadUrl
?:
string
;
placeholder
?:
string
}
height
?:
number
uploadUrl
?:
string
placeholder
?:
string
}
}
>
()
}
>
()
// Emits 定义
const
emit
=
defineEmits
<
{
const
emit
=
defineEmits
<
{
(
e
:
'update:modelValue'
,
value
:
string
):
void
(
e
:
'update:modelValue'
,
value
:
string
):
void
(
e
:
'change'
,
value
:
string
):
void
(
e
:
'change'
,
value
:
string
):
void
...
@@ -32,7 +25,6 @@ const defaultConfig = {
...
@@ -32,7 +25,6 @@ const defaultConfig = {
uploadUrl
:
`
${
import
.
meta
.
env
.
VITE_REMOTE_API_BASE_URL
}
/oss/api/oss/upload`
,
uploadUrl
:
`
${
import
.
meta
.
env
.
VITE_REMOTE_API_BASE_URL
}
/oss/api/oss/upload`
,
placeholder
:
'请输入内容...'
,
placeholder
:
'请输入内容...'
,
}
}
const
config
=
{
...
defaultConfig
,
...
props
.
config
}
const
config
=
{
...
defaultConfig
,
...
props
.
config
}
// 编辑器实例
// 编辑器实例
...
@@ -40,48 +32,49 @@ const editorRef = ref<HTMLDivElement | null>(null)
...
@@ -40,48 +32,49 @@ const editorRef = ref<HTMLDivElement | null>(null)
let
editor
:
WangEditor
|
null
=
null
let
editor
:
WangEditor
|
null
=
null
const
content
=
ref
(
props
.
modelValue
)
const
content
=
ref
(
props
.
modelValue
)
// 初始化编辑器
// 封装上传方法(复用)
const
uploadImage
=
async
(
file
:
File
)
=>
{
const
formData
=
new
FormData
()
formData
.
append
(
'file'
,
file
)
// 固定key为file
const
res
=
await
axios
.
post
(
config
.
uploadUrl
,
formData
,
{
headers
:
{
'Content-Type'
:
'multipart/form-data'
,
Authorization
:
localStorage
.
getItem
(
'authToken'
)
||
''
,
},
})
if
(
res
.
data
.
code
!==
200
)
throw
new
Error
(
res
.
data
.
msg
||
'上传失败'
)
return
res
.
data
.
data
.
url
}
onMounted
(()
=>
{
onMounted
(()
=>
{
if
(
!
editorRef
.
value
)
return
if
(
!
editorRef
.
value
)
return
// 创建编辑器
editor
=
new
WangEditor
(
editorRef
.
value
)
editor
=
new
WangEditor
(
editorRef
.
value
)
//
配置
//
基础配置(保留wangEditor原生风格)
editor
.
config
.
height
=
config
.
height
editor
.
config
.
height
=
config
.
height
editor
.
config
.
placeholder
=
config
.
placeholder
editor
.
config
.
placeholder
=
config
.
placeholder
editor
.
config
.
showLinkImg
=
false
// 隐藏网络图片功能
editor
.
config
.
showLinkImg
=
false
editor
.
config
.
uploadImgServer
=
config
.
uploadUrl
// 图片上传接口
editor
.
config
.
uploadImgHeaders
=
{
Authorization
:
`
${
localStorage
.
getItem
(
'authToken'
)}
`
,
}
editor
.
config
.
uploadImgMaxSize
=
2
*
1024
*
1024
// 2MB
editor
.
config
.
uploadImgMaxLength
=
1
// 单次上传1张(LOGO)
editor
.
config
.
onchange
=
(
html
:
string
)
=>
{
editor
.
config
.
onchange
=
(
html
:
string
)
=>
{
content
.
value
=
html
content
.
value
=
html
emit
(
'update:modelValue'
,
html
)
emit
(
'update:modelValue'
,
html
)
emit
(
'change'
,
html
)
emit
(
'change'
,
html
)
}
}
// 图片上传成功处理
// 核心:仅重写上传逻辑(最简版)
editor
.
config
.
uploadImgHooks
=
{
editor
.
config
.
customUploadImg
=
async
(
files
,
insertImg
)
=>
{
success
:
(
xhr
:
any
,
editor
:
any
,
result
:
any
)
=>
{
try
{
if
(
result
.
code
===
200
)
{
// 仅上传第一张(符合原限制)
return
result
.
data
.
url
const
url
=
await
uploadImage
(
files
[
0
])
insertImg
(
url
)
// 插入到编辑器
}
catch
(
err
)
{
console
.
error
(
'图片上传失败:'
,
err
)
// 可添加Element Plus提示:ElMessage.error('图片上传失败')
}
}
},
fail
:
(
xhr
:
any
,
editor
:
any
,
result
:
any
)
=>
{
console
.
error
(
'图片上传失败:'
,
result
)
},
}
}
// 创建编辑器
editor
.
create
()
editor
.
create
()
// 初始化内容
// 设置初始内容
if
(
props
.
modelValue
)
editor
.
txt
.
html
(
props
.
modelValue
)
if
(
props
.
modelValue
)
{
editor
.
txt
.
html
(
props
.
modelValue
)
}
})
})
// 监听外部内容变化
// 监听外部内容变化
...
@@ -97,12 +90,7 @@ watch(
...
@@ -97,12 +90,7 @@ watch(
)
)
// 销毁编辑器
// 销毁编辑器
onUnmounted
(()
=>
{
onUnmounted
(()
=>
editor
?.
destroy
())
if
(
editor
)
{
editor
.
destroy
()
editor
=
null
}
})
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
...
@@ -111,18 +99,14 @@ onUnmounted(() => {
...
@@ -111,18 +99,14 @@ onUnmounted(() => {
border-radius
:
4px
;
border-radius
:
4px
;
width
:
100%
;
width
:
100%
;
}
}
.editor-container
{
.editor-container
{
min-height
:
300px
;
min-height
:
300px
;
padding
:
10px
;
padding
:
10px
;
}
}
/* 适配 wangEditor 样式 */
:deep
(
.w-e-toolbar
)
{
:deep
(
.w-e-toolbar
)
{
border-bottom
:
1px
solid
#e5e7eb
;
border-bottom
:
1px
solid
#e5e7eb
;
flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
}
}
:deep
(
.w-e-text-container
)
{
:deep
(
.w-e-text-container
)
{
min-height
:
250px
;
min-height
:
250px
;
}
}
...
...
src/views/ComposeEmail.vue
View file @
fc7ce3a7
...
@@ -239,7 +239,7 @@
...
@@ -239,7 +239,7 @@
@
close=
"showVariableSelector = false"
@
close=
"showVariableSelector = false"
/>
/>
<!-- 发送邮件弹窗 -->
<!-- 发送邮件弹窗 -->
<el-dialog
v-model=
"dialogVisible"
title=
"提示"
width=
"500"
>
<el-dialog
v-model=
"dialogVisible"
title=
"提示"
width=
"500"
:z-index=
"99999"
>
<span>
邮件发送任务已提交,请前往邮件记录中查看发送状态
</span>
<span>
邮件发送任务已提交,请前往邮件记录中查看发送状态
</span>
<template
#
footer
>
<template
#
footer
>
<div
class=
"dialog-footer"
>
<div
class=
"dialog-footer"
>
...
...
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