parent
5465512d8e
commit
57f4012635
11 changed files with 1659 additions and 967 deletions
@ -1,179 +1,223 @@ |
|||||||
<template> |
<template> |
||||||
<div class="quill" :class="classes"> |
<div class="quill" |
||||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
: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"> |
<Upload :max-size="1000" |
||||||
<el-button class="editorUpload" size="small" type="primary">点击上传</el-button> |
:limit="100" |
||||||
</el-upload> |
@beforeUpload="beforeUpload" |
||||||
</div> |
@onSuccess="editorUploadSuccess" |
||||||
|
style="display: none"> |
||||||
|
<div slot="trigger"> |
||||||
|
<el-button :id="'editorUpload' + index" |
||||||
|
type="primary">点击上传</el-button> |
||||||
|
</div> |
||||||
|
</Upload> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Quill from 'quill'; |
import Quill from 'quill'; |
||||||
import 'quill/dist/quill.core.css'; |
import 'quill/dist/quill.core.css'; |
||||||
import 'quill/dist/quill.snow.css'; |
import 'quill/dist/quill.snow.css'; |
||||||
import 'quill/dist/quill.bubble.css'; |
import 'quill/dist/quill.bubble.css'; |
||||||
import toolbarOptions from './options' |
import toolbarOptions from './options' |
||||||
|
import Upload from '@/components/upload'; |
||||||
|
import Oss from '@/components/upload/upload.js' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'quill', |
name: 'quill', |
||||||
props: { |
components: { |
||||||
value: { |
Upload, |
||||||
type: String, |
}, |
||||||
default: '' |
props: { |
||||||
}, |
value: { |
||||||
readonly: { |
type: String, |
||||||
type: Boolean, |
default: '' |
||||||
default: false |
}, |
||||||
}, |
readonly: { |
||||||
toTop: { |
type: Boolean, |
||||||
type: Boolean, |
default: false |
||||||
default: true |
}, |
||||||
}, |
toTop: { |
||||||
border: { |
type: Boolean, |
||||||
type: Boolean, |
default: true |
||||||
default: false |
}, |
||||||
}, |
border: { |
||||||
height: { |
type: Boolean, |
||||||
type: Number |
default: false |
||||||
}, |
}, |
||||||
minHeight: { |
height: { |
||||||
type: Number |
type: Number |
||||||
} |
}, |
||||||
}, |
minHeight: { |
||||||
data () { |
type: Number |
||||||
return { |
}, |
||||||
Quill: null, |
// 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存 |
||||||
currentValue: '', |
index: { |
||||||
options: { |
type: Number, |
||||||
theme: 'snow', |
default: 0 |
||||||
bounds: document.body, |
}, |
||||||
debug: 'warn', |
}, |
||||||
modules: { |
data () { |
||||||
toolbar: { |
const that = this |
||||||
container: toolbarOptions, |
return { |
||||||
handlers: { |
Quill: null, |
||||||
'image': function (value) { |
currentValue: '', |
||||||
if (value) { |
options: { |
||||||
// 调用iview图片上传 |
theme: 'snow', |
||||||
document.querySelector('.editorUpload').click() |
bounds: document.body, |
||||||
} else { |
debug: 'warn', |
||||||
this.Quill.format('image', false); |
modules: { |
||||||
} |
toolbar: { |
||||||
} |
container: toolbarOptions, |
||||||
} |
handlers: { |
||||||
} |
'image': function (value) { |
||||||
}, |
if (value) { |
||||||
placeholder: '', |
// 调用iview图片上传 |
||||||
readOnly: this.readonly |
document.querySelector("#editorUpload" + that.index).click(); |
||||||
}, |
} else { |
||||||
loading: false |
this.Quill.format('image', 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; |
} |
||||||
} |
} |
||||||
|
} |
||||||
}, |
}, |
||||||
watch: { |
placeholder: '', |
||||||
value: { |
readOnly: this.readonly |
||||||
handler (val) { |
}, |
||||||
if (val !== this.currentValue) { |
loading: false |
||||||
this.currentValue = val; |
} |
||||||
if (this.Quill) { |
}, |
||||||
this.Quill.pasteHTML(this.value); |
computed: { |
||||||
} |
classes () { |
||||||
} |
return [ |
||||||
}, |
{ |
||||||
immediate: true |
'quill-no-border': !this.border |
||||||
} |
|
||||||
}, |
|
||||||
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 |
|
||||||
}, |
|
||||||
} |
} |
||||||
|
]; |
||||||
|
}, |
||||||
|
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> |
watch: { |
||||||
.quill-no-border{ |
value: { |
||||||
.ql-toolbar.ql-snow{ |
handler (val) { |
||||||
border: none; |
if (val !== this.currentValue) { |
||||||
border-bottom: 1px solid #e8eaec; |
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> |
</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