邮件模版
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="container" style="padding-top: 0px;">
|
||||
<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||||
<span class="mail_tit">{{ $t('mailboxSend.to') }}</span>
|
||||
|
||||
@@ -51,15 +51,15 @@
|
||||
</el-autocomplete>
|
||||
</div>
|
||||
|
||||
<span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
|
||||
<!-- <span class="sel_liby" @click="handleSetLibrary" style="position: static; margin-left: 10px;">
|
||||
<i class="el-icon-plus"></i>{{ $t('mailboxSend.selectFromLibrary') }}
|
||||
</span>
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="mail_shuru">
|
||||
<span class="mail_tit">{{ $t('mailboxSend.subject') }}</span>
|
||||
<el-input v-model="queryMail.sendtitle" class="mail_inp" ></el-input>
|
||||
</div>
|
||||
<div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||||
<!-- <div class="mail_shuru" style="position: relative; display: flex; align-items: center;">
|
||||
<span class="mail_tit">{{ $t('mailboxSend.cc') }}</span>
|
||||
<div style="flex: 1; display: flex; flex-wrap: wrap; align-items: center;">
|
||||
<div class="selected-tags" v-if="ccList && ccList.length" style="display: inline-block;">
|
||||
@@ -93,14 +93,20 @@
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div style="margin: 20px 0 0 0;">
|
||||
<quill-editor ref="myTextEditor" v-model="queryMail.content" :options="editorOption"></quill-editor>
|
||||
<el-upload class="avatar-uploader-mail" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
|
||||
:on-success="uploadSuccess">
|
||||
</el-upload>
|
||||
<div class="mail-editor-wrap" style="margin: 20px 0 0 0;">
|
||||
<!-- 仿阿里邮箱：工具栏中的 源代码编辑 / 退出源码编辑 -->
|
||||
|
||||
|
||||
<emailCkeditor
|
||||
ref="myTextEditor"
|
||||
v-model="queryMail.content"
|
||||
:is-source-mode="isSourceMode"
|
||||
:source-content.sync="sourceContent"
|
||||
:source-rows="16"
|
||||
:source-placeholder="$t('mailboxSend.sourcePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="mail-footer-bar" :style="{ left: footerBarLeft }">
|
||||
<div class="sender-info">
|
||||
@@ -170,17 +176,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入富文本quill-editor相关组件依赖
|
||||
import {
|
||||
quillEditor,
|
||||
Quill
|
||||
} from 'vue-quill-editor'
|
||||
// import {
|
||||
// container,
|
||||
// QuillWatch
|
||||
// } from 'quill-image-extend-module'
|
||||
// import ImageResize from 'quill-image-resize-module' // 引用，调整图片大小
|
||||
// Quill.register('modules/imageResize', ImageResize)
|
||||
import emailCkeditor from '@/components/page/components/email/CkeditorMail.vue'
|
||||
|
||||
import 'multi-items-input'
|
||||
import 'multi-items-input/dist/multi-items-input.css'
|
||||
import bus from '../common/bus'
|
||||
@@ -217,78 +214,10 @@
|
||||
Templatebox: false,
|
||||
Librarybox: false,
|
||||
link_TotalLibry: 0,
|
||||
editorOption: {
|
||||
placeholder: this.$t('mailboxSend.editorPlaceholder'),
|
||||
modules: {
|
||||
toolbar: {
|
||||
container: [
|
||||
['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': []
|
||||
}],
|
||||
[{
|
||||
'align': []
|
||||
}],
|
||||
['link', 'image']
|
||||
],
|
||||
// 工具栏
|
||||
handlers: {
|
||||
image: function(value) {
|
||||
if (value) {
|
||||
// upload点击上传事件
|
||||
document.querySelector('.avatar-uploader input').click()
|
||||
} else {
|
||||
this.quill.format('image', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 调整图片大小
|
||||
// imageResize: {
|
||||
// displayStyles: {
|
||||
// backgroundColor: 'black',
|
||||
// border: 'none',
|
||||
// color: 'white'
|
||||
// },
|
||||
// modules: ['Resize', 'DisplaySize', 'Toolbar']
|
||||
// }
|
||||
}
|
||||
},
|
||||
isSourceMode: false,
|
||||
// 源码模式下的完整 HTML（保留 DOCTYPE、html、行内样式等），发送时若在源码模式则用此项
|
||||
sourceContent: '',
|
||||
|
||||
toInput: '',
|
||||
toSelecting: false,
|
||||
nextToUid: 1,
|
||||
@@ -301,6 +230,9 @@
|
||||
saveDraftLoading: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
emailCkeditor,
|
||||
},
|
||||
computed: {
|
||||
footerBarLeft() {
|
||||
const collapsed = this.collapseValue === true || this.collapseValue === 'true';
|
||||
@@ -327,6 +259,25 @@
|
||||
bus.$off('collapse-content');
|
||||
},
|
||||
methods: {
|
||||
// 切换富文本 / 源代码编辑模式（源码用 sourceContent 保留完整 HTML，可自由来回切换）
|
||||
toggleSourceMode() {
|
||||
if (this.isSourceMode) {
|
||||
// 退出源码 -> 先用 juice 做样式内联，再同步给富文本展示
|
||||
if (this.$refs.myTextEditor && this.$refs.myTextEditor.handleInlining) {
|
||||
const finalHtml = this.$refs.myTextEditor.handleInlining();
|
||||
this.sourceContent = finalHtml || this.sourceContent || '';
|
||||
this.queryMail.content = this.sourceContent;
|
||||
} else {
|
||||
this.queryMail.content = this.sourceContent || '';
|
||||
}
|
||||
} else {
|
||||
// 进入源码：仅当源码区为空时才从富文本同步，避免覆盖你已编辑的完整 HTML
|
||||
if (this.sourceContent === '' || this.sourceContent == null) {
|
||||
this.sourceContent = this.queryMail.content || '';
|
||||
}
|
||||
}
|
||||
this.isSourceMode = !this.isSourceMode;
|
||||
},
|
||||
// 返回收件箱（邮箱列表），带上 journal_id 和 j_email_id
|
||||
goBackInbox() {
|
||||
const q = this.$route.query;
|
||||
@@ -533,11 +484,13 @@
|
||||
return;
|
||||
}
|
||||
this.sendLoading = true;
|
||||
// 优先发送完整 HTML（sourceContent），这样富文本编辑后也能保持 head/style/table 等结构（像阿里邮箱）
|
||||
const bodyContent = this.sourceContent || (this.queryMail.content || '');
|
||||
const params = {
|
||||
journal_id: journalId,
|
||||
to_email: toList.join(','),
|
||||
subject: this.queryMail.sendtitle,
|
||||
content: this.queryMail.content || '',
|
||||
content: bodyContent,
|
||||
};
|
||||
const self = this;
|
||||
this.$api.post('api/email_client/sendOne', params).then((res) => {
|
||||
@@ -548,6 +501,7 @@
|
||||
self.queryMail.sendcc = '';
|
||||
self.ccList = [];
|
||||
self.queryMail.content = '';
|
||||
self.sourceContent = '';
|
||||
self.fileL_atta = [];
|
||||
self.goBackInbox();
|
||||
} else {
|
||||
@@ -906,4 +860,32 @@
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* Quill 工具栏“源代码编辑”按钮文案 */
|
||||
/* 仿阿里邮箱：源代码编辑 工具栏条 */
|
||||
.editor-toolbar-bar {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-bottom: none;
|
||||
background: #fafafa;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.toolbar-source-btn {
|
||||
color: #409eff;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.toolbar-source-btn.exit {
|
||||
color: #909399;
|
||||
}
|
||||
.source-editor-box {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 0 0 4px 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.source-editor-box .el-textarea__inner {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user