1. Background to the question

Product: The rich text editor experience of our system is very unfriendly, we cannot copy and edit pictures from Word, please help to investigate the solution. . Small K: Due to the security limitation of the browser, there are two solutions at present. One is to upload in batches and require the backend to assist Balabala (back-end transfer). One is to allow only single sheets to be copied to the editor (front-end dump). Product: I first tried the mainstream editors on the market... Products: tried, as long as it is in Word, click on a single picture - copy, in the public account, graphite and zen path can paste success. If it is batch text + diagram is not good. Ours doesn't work. Product: then use the second front-end transfer scheme you said to do it! At least the experience will be better, do not have to save to local upload again!! Small K: Ready to codingCopy the code

2. The difficulties in

  • For the sake of user experience, users should not be allowed to upload

If js is executed in a browser environment, users need to upload files to obtain local files for security reasons. If the user uploads, you can get a file object and read it through FileReader. Nodejs can read, browser environment can not read, how dare browsers give web pages so much power, web script can read files, that is quite dangerous. So only the input selected file can be read.

  • Unable to batch get clipboard images (no solution found yet)

Because copy can only copy a picture! Multifile replication, which copies the path of the file rather than the file object

2. Solution

1) Listen for the paste event

document.addEventListener('paste', function (event) { var items = event.clipboardData && event.clipboardData.items; var file = null; If (items && items. Length) {// Retrieve the clipboard items for (var I = 0; i < items.length; i++) { if (items[i].type.indexOf('image') ! == -1) { file = items[i].getAsFile(); break; }}} // File is the image file in the clipboard});Copy the code

2) upload

Whether we choose to use Base64 or formData, after we get the data, the next thing we need to do is upload. For base64 uploading, we will not do the demonstration here, but here we will only demonstrate formData uploading, in fact, the same, implementation code:

var formData = new FormData(); formData.append('file', file); // Other parameters, such as session_id formData.append('session_id', 1); Var XHR = new XMLHttpRequest(); Xhr.onload = function () {var json = json.parse (xhr.responseText); / /... Here we process the returned JSON data}; xhr.open('POST', './upload_path.com', true); xhr.send(formData);Copy the code

3) The above is to read the file upload, next is to use the image path returned by the server to replace the editor IMG, here does not write business code.

Reference:

  • www.zhangxinxu.com/wordpress/2…
  • Blog.csdn.net/lianghecai5…
  • Segmentfault.com/a/119000000…

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event