Dieses Mal werde ich Ihnen die Implementierung der Bild-Drag-and-Paste-Funktion (mit Code) durch Vue-Simplemde vorstellen ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf. Das Projekt verwendet das Vue-Framework und benötigt eine Markdown-Bearbeitungsbox. Da ich faul bin, habe ich erneut auf npm gesucht und es gefunden Dieses Paket können Sie dann verwenden.
Dies vue-simplemde unterstützt jedoch weder das Hochladen per Drag-and-Drop noch das Hochladen von Bildern durch Einfügen, und es kann nicht gesagt werden, dass es an Vue-Simplemde liegt, da Vue-Simplemde nur in einem Vue-Plug-In gekapselt ist basierend auf simplemde. Dies liegt letztendlich daran, dass simplemde keine relevanten Funktionen bereitstellt. Aus Gründen der Benutzererfahrung ist diese Funktion jedoch erforderlich, es sei denn, der Markdown-Editor wird nicht verwendet. Verwenden Sie stattdessen einen Rich-Text-Editor. In diesem Fall muss viel Code im Projekt geändert werden. Also habe ich Artikel online und einige Codes auf Github überprüft. Folgendes wird analysiert
vue-simplemde
Der Kern der Drag-API ist das Drop-Ereignis, bei dem wir eine Datei ziehen vom Desktop bis Der Name des Ereignisses, das beim Öffnen des Browsers ausgelöst wird.
Wir alle wissen, dass das Bild direkt geöffnet wird, wenn Sie die Datei in den Browser ziehen Verhindern Sie native Vorgänge. Lassen Sie uns jetzt einen Code schreiben, um das Standardereignis zu blockieren
window.addEventListener("drop", e => {
e = e || event
if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
e.preventDefault()
}
}, false)Ereignisbehandlung
-Methode zugewiesen.// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ this.$refs.simplemde1,
this.$refs.simplemde2,
this.$refs.simplemde3
].map(({simplemde}) => {
simplemde.codemirror.on('drop', (editor, e) => {
if (!(e.dataTransfer && e.dataTransfer.files)) {
// 弹窗说明，此浏览器不支持此操作
return
}
let dataList = e.dataTransfer.files
let imageFiles = [] // 要上传的文件实例数组
// 循环，是因为可能会同时拖动几个图片文件
for (let i = 0; i < dataList.length; i++) {
// 如果不是图片，则弹窗警告 仅支持拖拽图片文件
if (dataList[i].type.indexOf('image') === -1) {
// 下面的continue，作用是，如果用户同时拖动2个图片和一个文档，那么文档不给于上传，图片照常上传。
continue
}
imageFiles.push(dataList[i]) // 先把当前的文件push进数组里，等for循环结束之后，统一上传。
}
// uploadImagesFile方法是上传图片的方法
// simplemde.codemirror的作用是用于区分当前的图片上传是处于哪个编辑框
this.uploadImagesFile(simplemde.codemirror, imageFiles)
// 因为已经有了下面这段代码，所以上面的屏蔽默认事件代码就不用写了
e.preventDefault()
})
})[ this.$refs.simplemde1,
this.$refs.simplemde2,
this.$refs.simplemde3
].map(({simplemde}) => {
simplemde.codemirror.on('drop', (editor, e) => {
if (!(e.dataTransfer && e.dataTransfer.files)) {
return
}
let dataList = e.dataTransfer.files
let imageFiles = []
for (let i = 0; i < dataList.length; i++) {
if (dataList[i].type.indexOf('image') === -1) {
continue
}
imageFiles.push(dataList[i])
}
this.uploadImagesFile(simplemde.codemirror, imageFiles)
e.preventDefault()
})
})Die Einfüge-API ist die Einfügemethode nicht wie oben, es besteht keine Notwendigkeit, das Standardereignis beim Einfügen zu deaktivieren, da wir sehen können, dass sich nichts ändert, wenn Sie ein Bild kopieren und im Browser Strg + V drücken, sodass keine Notwendigkeit besteht, das Standardereignis zu deaktivieren Ereignis.
Das Folgende ist der Code:simplemde.codemirror.on('paste', (editor, e) => { // 粘贴图片的触发函数
if (!(e.clipboardData && e.clipboardData.items)) {
// 弹窗说明，此浏览器不支持此操作
return
}
try {
let dataList = e.clipboardData.items
if (dataList[0].kind === 'file' && dataList[0].getAsFile().type.indexOf('image') !== -1) {
this.uploadImagesFile(simplemde.codemirror, [dataList[0].getAsFile()])
}
} catch (e) {
// 弹窗说明，只能粘贴图片
}
})Dieser Satz ist ein Urteil. Es wird bestätigt, dass es sich bei dem eingefügten Ding um ein Bild und nicht um etwas anderes handelt.
Der Unterschied zwischen den hochgeladenen Bildern in if ist [dataList[0].getAsFile()], denn um das Format zu vereinheitlichen und die Verarbeitung durch die Funktion uploadImagesFile zu erleichtern, habe ich [] hinzugefügt, um daraus ein Array zu machen . dataList[0].getAsFile() dient zum Abrufen der Dateiinstanz. dataList[0].getAsFile().type.indexOf('image') !== -1
Das Hochladen ist etwas mühsam:
uploadImagesFile (simplemde, files) {
// 把每个文件实例使用FormData进行包装一下，然后返回一个数组
let params = files.map(file => {
let param = new FormData()
param.append('file', file, file.name)
return param
})
let makeRequest = params => {
return this.$http.post('/Api/upload', params)
}
let requests = params.map(makeRequest)
this.$http.spread = callback => {
return arr => {
return callback.apply(null, arr)
}
}
// 服务端返回的格式是{state: Boolean, data: String}
// state为false时，data就是返回的错误信息
// state为true时，data是图片上传后url地址，这个地址是针对网站的绝对路径。如下：
// /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
Promise.all(requests)
.then(this.$http.spread((...resps) => {
for (let i = 0; i < resps.length; i++) {
let {state, data} = resps[i].data
if (!state) {
// 弹窗显示data的错误信息
continue
}
let url = `` // 拼接成markdown语法
let content = simplemde.getValue()
simplemde.setValue(content + url + '\n') // 和编辑框之前的内容进行拼接
}
}))
}Promise.all(requests)
.then(this.$http.spread((...resps) => {
// code
})axios.all(requests)
.then(axios.spread((...resps) => {
// code
})Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
jQuery-Codierungskonvertierung Base64-Upload über AJAX
Vue-Komponentenschreibspezifikation
Das obige ist der detaillierte Inhalt vonvue-simplemde implementiert die Funktion zum Ziehen und Einfügen von Bildern (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist die Tastenkombination zum Kopieren und Einfügen bei Strg?
So registrieren Sie einen dauerhaften Website-Domainnamen
Detaillierte Erklärung des Nohup-Befehls
Komplementalgorithmus für negative Zahlen
So stellen Sie den Browserverlauf auf dem Computer wieder her
Was bedeutet Taobao b2c?
Bitcoin-Explorer
Lösung für Ordner-Exe-Viren
