164 lines
3.3 KiB
Vue
164 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-message"></i> Mailbox template list
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container">
|
|
<div>
|
|
<quill-editor ref="myTextEditor" v-model="tempForm.content" :options="editorOption"></quill-editor>
|
|
<el-upload class="avatar-uploader" :action="baseUrl+'api/Suggest/upImg'" name="img" :show-file-list="false"
|
|
:on-success="uploadSuccess">
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</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)
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: this.Common.baseUrl,
|
|
mediaUrl: this.Common.mediaUrl,
|
|
tempForm: {
|
|
content: ''
|
|
},
|
|
editorOption: {
|
|
placeholder: 'Please enter...',
|
|
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']
|
|
// }
|
|
}
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.getDate();
|
|
},
|
|
// components: {
|
|
// quillEditor
|
|
// },
|
|
methods: {
|
|
// 获取编辑列表数据
|
|
getDate() {
|
|
|
|
},
|
|
|
|
// 富文本编辑器
|
|
onEditorChange({
|
|
editor,
|
|
html,
|
|
text
|
|
}) {
|
|
this.content = html;
|
|
},
|
|
|
|
// 上传成功
|
|
uploadSuccess(res) {
|
|
let quill = this.$refs.myTextEditor.quill;
|
|
|
|
// 获取光标所在位置
|
|
let length = quill.getSelection().index
|
|
// 插入图片 res.upurl为服务器返回的图片地址
|
|
quill.insertEmbed(length, 'image', this.baseUrl + res.data.icon)
|
|
// 调整光标到最后
|
|
quill.setSelection(length + 1)
|
|
}
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.avatar-uploader {
|
|
height: 0;
|
|
}
|
|
|
|
.avatar-uploader .el-upload--text {
|
|
height: 0 !important;
|
|
border: 0;
|
|
}
|
|
</style>
|