Cette fois, je vais vous présenter vue-simplemde pour implémenter la fonction glisser-coller d'image (avec code). Quelles sont les précautions pour que vue-simplemde implémente la fonction glisser-coller d'image. est un cas pratique. Levez-vous et jetez un œil.
Le projet utilise le framework vue et a besoin d'une boîte d'édition markdown. Je l'ai recherché sur npm et j'ai trouvé que simplemde est plutôt bon, j'ai cherché à nouveau sur npm et je l'ai trouvé. Ce package, puis commencez à l'utiliser. vue-simplemde
ne prend pas en charge le téléchargement par glisser-déposer ou le téléchargement par collage d'images, et on ne peut pas dire que cela soit dû à vue-simplemde, car vue-simplemde n'est encapsulé que dans un plug Vue. -in basé sur simplemde. Donc au final, c'est parce que simplemde ne fournit pas de fonctions pertinentes, mais pour le bien de l'expérience utilisateur, cette fonction est nécessaire à moins que l'éditeur de démarques ne soit pas utilisé. Utilisez plutôt un éditeur de texte enrichi. Dans ce cas, une grande partie du code du projet devra être modifiée. J'ai donc vérifié des articles en ligne et quelques codes sur github. Ce qui suit sera analysé vue-simplemde
Glisser-déposer
Le cœur de l'API glisser est l'événement de dépôt, c'est-à-dire lorsque nous faisons glisser un fichier du bureau au nom de l'événement déclenché lors de la sortie du navigateur. Nous savons tous que si vous faites glisser une image dans le navigateur, l'image sera ouverte directement car le navigateur ouvre par défaut le fichier lorsque vous faites glisser le fichier dans le navigateur. empêcher les opérations natives. Écrivons maintenant un morceau de code pour bloquer l'événement par défaut
window.addEventListener("drop", e => {
e = e || event
if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
e.preventDefault()
}
}, false)gestion des événements.
// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ 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()
})
})Coller
L'API de collage est la méthode de collage, Ceci Contrairement à ce qui précède, il n'est pas nécessaire de désactiver l'événement par défaut pour le coller, car nous pouvons voir que lorsque vous copiez une image et appuyez sur ctrl+v dans le navigateur, rien ne changera, il n'est donc pas nécessaire de désactiver l'événement par défaut. . Voici le 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) {
// 弹窗说明，只能粘贴图片
}
}) Cette phrase est un jugement. Il est confirmé que l'objet collé est une image et non autre chose. dataList[0].getAsFile().type.indexOf('image') !== -1
Téléchargement
Le téléchargement est un peu gênant :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
})Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Téléchargement de la conversion d'encodage jQuery en base64 via AJAX
Spécification d'écriture du composant Vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelle est la touche de raccourci pour copier et coller ctrl ?
Comment écrire des contraintes de vérification MySQL
Comment définir le chinois dans Eclipse
Introduction aux caractères de retour chariot et de saut de ligne en Java
Comment formater le disque dur sous Linux
Méthode de production de rapports Intouch
Comment exécuter du code HTML dans vscode
le wifi n'affiche aucune adresse IP attribuée
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
