Let’s talk about the CSDN blog editor. It is very powerful.
It can perfectly configure the pasting and input of pictures and text.
But in fact, if you make a js version that picks up the missing version, it can also be done.
But here I chose the vue2 environment for convenience.
The reference code is as follows
<template>
<div class="editable-div" contenteditable="true" @paste="handlePaste" ref="editableDiv"></div>
</template>
<script>
export default {
methods: {
handlePaste(event) {
event.preventDefault();
const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
let items = clipboardData.items;
let dedalock = 1;
const target = this.$refs.editableDiv;
for (const item of items) {
if(dedalock == 2) {
break
}else if(dedalock == 1) {
dedalock = 2;
}
if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
const file = item.getAsFile();
const reader = new FileReader();
reader.onload = () => {
const img = document.createElement('img');
img.src = reader.result;
target.appendChild(img);
};
reader.readAsDataURL(file);
} else if (item.kind === 'string') {
debugger
item.getAsString((text) => {
const regex = /<img src="(.*?)"/;
const match = text.match(regex);
if (match) {
const img = document.createElement('img');
img.src = match[1];
target.appendChild(img);
} else {
console.log(text);
document.execCommand('insertText', false, text);
}
});
}
}
}
}
};
</script>
<style scoped>
.editable-div {
border: 1px solid #ccc;
padding: 10px;
min-height: 100px;
}
</style>
We run projects
Because it is contenteditable, it is definitely no problem to simply enter the content.
Then I copy a piece of text
and paste it in
. There is no problem with the text.
Then let’s try to take a picture
. Let’s try taking a screenshot first
and then paste it in.
There is no problem if you enter it directly.
Then we can try it on Baidu. Copy a picture
and then take it and paste it.
There is no problem
. Of course, because it is handwritten js and there are no tools, there will definitely be more bugs. You may also need to slowly improve it yourself.