|
|
|
|
@ -1,17 +1,38 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="quill" ref="quill" :class="classes"> |
|
|
|
|
<div ref="editor" :style="styles" v-loading="loading"></div> |
|
|
|
|
<div> |
|
|
|
|
<el-radio-group v-if="!readonly" |
|
|
|
|
class="type-radio" |
|
|
|
|
v-model="type" |
|
|
|
|
@change="typeChange"> |
|
|
|
|
<el-radio :label="0">富文本</el-radio> |
|
|
|
|
<el-radio :label="1">markdown</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
<div v-show="!type" |
|
|
|
|
class="quill" |
|
|
|
|
ref="quill" |
|
|
|
|
:class="classes"> |
|
|
|
|
<div ref="editor" |
|
|
|
|
:style="styles" |
|
|
|
|
v-loading="loading"></div> |
|
|
|
|
|
|
|
|
|
<el-upload |
|
|
|
|
:headers="headers" |
|
|
|
|
<el-upload :headers="headers" |
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
:before-upload="beforeUpload" |
|
|
|
|
:on-success="editorUploadSuccess" |
|
|
|
|
style="display: none" |
|
|
|
|
> |
|
|
|
|
<el-button :id="'editorUpload' + index" type="primary">点击上传</el-button> |
|
|
|
|
style="display: none"> |
|
|
|
|
<el-button :id="'editorUpload' + index" |
|
|
|
|
type="primary">点击上传</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
</div> |
|
|
|
|
<mavon-editor class="md" |
|
|
|
|
v-model="mdVal" |
|
|
|
|
v-show="type" |
|
|
|
|
ref="md" |
|
|
|
|
:ishljs="true" |
|
|
|
|
:subfield="false" |
|
|
|
|
@change="mdChange" |
|
|
|
|
@imgAdd="imgAdd" /> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -22,9 +43,15 @@ import "quill/dist/quill.core.css"; |
|
|
|
|
import "quill/dist/quill.snow.css"; |
|
|
|
|
import "quill/dist/quill.bubble.css"; |
|
|
|
|
import toolbarOptions from "./options"; |
|
|
|
|
import axios from 'axios' |
|
|
|
|
import { mavonEditor } from 'mavon-editor' |
|
|
|
|
import 'mavon-editor/dist/css/index.css' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "quill", |
|
|
|
|
components: { |
|
|
|
|
mavonEditor |
|
|
|
|
}, |
|
|
|
|
props: { |
|
|
|
|
value: { |
|
|
|
|
type: String, |
|
|
|
|
@ -61,12 +88,14 @@ export default { |
|
|
|
|
default: 0 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
data () { |
|
|
|
|
const that = this |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
}, |
|
|
|
|
type: 0, |
|
|
|
|
mdVal: '', |
|
|
|
|
Quill: null, |
|
|
|
|
currentValue: "", |
|
|
|
|
options: { |
|
|
|
|
@ -77,7 +106,7 @@ export default { |
|
|
|
|
toolbar: { |
|
|
|
|
container: toolbarOptions, |
|
|
|
|
handlers: { |
|
|
|
|
"image": function(value) { |
|
|
|
|
"image": function (value) { |
|
|
|
|
if (value) { |
|
|
|
|
// 调用iview图片上传 |
|
|
|
|
document.querySelector("#editorUpload" + that.index).click(); |
|
|
|
|
@ -95,14 +124,14 @@ export default { |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
classes() { |
|
|
|
|
classes () { |
|
|
|
|
return [ |
|
|
|
|
{ |
|
|
|
|
"quill-no-border": !this.border |
|
|
|
|
} |
|
|
|
|
]; |
|
|
|
|
}, |
|
|
|
|
styles() { |
|
|
|
|
styles () { |
|
|
|
|
let style = {}; |
|
|
|
|
if (this.minHeight) { |
|
|
|
|
style.minHeight = `${this.minHeight}px`; |
|
|
|
|
@ -116,20 +145,23 @@ export default { |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
value: { |
|
|
|
|
handler(val) { |
|
|
|
|
handler (val) { |
|
|
|
|
if (!this.type) { |
|
|
|
|
if (val !== this.currentValue) { |
|
|
|
|
this.currentValue = val; |
|
|
|
|
if (this.Quill) { |
|
|
|
|
this.Quill.pasteHTML(this.value); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (!this.mdVal) this.mdVal = val |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
immediate: true |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
created () { |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
mounted () { |
|
|
|
|
this.init(); |
|
|
|
|
// 处理工具栏隐藏样式 |
|
|
|
|
if (this.elseRead === "true") { |
|
|
|
|
@ -140,11 +172,16 @@ export default { |
|
|
|
|
children.borderTop = "0"; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
beforeDestroy() { |
|
|
|
|
beforeDestroy () { |
|
|
|
|
// 在组件销毁后销毁实例 |
|
|
|
|
this.Quill = null; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 富文本切换 |
|
|
|
|
typeChange (val) { |
|
|
|
|
if (!this.mdVal) this.mdVal = this.value |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
init () { |
|
|
|
|
const editor = this.$refs.editor; |
|
|
|
|
// 初始化编辑器 |
|
|
|
|
@ -152,9 +189,9 @@ export default { |
|
|
|
|
const ins = this.Quill |
|
|
|
|
// 默认值 |
|
|
|
|
ins.pasteHTML(this.currentValue); |
|
|
|
|
if(this.toTop){ |
|
|
|
|
if (this.toTop) { |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
window.scrollTo(0,0) |
|
|
|
|
window.scrollTo(0, 0) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// 绑定事件 |
|
|
|
|
@ -201,15 +238,16 @@ export default { |
|
|
|
|
// 将光标移动到图片后面 |
|
|
|
|
ins.setSelection(range.index + 1) |
|
|
|
|
} |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}, false) |
|
|
|
|
}, |
|
|
|
|
beforeUpload(file) { |
|
|
|
|
beforeUpload (file) { |
|
|
|
|
this.loading = true; |
|
|
|
|
}, |
|
|
|
|
editorUploadSuccess(res) { |
|
|
|
|
// quill图片上传 |
|
|
|
|
editorUploadSuccess (res) { |
|
|
|
|
// 获取富文本组件实例 |
|
|
|
|
let quill = this.Quill; |
|
|
|
|
// 如果上传成功 |
|
|
|
|
@ -224,11 +262,37 @@ export default { |
|
|
|
|
util.successMsg("图片插入失败"); |
|
|
|
|
} |
|
|
|
|
this.loading = false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 类型切换回调 |
|
|
|
|
mdChange (val) { |
|
|
|
|
this.$emit('input', val) |
|
|
|
|
}, |
|
|
|
|
// markdown图片上传 |
|
|
|
|
imgAdd (pos, $file) { |
|
|
|
|
let $vm = this.$refs.md |
|
|
|
|
// 第一步.将图片上传到服务器. |
|
|
|
|
const formData = new FormData(); |
|
|
|
|
formData.append('file', $file); |
|
|
|
|
axios({ |
|
|
|
|
url: this.api.fileupload, |
|
|
|
|
method: 'post', |
|
|
|
|
data: formData, |
|
|
|
|
headers: { |
|
|
|
|
token: this.token, |
|
|
|
|
'Content-Type': 'multipart/form-data' |
|
|
|
|
}, |
|
|
|
|
}).then((res) => { |
|
|
|
|
$vm.$img2Url(pos, res.data.data.filesResult.fileUrl); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.type-radio { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
.quill-no-border { |
|
|
|
|
.ql-toolbar.ql-snow { |
|
|
|
|
border: none; |
|
|
|
|
@ -257,5 +321,10 @@ export default { |
|
|
|
|
transform: translateY(10px); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.md { |
|
|
|
|
max-height: 300px; |
|
|
|
|
} |
|
|
|
|
/deep/.v-note-wrapper .v-note-panel { |
|
|
|
|
min-height: 200px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
