For details about how to use Ctrl + V to paste an image in the zhihu answer question editing box-

It seems that I have no plug-ins installed like QQ mail. Is it implemented using the new HTML5 function? After reading @ Julian's answer, I found that my description was not clear enough. I used tools like QQ to cut the image. Then the image itself was saved in the clipboard, you can try the address of the * not * image saved in the clipboard by yourself and use QQ to cut a picture, then, in the edit box below, Ctrl + V1. it seems that I don't have any plug-ins like QQ mail.
Is it implemented using new HTML5 functions?
After reading @ Julian's answer, I found that my description was not clear enough.
I cut the image using tools like QQ, and then the image itself is saved in the clipboard. The address of the * not * image saved in the clipboard
You can try it by yourself, use QQ to cut a picture, and then press Ctrl + V in the edit box below.

Reply content:

Haha, I just found that zhihu editor has such a strong function. Please study it and record the following:

1. Packet Capture
   Cut a graph and paste it into the editor. Check the HTTP package and find a request for upload.zhihu.com/upload.
   The request format is multipart/form-data. The image content is uploaded together as part of the request body.
   The basic principle can be inferred here: listening and pasting → obtaining and pasting content → uploading content

2. Search code
   Search for/upload in rich_text_editor.js.

this.Vz = "http://upload." + Ak.Sl + ":" + location.port + "/upload";

It is estimated that the attribute is set, so search again. Vz to see where it is used, so we can see

function zE(a, b) {    var c = new FormData;    c.append("via", "xhr2");    c.append("upload_file", b);    var d;    d = $.ajaxSettings.xhr();    d.withCredentials = i;    var f = $.ajax({url: a.Vz,data: c,processData: l,contentType: l,xhr: function() {            return d        },type: "POST"}).done(function(a) {

Ah, I found it. Here it should be the place where the image data is sent, and the HTML5 feature FormData is used.
In short, ajax can only send text to the server before, while XMLHttpRequest Level2 provided by HTML5 now supports sending binary data. Here c. append ("upload_file", B) B should be the binary data of the image.

Breakpoint
It is much easier to continue tracing. You only need to set a breakpoint in this place, and then paste
The Call Stack of the Chrome debugging tool will tell you where the previous step of the program is.

In short, the Code logic may be like this:

Function onPasteEvent (e) {if (e & e. clipboardData & e. clipboardData. getData) {if (/image /. test (e. clipboardData. types) {// paste the image var imageContent = e. clipboardData. getData ('image/xxxx'); // check the source of the image. // if the source is the original data, such as QQ or Word, directly upload data // This part may use the HTTP_CONTENT_DISPOSITION upload mechanism in HTML5. // In addition to HTML5, non-explicit input [type = "file"] should be unable to upload files // if it is file, upload it to zhihu server // if it is an external website URL, the background curl get is transferred to the zhihu server // finally generates a zhihu URL, which is inserted as an img label into contentEditable p} else if (/text \/plain /. test (e. clipboardData. types) {// paste the simple text ....} else {//....} if (e. preventDefault) {e. stopPropagation (); e. preventDefault () ;}return false ;}}

The above is a detailed explanation of how to use Ctrl + V to paste an image in the zhihu answer question editing box. For more information, see the PHP Chinese website (www.php1.cn )!