parent
b4765b92fb
commit
1b9a21d642
7 changed files with 1310 additions and 1079 deletions
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 81 KiB |
@ -1,253 +1,322 @@ |
|||||||
<template> |
<template> |
||||||
<div class="quill" ref="quill" :class="classes"> |
<div> |
||||||
<div ref="editor" :style="styles" v-loading="loading"></div> |
<el-radio-group class="type-radio" |
||||||
<el-upload |
v-model="type" |
||||||
:headers="headers" |
@change="typeChange"> |
||||||
:action="this.api.fileupload" |
<el-radio :label="0">富文本</el-radio> |
||||||
:before-upload="beforeUpload" |
<el-radio :label="1">markdown</el-radio> |
||||||
:on-success="editorUploadSuccess" |
</el-radio-group> |
||||||
style="display: none"> |
|
||||||
<el-button class="editorUpload" type="primary">点击上传</el-button> |
<div v-show="!type" |
||||||
</el-upload> |
class="quill" |
||||||
|
ref="quill" |
||||||
|
:class="classes"> |
||||||
|
<div ref="editor" |
||||||
|
: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 class="editorUpload" |
||||||
|
type="primary">点击上传</el-button> |
||||||
|
</el-upload> |
||||||
</div> |
</div> |
||||||
|
<mavon-editor class="md" |
||||||
|
v-model="mdVal" |
||||||
|
v-show="type" |
||||||
|
ref="md" |
||||||
|
:ishljs="true" |
||||||
|
@change="mdChange" |
||||||
|
@imgAdd="imgAdd" /> |
||||||
|
</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 axios from 'axios' |
||||||
|
import { mavonEditor } from 'mavon-editor' |
||||||
|
import 'mavon-editor/dist/css/index.css' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'quill', |
name: 'quill', |
||||||
props: { |
components: { |
||||||
value: { |
mavonEditor |
||||||
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: { |
||||||
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
type: Number |
||||||
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
}, |
||||||
*/ |
/* |
||||||
elseRead:{ |
* 原本的readOnly失效,对比其他项目，发现是quill版本不同导致， |
||||||
type:String,default:'false' |
* 使用props传入elseRead = 'true'，手动隐藏工具栏 |
||||||
} |
*/ |
||||||
}, |
elseRead: { |
||||||
data () { |
type: String, default: 'false' |
||||||
return { |
} |
||||||
headers: { |
}, |
||||||
token: sessionStorage.getItem('token') |
data () { |
||||||
}, |
return { |
||||||
Quill: null, |
headers: { |
||||||
currentValue: '', |
token: sessionStorage.getItem('token') |
||||||
options: { |
}, |
||||||
theme: 'snow', |
type: 0, |
||||||
bounds: document.body, |
mdVal: '', |
||||||
debug: 'warn', |
Quill: null, |
||||||
modules: { |
currentValue: '', |
||||||
toolbar: { |
options: { |
||||||
container: toolbarOptions, |
theme: 'snow', |
||||||
handlers: { |
bounds: document.body, |
||||||
'image': function (value) { |
debug: 'warn', |
||||||
if (value) { |
modules: { |
||||||
// 调用iview图片上传 |
toolbar: { |
||||||
document.querySelector('.editorUpload').click() |
container: toolbarOptions, |
||||||
} else { |
handlers: { |
||||||
this.Quill.format('image', false); |
'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`; |
|
||||||
} |
} |
||||||
return style; |
} |
||||||
}, |
|
||||||
|
|
||||||
}, |
|
||||||
watch: { |
|
||||||
value: { |
|
||||||
handler (val) { |
|
||||||
if (val !== this.currentValue) { |
|
||||||
this.currentValue = val; |
|
||||||
if (this.Quill) { |
|
||||||
this.Quill.pasteHTML(this.value); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
immediate: true |
|
||||||
} |
} |
||||||
|
} |
||||||
}, |
}, |
||||||
created(){ |
placeholder: '', |
||||||
}, |
readOnly: this.readonly |
||||||
mounted () { |
}, |
||||||
this.init(); |
loading: false |
||||||
// 处理工具栏隐藏样式 |
} |
||||||
if(this.elseRead==='true'){ |
}, |
||||||
let children = this.$refs.quill.children[0].style |
computed: { |
||||||
children.padding = '0' |
classes () { |
||||||
children.overflow = 'hidden' |
return [ |
||||||
children.height = '0' |
{ |
||||||
children.borderTop = '0' |
'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: { |
||||||
|
value: { |
||||||
|
handler (val) { |
||||||
|
if (!this.type) { |
||||||
|
if (val !== this.currentValue) { |
||||||
|
this.currentValue = val; |
||||||
|
if (this.Quill) { |
||||||
|
this.Quill.pasteHTML(this.value); |
||||||
} |
} |
||||||
}, |
} |
||||||
beforeDestroy () { |
if (!this.mdVal) this.mdVal = val |
||||||
// 在组件销毁后销毁实例 |
|
||||||
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 |
|
||||||
} |
|
||||||
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){ |
|
||||||
this.loading = true |
|
||||||
}, |
|
||||||
editorUploadSuccess (res) { |
|
||||||
// 获取富文本组件实例 |
|
||||||
let quill = this.Quill |
|
||||||
// 如果上传成功 |
|
||||||
if (res.data.filesResult.fileUrl) { |
|
||||||
// 获取光标所在位置 |
|
||||||
let lengths; |
|
||||||
if ( quill.getSelection() == null){ |
|
||||||
lengths = 1 |
|
||||||
}else{ |
|
||||||
lengths = quill.getSelection().index; |
|
||||||
} |
|
||||||
// 插入图片，res为服务器返回的图片链接地址 |
|
||||||
quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl) |
|
||||||
// 调整光标到最后 |
|
||||||
quill.setSelection(lengths + 1) |
|
||||||
} else { |
|
||||||
this.$message.success('图片插入失败') |
|
||||||
} |
|
||||||
this.loading = false |
|
||||||
}, |
|
||||||
} |
} |
||||||
|
}, |
||||||
|
immediate: true |
||||||
} |
} |
||||||
</script> |
}, |
||||||
<style lang="scss" scoped> |
mounted () { |
||||||
.quill-no-border{ |
this.init(); |
||||||
.ql-toolbar.ql-snow{ |
// 处理工具栏隐藏样式 |
||||||
border: none; |
if (this.elseRead === 'true') { |
||||||
border-bottom: 1px solid #e8eaec; |
let children = this.$refs.quill.children[0].style |
||||||
|
children.padding = '0' |
||||||
|
children.overflow = 'hidden' |
||||||
|
children.height = '0' |
||||||
|
children.borderTop = '0' |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeDestroy () { |
||||||
|
// 在组件销毁后销毁实例 |
||||||
|
this.Quill = null; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 富文本切换 |
||||||
|
typeChange (val) { |
||||||
|
if (!this.mdVal) this.mdVal = this.value |
||||||
|
}, |
||||||
|
|
||||||
|
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 |
||||||
|
} |
||||||
|
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 => { }) |
||||||
|
}); |
||||||
} |
} |
||||||
.ql-container.ql-snow{ |
}, false) |
||||||
border: none; |
}, |
||||||
|
beforeUpload (file) { |
||||||
|
this.loading = true |
||||||
|
}, |
||||||
|
// quill图片上传 |
||||||
|
editorUploadSuccess (res) { |
||||||
|
// 获取富文本组件实例 |
||||||
|
let quill = this.Quill |
||||||
|
// 如果上传成功 |
||||||
|
if (res.data.filesResult.fileUrl) { |
||||||
|
// 获取光标所在位置 |
||||||
|
let lengths; |
||||||
|
if (quill.getSelection() == null) { |
||||||
|
lengths = 1 |
||||||
|
} else { |
||||||
|
lengths = quill.getSelection().index; |
||||||
} |
} |
||||||
|
// 插入图片，res为服务器返回的图片链接地址 |
||||||
|
quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl) |
||||||
|
// 调整光标到最后 |
||||||
|
quill.setSelection(lengths + 1) |
||||||
|
} else { |
||||||
|
this.$message.success('图片插入失败') |
||||||
|
} |
||||||
|
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; |
||||||
|
border-bottom: 1px solid #e8eaec; |
||||||
} |
} |
||||||
.else{ |
.ql-container.ql-snow { |
||||||
.ql-toolbar.ql-snow{ |
border: none; |
||||||
height: 0; |
|
||||||
overflow: hidden; |
|
||||||
padding: 0; |
|
||||||
border-top: 0; |
|
||||||
} |
|
||||||
} |
} |
||||||
/deep/.ql-snow { |
} |
||||||
position: relative; |
.else { |
||||||
.ql-tooltip { |
.ql-toolbar.ql-snow { |
||||||
position: absolute !important; |
height: 0; |
||||||
top: 0 !important; |
overflow: hidden; |
||||||
left: -100px !important; |
padding: 0; |
||||||
transform: translateY(10px); |
border-top: 0; |
||||||
} |
} |
||||||
|
} |
||||||
|
/deep/.ql-snow { |
||||||
|
position: relative; |
||||||
|
.ql-tooltip { |
||||||
|
position: absolute !important; |
||||||
|
top: 0 !important; |
||||||
|
left: -100px !important; |
||||||
|
transform: translateY(10px); |
||||||
} |
} |
||||||
|
} |
||||||
|
.md { |
||||||
|
max-height: 300px; |
||||||
|
} |
||||||
|
/deep/.v-note-wrapper .v-note-panel { |
||||||
|
min-height: 200px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue