修改问题知识库的富文本粘贴图片
This commit is contained in:
+47
-3
@@ -195,6 +195,7 @@
|
|||||||
import { quillEditor } from 'vue-quill-editor'
|
import { quillEditor } from 'vue-quill-editor'
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
const toolbarOptions = [
|
const toolbarOptions = [
|
||||||
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
||||||
@@ -236,7 +237,7 @@
|
|||||||
modules: {
|
modules: {
|
||||||
clipboard: {
|
clipboard: {
|
||||||
// 粘贴版,处理粘贴时候带图片
|
// 粘贴版,处理粘贴时候带图片
|
||||||
matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],
|
matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
|
||||||
},
|
},
|
||||||
toolbar: {
|
toolbar: {
|
||||||
container: toolbarOptions, // 工具栏
|
container: toolbarOptions, // 工具栏
|
||||||
@@ -337,6 +338,49 @@
|
|||||||
} else {
|
} else {
|
||||||
document.title = this.$t('problemKnowledgeBase') + this.$t('newlyAdded')
|
document.title = this.$t('problemKnowledgeBase') + this.$t('newlyAdded')
|
||||||
}
|
}
|
||||||
|
let quill = this.$refs.myQuillEditor.quill
|
||||||
|
this.$forceUpdate()
|
||||||
|
quill.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 formData = new FormData()
|
||||||
|
formData.append('file', file)
|
||||||
|
axios({
|
||||||
|
url: this.uploadAction,
|
||||||
|
method: 'post',
|
||||||
|
data: formData,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.success){
|
||||||
|
let quill = this.$refs.myQuillEditor.quill
|
||||||
|
let length = quill.getSelection().index
|
||||||
|
let fileName = res.data.result.fileName
|
||||||
|
let index1 = fileName.lastIndexOf('.')
|
||||||
|
let index2 = fileName.length
|
||||||
|
let fileSuffix = fileName.substring(index1, index2)
|
||||||
|
quill.insertEmbed(length, 'image', window._CONFIG['domianPreviewURL'] + '/sys/common/download/' + res.data.result.id + fileSuffix)
|
||||||
|
quill.setSelection(length + 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
false
|
||||||
|
)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
quilleditorBlur() {
|
quilleditorBlur() {
|
||||||
@@ -347,7 +391,7 @@
|
|||||||
Delta.ops.forEach(op => {
|
Delta.ops.forEach(op => {
|
||||||
if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片,这里会是一个对象,如果是字符串则可以添加
|
if (op.insert && typeof op.insert === 'string') {// 如果粘贴了图片,这里会是一个对象,如果是字符串则可以添加
|
||||||
ops.push({
|
ops.push({
|
||||||
insert: op.insert,
|
insert: op.insert
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -461,7 +505,7 @@
|
|||||||
let index1 = fileName.lastIndexOf('.')
|
let index1 = fileName.lastIndexOf('.')
|
||||||
let index2 = fileName.length
|
let index2 = fileName.length
|
||||||
let fileSuffix = fileName.substring(index1, index2)
|
let fileSuffix = fileName.substring(index1, index2)
|
||||||
quill.insertEmbed(length, 'image', window._CONFIG['domianPreviewURL']+'/sys/common/download/'+file.response.result.id+fileSuffix)
|
quill.insertEmbed(length, 'image', window._CONFIG['domianPreviewURL'] + '/sys/common/download/' + file.response.result.id + fileSuffix)
|
||||||
quill.setSelection(length + 1)
|
quill.setSelection(length + 1)
|
||||||
this.quillUpdateImg = false
|
this.quillUpdateImg = false
|
||||||
} else if (status === 'uploading') {
|
} else if (status === 'uploading') {
|
||||||
|
|||||||
Reference in New Issue
Block a user