parent
123a722bbe
commit
838abe42b8
7 changed files with 1055 additions and 704 deletions
@ -1,223 +1,310 @@ |
||||
<template> |
||||
<div class="quill" :class="[classes,readonly ? 'readonly' : '']"> |
||||
<div :ref="toref" :style="styles" v-loading="loading"></div> |
||||
<div> |
||||
<el-radio-group v-if="!readonly" |
||||
class="type-radio" |
||||
v-model="editorType" |
||||
@change="typeChange"> |
||||
<el-radio label="0">富文本</el-radio> |
||||
<el-radio label="1">markdown</el-radio> |
||||
</el-radio-group> |
||||
<div v-show="editorType == 0" |
||||
class="quill" |
||||
:class="[classes,readonly ? 'readonly' : '']"> |
||||
<div :ref="toref" |
||||
:style="styles" |
||||
v-loading="loading"></div> |
||||
|
||||
<el-upload :headers="headers" :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none"> |
||||
<el-button :id="'editorUpload' + index" ref="editorUpload" size="small" type="primary">点击上传</el-button> |
||||
</el-upload> |
||||
<el-upload :headers="headers" |
||||
:action="this.api.fileupload" |
||||
:before-upload="beforeUpload" |
||||
:on-success="editorUploadSuccess" |
||||
style="display: none"> |
||||
<el-button :id="'editorUpload' + index" |
||||
ref="editorUpload" |
||||
size="small" |
||||
type="primary">点击上传</el-button> |
||||
</el-upload> |
||||
</div> |
||||
<mavon-editor class="md" |
||||
v-model="mdVal" |
||||
v-show="editorType == 1" |
||||
ref="md" |
||||
:ishljs="true" |
||||
:subfield="false" |
||||
@change="mdChange" |
||||
@imgAdd="imgAdd" /> |
||||
</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 axios from 'axios' |
||||
import { mavonEditor } from 'mavon-editor' |
||||
import 'mavon-editor/dist/css/index.css' |
||||
|
||||
export default { |
||||
name: 'quill', |
||||
props: { |
||||
toref: { |
||||
type: String, |
||||
default: 'editor' |
||||
}, |
||||
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 () { |
||||
let that = this |
||||
return { |
||||
headers: { |
||||
token: this.$store.state.token |
||||
}, |
||||
Quill: null, |
||||
currentValue: '', |
||||
options: { |
||||
theme: 'snow', |
||||
bounds: document.body, |
||||
debug: 'warn', |
||||
modules: { |
||||
toolbar: { |
||||
container: this.readonly ? [] : toolbarOptions, |
||||
handlers: { |
||||
"image": function(value) { |
||||
if (value) { |
||||
// 调用iview图片上传 |
||||
document.querySelector("#editorUpload" + that.index).click(); |
||||
} else { |
||||
this.Quill.format("image", false); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
placeholder: '', |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false, |
||||
qu: null |
||||
} |
||||
}, |
||||
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: { |
||||
mavonEditor |
||||
}, |
||||
props: { |
||||
toref: { |
||||
type: String, |
||||
default: 'editor' |
||||
}, |
||||
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 |
||||
}, |
||||
// 编辑器切换 |
||||
type: { |
||||
type: String, |
||||
default: '0' |
||||
}, |
||||
}, |
||||
data () { |
||||
let that = this |
||||
return { |
||||
headers: { |
||||
token: this.$store.state.token |
||||
}, |
||||
editorType: '0', |
||||
mdVal: '', |
||||
Quill: null, |
||||
currentValue: '', |
||||
options: { |
||||
theme: 'snow', |
||||
bounds: document.body, |
||||
debug: 'warn', |
||||
modules: { |
||||
toolbar: { |
||||
container: this.readonly ? [] : 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 () { |
||||
// console.log(this.$refs.editorUpload.$el) |
||||
this.init(); |
||||
}, |
||||
beforeDestroy () { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
init () { |
||||
let toeval = "this.$refs."+this.toref |
||||
const editor = eval(toeval) |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
const ins = this.Quill |
||||
// 默认值 |
||||
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[this.toref].children[0].innerHTML; |
||||
const text = this.Quill.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model |
||||
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); |
||||
}); |
||||
// 监听粘贴事件 |
||||
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() |
||||
console.log(333, range) |
||||
if (range) { |
||||
// 在当前光标位置插入图片 |
||||
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
||||
// 将光标移动到图片后面 |
||||
ins.setSelection(range.index + 1) |
||||
} |
||||
}).catch(res => {}) |
||||
}); |
||||
} |
||||
}, false) |
||||
}, |
||||
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 { |
||||
util.successMsg("图片插入失败"); |
||||
} |
||||
this.loading = false; |
||||
placeholder: '', |
||||
readOnly: this.readonly |
||||
}, |
||||
loading: false, |
||||
qu: null |
||||
} |
||||
}, |
||||
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: { |
||||
type: { |
||||
handler (val) { |
||||
this.editorType = val |
||||
}, |
||||
immediate: true |
||||
}, |
||||
value: { |
||||
handler (val) { |
||||
if (this.type == 0) { |
||||
if (val !== this.currentValue) { |
||||
this.currentValue = val; |
||||
if (this.Quill) { |
||||
this.Quill.pasteHTML(this.value); |
||||
} |
||||
} |
||||
} |
||||
if (!this.mdVal) this.mdVal = val |
||||
}, |
||||
immediate: true |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.init(); |
||||
}, |
||||
beforeDestroy () { |
||||
// 在组件销毁后销毁实例 |
||||
this.Quill = null; |
||||
}, |
||||
methods: { |
||||
// 富文本切换 |
||||
typeChange (val) { |
||||
this.$emit('update:type', val) |
||||
if (!this.mdVal) this.mdVal = this.value |
||||
}, |
||||
init () { |
||||
let toeval = "this.$refs." + this.toref |
||||
const editor = eval(toeval) |
||||
// 初始化编辑器 |
||||
this.Quill = new Quill(editor, this.options); |
||||
const ins = this.Quill |
||||
// 默认值 |
||||
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[this.toref].children[0].innerHTML; |
||||
const text = this.Quill.getText(); |
||||
const quill = this.Quill; |
||||
// 更新内部的值 |
||||
this.currentValue = html; |
||||
// 发出事件 v-model |
||||
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); |
||||
}); |
||||
// 监听粘贴事件 |
||||
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() |
||||
console.log(333, range) |
||||
if (range) { |
||||
// 在当前光标位置插入图片 |
||||
ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl) |
||||
// 将光标移动到图片后面 |
||||
ins.setSelection(range.index + 1) |
||||
} |
||||
}).catch(res => { }) |
||||
}); |
||||
} |
||||
}, false) |
||||
}, |
||||
beforeUpload (file) { |
||||
this.loading = true |
||||
}, |
||||
// quill图片上传 |
||||
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 { |
||||
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.$store.state.token, |
||||
'Content-Type': 'multipart/form-data' |
||||
}, |
||||
}).then((res) => { |
||||
$vm.$img2Url(pos, res.data.data.filesResult.fileUrl); |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</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; |
||||
} |
||||
} |
||||
.type-radio { |
||||
margin-bottom: 20px; |
||||
} |
||||
.quill-no-border { |
||||
.ql-toolbar.ql-snow { |
||||
border: none; |
||||
border-bottom: 1px solid #e8eaec; |
||||
} |
||||
.ql-container.ql-snow { |
||||
border: none; |
||||
} |
||||
} |
||||
.md { |
||||
max-height: 300px; |
||||
} |
||||
/deep/.v-note-wrapper .v-note-panel { |
||||
min-height: 200px; |
||||
} |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue