parent
5465512d8e
commit
57f4012635
11 changed files with 1659 additions and 967 deletions
@ -1,179 +1,223 @@ |
||||
<template> |
||||
<div class="quill" :class="classes"> |
||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
||||
<div class="quill" |
||||
:class="classes"> |
||||
<div ref="editor" |
||||
:style="styles" |
||||
v-loading="loading"></div> |
||||
|
||||
<el-upload :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none"> |
||||
<el-button class="editorUpload" size="small" type="primary">点击上传</el-button> |
||||
</el-upload> |
||||
</div> |
||||
<Upload :max-size="1000" |
||||
:limit="100" |
||||
@beforeUpload="beforeUpload" |
||||
@onSuccess="editorUploadSuccess" |
||||
style="display: none"> |
||||
<div slot="trigger"> |
||||
<el-button :id="'editorUpload' + index" |
||||
type="primary">点击上传</el-button> |
||||
</div> |
||||
</Upload> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Quill from 'quill'; |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import toolbarOptions from './options' |
||||
import Quill from 'quill'; |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import toolbarOptions from './options' |
||||
import Upload from '@/components/upload'; |
||||
import Oss from '@/components/upload/upload.js' |
||||
|
||||
export default { |
||||
name: 'quill', |
||||
props: { |
||||
value: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
readonly: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
toTop: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
border: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
height: { |
||||
type: Number |
||||
}, |
||||
minHeight: { |
||||
type: Number |
||||
} |
||||
}, |
||||
data () { |
||||
return { |
||||
Quill: null, |
||||
currentValue: '', |
||||
options: { |
||||
theme: 'snow', |
||||
bounds: document.body, |
||||
debug: 'warn', |
||||
modules: { |
||||
toolbar: { |
||||
container: toolbarOptions, |
||||
handlers: { |
||||
'image': function (value) { |
||||
if (value) { |
||||
// 调用iview图片上传 |
||||
document.querySelector('.editorUpload').click() |
||||
} else { |
||||
this.Quill.format('image', false); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
placeholder: '', |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false |
||||
} |
||||
}, |
||||
computed: { |
||||
classes () { |
||||
return [ |
||||
{ |
||||
'quill-no-border': !this.border |
||||
} |
||||
]; |
||||
}, |
||||
styles () { |
||||
let style = {}; |
||||
if (this.minHeight) { |
||||
style.minHeight = `${this.minHeight}px`; |
||||
} |
||||
if (this.height) { |
||||
style.height = `${this.height}px`; |
||||
export default { |
||||
name: 'quill', |
||||
components: { |
||||
Upload, |
||||
}, |
||||
props: { |
||||
value: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
readonly: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
toTop: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
border: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
height: { |
||||
type: Number |
||||
}, |
||||
minHeight: { |
||||
type: Number |
||||
}, |
||||
// 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存 |
||||
index: { |
||||
type: Number, |
||||
default: 0 |
||||
}, |
||||
}, |
||||
data () { |
||||
const that = this |
||||
return { |
||||
Quill: null, |
||||
currentValue: '', |
||||
options: { |
||||
theme: 'snow', |
||||
bounds: document.body, |
||||
debug: 'warn', |
||||
modules: { |
||||
toolbar: { |
||||
container: toolbarOptions, |
||||
handlers: { |
||||
'image': function (value) { |
||||
if (value) { |
||||
// 调用iview图片上传 |
||||
document.querySelector("#editorUpload" + that.index).click(); |
||||
} else { |
||||
this.Quill.format('image', false); |
||||
} |
||||
return style; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler (val) { |
||||
if (val !== this.currentValue) { |
||||
this.currentValue = val; |
||||
if (this.Quill) { |
||||
this.Quill.pasteHTML(this.value); |
||||
} |
||||
} |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.init(); |
||||
}, |
||||
beforeDestroy () { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
init () { |
||||
const editor = this.$refs.editor; |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
// 默认值 |
||||
this.Quill.pasteHTML(this.currentValue); |
||||
if(this.toTop){ |
||||
this.$nextTick(() => { |
||||
window.scrollTo(0,0) |
||||
}) |
||||
} |
||||
// 绑定事件 |
||||
this.Quill.on('text-change', (delta, oldDelta, source) => { |
||||
const html = this.$refs.editor.children[0].innerHTML; |
||||
const text = this.Quill.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model.trim |
||||
this.$emit('input', html); |
||||
// 发出事件 |
||||
this.$emit('on-change', { html, text, quill }); |
||||
}); |
||||
// 将一些 quill 自带的事件传递出去 |
||||
this.Quill.on('text-change', (delta, oldDelta, source) => { |
||||
this.$emit('on-text-change', delta, oldDelta, source); |
||||
}); |
||||
this.Quill.on('selection-change', (range, oldRange, source) => { |
||||
this.$emit('on-selection-change', range, oldRange, source); |
||||
}); |
||||
this.Quill.on('editor-change', (eventName, ...args) => { |
||||
this.$emit('on-editor-change', eventName, ...args); |
||||
}); |
||||
}, |
||||
beforeUpload(file){ |
||||
this.loading = true |
||||
}, |
||||
editorUploadSuccess (res) { |
||||
// 获取富文本组件实例 |
||||
let quill = this.Quill |
||||
// 如果上传成功 |
||||
if (res.data.filesResult.fileUrl) { |
||||
// 获取光标所在位置 |
||||
let length = quill.getSelection().index; |
||||
// 插入图片，res为服务器返回的图片链接地址 |
||||
quill.insertEmbed(length, 'image', res.data.filesResult.fileUrl) |
||||
// 调整光标到最后 |
||||
quill.setSelection(length + 1) |
||||
} else { |
||||
this.$message.success('图片插入失败') |
||||
} |
||||
this.loading = false |
||||
}, |
||||
placeholder: '', |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false |
||||
} |
||||
}, |
||||
computed: { |
||||
classes () { |
||||
return [ |
||||
{ |
||||
'quill-no-border': !this.border |
||||
} |
||||
]; |
||||
}, |
||||
styles () { |
||||
let style = {}; |
||||
if (this.minHeight) { |
||||
style.minHeight = `${this.minHeight}px`; |
||||
} |
||||
if (this.height) { |
||||
style.height = `${this.height}px`; |
||||
} |
||||
return style; |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.quill-no-border{ |
||||
.ql-toolbar.ql-snow{ |
||||
border: none; |
||||
border-bottom: 1px solid #e8eaec; |
||||
}, |
||||
watch: { |
||||
value: { |
||||
handler (val) { |
||||
if (val !== this.currentValue) { |
||||
this.currentValue = val; |
||||
if (this.Quill) { |
||||
this.Quill.pasteHTML(this.value); |
||||
} |
||||
} |
||||
.ql-container.ql-snow{ |
||||
border: none; |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.init(); |
||||
}, |
||||
beforeDestroy () { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
init () { |
||||
const editor = this.$refs.editor; |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
const ins = this.Quill |
||||
// 默认值 |
||||
ins.pasteHTML(this.currentValue); |
||||
if (this.toTop) { |
||||
this.$nextTick(() => { |
||||
window.scrollTo(0, 0) |
||||
}) |
||||
} |
||||
// 绑定事件 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
const html = this.$refs.editor.children[0].innerHTML; |
||||
const text = ins.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model |
||||
this.$emit('input', html); |
||||
// 发出事件 |
||||
this.$emit('on-change', { html, text, quill }); |
||||
}); |
||||
// 将一些 quill 自带的事件传递出去 |
||||
ins.on('text-change', (delta, oldDelta, source) => { |
||||
this.$emit('on-text-change', delta, oldDelta, source); |
||||
}); |
||||
ins.on('selection-change', (range, oldRange, source) => { |
||||
this.$emit('on-selection-change', range, oldRange, source); |
||||
}); |
||||
ins.on('editor-change', (eventName, ...args) => { |
||||
this.$emit('on-editor-change', eventName, ...args); |
||||
}); |
||||
// 监听粘贴事件 |
||||
ins.root.addEventListener('paste', evt => { |
||||
if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) { |
||||
evt.preventDefault(); |
||||
// 检测是否粘贴的是图片 |
||||
[].forEach.call(evt.clipboardData.files, file => { |
||||
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) { |
||||
return |
||||
} |
||||
// 把图片上传到oss，不然会直接把base64存到数据库 |
||||
Oss.upload(file).then(res => { |
||||
var range = ins.getSelection() |
||||
if (range) { |
||||
// 在当前光标位置插入图片 |
||||
ins.insertEmbed(range.index, 'image', res.url) |
||||
// 将光标移动到图片后面 |
||||
ins.setSelection(range.index + 1) |
||||
} |
||||
}) |
||||
}); |
||||
} |
||||
}, false) |
||||
}, |
||||
beforeUpload (file) { |
||||
this.loading = true |
||||
}, |
||||
editorUploadSuccess (file) { |
||||
// 获取富文本组件实例 |
||||
let quill = this.Quill |
||||
// 如果上传成功 |
||||
if (file.url) { |
||||
// 获取光标所在位置 |
||||
let length = quill.getSelection().index; |
||||
// 插入图片，res为服务器返回的图片链接地址 |
||||
quill.insertEmbed(length, 'image', file.url) |
||||
// 调整光标到最后 |
||||
quill.setSelection(length + 1) |
||||
} else { |
||||
this.$message.success('图片插入失败') |
||||
} |
||||
this.loading = false |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.quill-no-border { |
||||
.ql-toolbar.ql-snow { |
||||
border: none; |
||||
border-bottom: 1px solid #e8eaec; |
||||
} |
||||
.ql-container.ql-snow { |
||||
border: none; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
/** |
||||
* 阿里云oss配置 |
||||
* */ |
||||
|
||||
export default { |
||||
// oss账号信息
|
||||
config: { |
||||
region: 'oss-cn-shenzhen', |
||||
accessKeyId: 'LTAI4FzqQHnk4rozqLZ8jCNj', |
||||
accessKeySecret: 'mveW7B1OyFoKUkHm8WsxmrjHmkJWHq', |
||||
bucket: 'huoran' |
||||
}, |
||||
// 上传成功url前置部分（成功回调没有返回url）
|
||||
preUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/' |
||||
} |
||||
@ -0,0 +1,150 @@ |
||||
<template> |
||||
<el-upload :disabled="uploading" |
||||
:before-upload="beforeUpload" |
||||
:on-remove="onRemove" |
||||
:on-error="uploadError" |
||||
:limit="limit" |
||||
action="" |
||||
:on-exceed="handleExceed" |
||||
:show-file-list="showFiles" |
||||
:file-list="fileList" |
||||
:http-request="handleRequest" |
||||
name="file"> |
||||
<slot name="trigger"> |
||||
<el-button size="small" |
||||
:loading="uploading">{{ uploading ? '正在上传' : '上传文件' }}</el-button> |
||||
</slot> |
||||
<div slot="tip" |
||||
class="el-upload__tip"> |
||||
<el-progress v-if="uploading" |
||||
class="upload-progress" |
||||
:stroke-width="3" |
||||
:percentage="uploadProgress"></el-progress> |
||||
<slot name="tip"> |
||||
<p>支持扩展名：.rar .zip .doc .docx .pdf .jpg...</p> |
||||
</slot> |
||||
</div> |
||||
</el-upload> |
||||
</template> |
||||
|
||||
<script> |
||||
import OSS from 'ali-oss' |
||||
import OssConfig from './config.js' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
props: { |
||||
// 最大允许上传个数 |
||||
limit: { |
||||
type: Number, |
||||
default: 1 |
||||
}, |
||||
// 单个文件最大大小(单位: Mb) |
||||
maxSize: { |
||||
type: Number, |
||||
default: 10 |
||||
}, |
||||
// 是否显示已上传文件列表 |
||||
showFileList: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 已上传文件列表 |
||||
fileList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
// 是否要更新fileList（如果要使用自己的fileList，则这个值传false，一般情况不用给这个值） |
||||
changeFileList: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 已上传文件列表 |
||||
onRemove: { |
||||
type: Function, |
||||
default: new Function() |
||||
}, |
||||
}, |
||||
data () { |
||||
return { |
||||
client: null, |
||||
uploading: false, |
||||
uploadProgress: 0, |
||||
showFiles: this.showFileList |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.initOss() |
||||
}, |
||||
methods: { |
||||
// 初始化oss |
||||
initOss () { |
||||
this.client = new OSS(OssConfig.config) |
||||
}, |
||||
// 附件上传前 |
||||
beforeUpload (file) { |
||||
const oversize = file.size / 1024 / 1024 < this.maxSize |
||||
if (!oversize) Util.warningMsg(`请上传小于${this.maxSize}MB的附件！`) |
||||
if (oversize) { |
||||
this.$emit('beforeUpload', file) |
||||
return true |
||||
} else { |
||||
return false |
||||
} |
||||
}, |
||||
// 自定义进度条 |
||||
handleProgress (progress) { |
||||
this.uploadProgress = Number((progress * 100).toFixed(2)) |
||||
}, |
||||
// 自定义上传 |
||||
async handleRequest ({ file }) { |
||||
try { |
||||
this.uploadProgress = 0 |
||||
this.uploading = true |
||||
this.showFiles = false |
||||
// 上传到阿里云oss |
||||
const { name } = await this.client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file, { |
||||
progress: this.handleProgress |
||||
}); |
||||
|
||||
this.uploading = false |
||||
const url = OssConfig.preUrl + name |
||||
this.changeFileList && this.$emit('update:fileList', [ |
||||
...this.fileList, |
||||
{ |
||||
name: name, |
||||
url |
||||
} |
||||
]) |
||||
|
||||
this.showFiles = true |
||||
this.$emit('onSuccess', { |
||||
format: Util.getFileExt(file.name), |
||||
name: file.name, |
||||
url, |
||||
size: file.size, |
||||
}) |
||||
} catch (error) { } |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleExceed (files, fileList) { |
||||
Util.warningMsg(`当前限制选择 ${this.limit} 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
/deep/.upload-progress { |
||||
max-width: 300px; |
||||
margin: 10px 0; |
||||
white-space: nowrap; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,37 @@ |
||||
// 阿里云oss上传
|
||||
|
||||
import OSS from 'ali-oss' |
||||
import OssConfig from './config' |
||||
import Util from '@/libs/util' |
||||
|
||||
let client = null |
||||
// 初始化oss
|
||||
const initOss = () => { |
||||
if (!client) client = new OSS(OssConfig.config) |
||||
} |
||||
|
||||
export default { |
||||
// 上传文件
|
||||
upload(file) { |
||||
initOss() |
||||
return new Promise(async (resolve, reject) => { |
||||
try { |
||||
// 上传到阿里云oss
|
||||
const res = await client.multipartUpload(Date.now() + '.' + Util.getFileExt(file.name), file); |
||||
resolve({ |
||||
format: Util.getFileExt(file.name), |
||||
name: file.name, |
||||
url: OssConfig.preUrl + res.name, |
||||
size: file.size, |
||||
}) |
||||
} catch (error) { |
||||
reject() |
||||
} |
||||
}) |
||||
}, |
||||
// 删除文件（传完整url，不是没有https的name，因为很多接口没有存name，只存url，所以统一使用url）
|
||||
async del(url) { |
||||
initOss() |
||||
await client.delete(url.replace(OssConfig.preUrl, '')); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue