|
|
|
@ -1,15 +1,22 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="quill" :class="classes"> |
|
|
|
<div class="quill" ref="quill" :class="classes"> |
|
|
|
<div ref="editor" :style="styles" v-loading="loading"></div> |
|
|
|
<div ref="editor" :style="styles" v-loading="loading"></div> |
|
|
|
|
|
|
|
|
|
|
|
<el-upload :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" |
|
|
|
<el-upload |
|
|
|
style="display: none"> |
|
|
|
:headers="headers" |
|
|
|
<el-button class="editorUpload" size="small" type="primary">点击上传</el-button> |
|
|
|
:action="this.api.fileupload" |
|
|
|
|
|
|
|
:before-upload="beforeUpload" |
|
|
|
|
|
|
|
:on-success="editorUploadSuccess" |
|
|
|
|
|
|
|
style="display: none" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<el-button class="editorUpload" type="primary">点击上传</el-button> |
|
|
|
</el-upload> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
|
|
|
import Setting from "@/setting"; |
|
|
|
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"; |
|
|
|
@ -40,10 +47,20 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
minHeight: { |
|
|
|
minHeight: { |
|
|
|
type: Number |
|
|
|
type: Number |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
/* |
|
|
|
|
|
|
|
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
|
|
|
|
|
|
|
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
elseRead: { |
|
|
|
|
|
|
|
type: String, default: "false" |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
return { |
|
|
|
|
|
|
|
headers: { |
|
|
|
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
|
|
|
}, |
|
|
|
Quill: null, |
|
|
|
Quill: null, |
|
|
|
currentValue: "", |
|
|
|
currentValue: "", |
|
|
|
options: { |
|
|
|
options: { |
|
|
|
@ -89,6 +106,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
return style; |
|
|
|
return style; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
value: { |
|
|
|
value: { |
|
|
|
@ -103,8 +121,18 @@ export default { |
|
|
|
immediate: true |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted() { |
|
|
|
this.init(); |
|
|
|
this.init(); |
|
|
|
|
|
|
|
// 处理工具栏隐藏样式 |
|
|
|
|
|
|
|
if (this.elseRead === "true") { |
|
|
|
|
|
|
|
let children = this.$refs.quill.children[0].style; |
|
|
|
|
|
|
|
children.padding = "0"; |
|
|
|
|
|
|
|
children.overflow = "hidden"; |
|
|
|
|
|
|
|
children.height = "0"; |
|
|
|
|
|
|
|
children.borderTop = "0"; |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
beforeDestroy() { |
|
|
|
// 在组件销毁后销毁实例 |
|
|
|
// 在组件销毁后销毁实例 |
|
|
|
@ -115,35 +143,62 @@ export default { |
|
|
|
const editor = this.$refs.editor; |
|
|
|
const editor = this.$refs.editor; |
|
|
|
// 初始化编辑器 |
|
|
|
// 初始化编辑器 |
|
|
|
this.Quill = new Quill(editor, this.options); |
|
|
|
this.Quill = new Quill(editor, this.options); |
|
|
|
|
|
|
|
const ins = this.Quill |
|
|
|
// 默认值 |
|
|
|
// 默认值 |
|
|
|
this.Quill.pasteHTML(this.currentValue); |
|
|
|
ins.pasteHTML(this.currentValue); |
|
|
|
if(this.toTop){ |
|
|
|
if(this.toTop){ |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
window.scrollTo(0, 0); |
|
|
|
window.scrollTo(0,0) |
|
|
|
}); |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
// 绑定事件 |
|
|
|
// 绑定事件 |
|
|
|
this.Quill.on("text-change", (delta, oldDelta, source) => { |
|
|
|
ins.on('text-change', (delta, oldDelta, source) => { |
|
|
|
const html = this.$refs.editor.children[0].innerHTML; |
|
|
|
const html = this.$refs.editor.children[0].innerHTML; |
|
|
|
const text = this.Quill.getText(); |
|
|
|
const text = ins.getText(); |
|
|
|
const quill = this.Quill; |
|
|
|
const quill = this.Quill; |
|
|
|
// 更新内部的值 |
|
|
|
// 更新内部的值 |
|
|
|
this.currentValue = html; |
|
|
|
this.currentValue = html; |
|
|
|
// 发出事件 v-model |
|
|
|
// 发出事件 v-model |
|
|
|
this.$emit("input", html); |
|
|
|
this.$emit('input', html); |
|
|
|
// 发出事件 |
|
|
|
// 发出事件 |
|
|
|
this.$emit("on-change", { html, text, quill }); |
|
|
|
this.$emit('on-change', { html, text, quill }); |
|
|
|
}); |
|
|
|
}); |
|
|
|
// 将一些 quill 自带的事件传递出去 |
|
|
|
// 将一些 quill 自带的事件传递出去 |
|
|
|
this.Quill.on("text-change", (delta, oldDelta, source) => { |
|
|
|
ins.on('text-change', (delta, oldDelta, source) => { |
|
|
|
this.$emit("on-text-change", delta, oldDelta, source); |
|
|
|
this.$emit('on-text-change', delta, oldDelta, source); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.Quill.on("selection-change", (range, oldRange, source) => { |
|
|
|
ins.on('selection-change', (range, oldRange, source) => { |
|
|
|
this.$emit("on-selection-change", range, oldRange, source); |
|
|
|
this.$emit('on-selection-change', range, oldRange, source); |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.Quill.on("editor-change", (eventName, ...args) => { |
|
|
|
ins.on('editor-change', (eventName, ...args) => { |
|
|
|
this.$emit("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 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const param = new FormData() |
|
|
|
|
|
|
|
param.append('file', file) |
|
|
|
|
|
|
|
// 把图片上传到服务器，不然会直接把base64存到数据库 |
|
|
|
|
|
|
|
this.$post(this.api.fileupload, param, { |
|
|
|
|
|
|
|
headers: { "Content-Type": "multipart/form-data" } |
|
|
|
|
|
|
|
}).then(res => { |
|
|
|
|
|
|
|
var range = ins.getSelection() |
|
|
|
|
|
|
|
if (range) { |
|
|
|
|
|
|
|
// 在当前光标位置插入图片 |
|
|
|
|
|
|
|
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
|
|
|
|
|
|
|
// 将光标移动到图片后面 |
|
|
|
|
|
|
|
ins.setSelection(range.index + 1) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}).catch(res => {}) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, false) |
|
|
|
}, |
|
|
|
}, |
|
|
|
beforeUpload(file) { |
|
|
|
beforeUpload(file) { |
|
|
|
this.loading = true; |
|
|
|
this.loading = true; |
|
|
|
@ -160,7 +215,7 @@ export default { |
|
|
|
// 调整光标到最后 |
|
|
|
// 调整光标到最后 |
|
|
|
quill.setSelection(length + 1); |
|
|
|
quill.setSelection(length + 1); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.$message.success("图片插入失败"); |
|
|
|
util.successMsg("图片插入失败"); |
|
|
|
} |
|
|
|
} |
|
|
|
this.loading = false; |
|
|
|
this.loading = false; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -178,4 +233,23 @@ export default { |
|
|
|
border: none; |
|
|
|
border: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.else { |
|
|
|
|
|
|
|
.ql-toolbar.ql-snow { |
|
|
|
|
|
|
|
height: 0; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
padding: 0; |
|
|
|
|
|
|
|
border-top: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/deep/.ql-snow { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
.ql-tooltip { |
|
|
|
|
|
|
|
position: absolute !important; |
|
|
|
|
|
|
|
top: 10px !important; |
|
|
|
|
|
|
|
left: 10px !important; |
|
|
|
|
|
|
|
transform: translateY(10px); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
