javascript - 一般本文編輯器裡面的貼上圖片的實現步驟是怎麼樣的？

Question

我們公司需要用到一款編輯器，裡面需要貼上圖片並上傳到伺服器端；
想了解怎麼實現截圖貼上，然後上傳伺服器的方法，求大神解惑！ ！

Answer 1

1. 在input或textarea監聽paste事件。

2. 取得剪貼簿的圖片檔案；

3. 利用FileReader 讀取檔案dataurl 來預覽，如果需要的話。

4. 呼叫上傳接口，直接上傳即可。

element.on('paste', function (event) {
                    var e = event.originalEvent, clipboardData = e.clipboardData;
                    if (clipboardData && clipboardData.items[0].type.indexOf('image') > -1) {
                        var file = clipboardData.items[0].getAsFile();//读取e.clipboardData中的数据：Blob对象
                        if(!checkFileSize(file.size)){
                            Utils.safeApply(function () {
                                $toaster.warning("只允许上传小于5MB的图片");
                            });

                            return;
                        }

                        var reader = new FileReader();

                        reader.onload = function (e) {
                            Utils.safeApply(function () {


                                $rootScope.sendPicUrl = e.target.result;
                                $rootScope.picFile = file;
                                Chat.showSendPic2Dialog();//这里可以调用上传接口，直接上传。我这里是业务关系，需要通过对话框来预览拷贝的图片，然后在对话框内再上传。
                            }, $rootScope);


                        };

                        reader.readAsDataURL(file);


                    }
                });