|
|
|
|
@ -0,0 +1,121 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="quill-editor-content">
|
|
|
|
|
<quillEditor
|
|
|
|
|
:options="editorOption"
|
|
|
|
|
ref="myQuillEditor"
|
|
|
|
|
v-model="contentHtml"
|
|
|
|
|
style="height: 200px"
|
|
|
|
|
></quillEditor>
|
|
|
|
|
<a-upload
|
|
|
|
|
name="file"
|
|
|
|
|
:beforeUpload="beforeUpload"
|
|
|
|
|
:customRequest="customRequest"
|
|
|
|
|
:showUploadList="false">
|
|
|
|
|
<span class="quill-upload"></span>
|
|
|
|
|
</a-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {quillEditor} from 'vue-quill-editor';
|
|
|
|
|
import 'quill/dist/quill.core.css';
|
|
|
|
|
import 'quill/dist/quill.snow.css';
|
|
|
|
|
import 'quill/dist/quill.bubble.css';
|
|
|
|
|
import {Upload} from 'ant-design-vue';
|
|
|
|
|
import GUID_UUID from '../../../global-llibs/guid-uuid'
|
|
|
|
|
import StaticParams from '../../../global-llibs/staticParams'
|
|
|
|
|
|
|
|
|
|
const toolbarOptions = [
|
|
|
|
|
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
|
|
|
|
['blockquote', 'code-block'],
|
|
|
|
|
|
|
|
|
|
[{header: 1}, {header: 2}], // custom button values
|
|
|
|
|
[{list: 'ordered'}, {list: 'bullet'}],
|
|
|
|
|
[{script: 'sub'}, {script: 'super'}], // superscript/subscript
|
|
|
|
|
[{indent: '-1'}, {indent: '+1'}], // outdent/indent
|
|
|
|
|
[{direction: 'rtl'}], // text direction
|
|
|
|
|
|
|
|
|
|
// [{size: ['small', false, 'large', 'huge']}], // custom dropdown
|
|
|
|
|
[{header: [1, 2, 3, 4, 5, 6, false]}],
|
|
|
|
|
|
|
|
|
|
[{color: []}, {background: []}], // dropdown with defaults from theme
|
|
|
|
|
// [{font: []}],
|
|
|
|
|
[{align: []}],
|
|
|
|
|
// ['link', 'image', 'video'],
|
|
|
|
|
['image'],
|
|
|
|
|
['clean'] // remove formatting button
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
export default{
|
|
|
|
|
props:{
|
|
|
|
|
content:{
|
|
|
|
|
default:""
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
quillEditor,
|
|
|
|
|
AUpload: Upload
|
|
|
|
|
},
|
|
|
|
|
watch:{
|
|
|
|
|
content:{
|
|
|
|
|
immediate:true, //初始化时让handler调用一下
|
|
|
|
|
//handler什么时候调用？当content发生改变时。（一个参数就是newValue）
|
|
|
|
|
handler(newValue,oldValue){
|
|
|
|
|
this.contentHtml = newValue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
contentHtml:this.$props.content,
|
|
|
|
|
editorOption: {
|
|
|
|
|
modules: {
|
|
|
|
|
toolbar: {
|
|
|
|
|
container: toolbarOptions,
|
|
|
|
|
handlers: {
|
|
|
|
|
// 重写点击组件上的图片按钮要执行的代码
|
|
|
|
|
'image': function (value) {
|
|
|
|
|
document.querySelector('.quill-upload').click()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
beforeUpload: function (file) {
|
|
|
|
|
const fileName = file.name
|
|
|
|
|
const extension = fileName.substr(file.name.lastIndexOf('.') + 1)
|
|
|
|
|
const guid = GUID_UUID.guid().toUpperCase()
|
|
|
|
|
const key = "down/Material/" + guid.substring(0, 2) + "/" + guid + "." + extension
|
|
|
|
|
file.extension = extension
|
|
|
|
|
file.key = key
|
|
|
|
|
file.url = key
|
|
|
|
|
file.uid = guid
|
|
|
|
|
return true
|
|
|
|
|
},
|
|
|
|
|
//定义个性化上传请求动作
|
|
|
|
|
customRequest: function (info) {
|
|
|
|
|
const {file, onSuccess, onProgress, onError} = info
|
|
|
|
|
StaticParams.uploadFile(file, (res) => {
|
|
|
|
|
if (res.success) {
|
|
|
|
|
let url = window.location.protocol + "//" + window.location.host + "/dsideal_yy/html/" + res.data.url;
|
|
|
|
|
const quill = this.$refs.myQuillEditor.quill
|
|
|
|
|
// 获取光标位置
|
|
|
|
|
const pos = quill.getSelection().index
|
|
|
|
|
// 插入图片到光标位置
|
|
|
|
|
quill.insertEmbed(pos, 'image', url)
|
|
|
|
|
} else {
|
|
|
|
|
console.log("图片插入失败")
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
getContent:function () {
|
|
|
|
|
return this.contentHtml;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
</style>
|
