在這邊我只對summernote富文字加以說明

1、首先是在index.html引入對應js和css

  <link rel="stylesheet" href="dist/static/summernote/summernote.css">
  <script src="dist/static/summernote/summernote.js"></script>
  <script src="dist/static/summernote/summernote-zh-CN.js"></script>

2、我這邊的做法，是在富文字的summernote.js裡面加以修改。然後，都會遇到的一個問題就是，每次上傳完圖片後，再次點選上傳的時候，彈出的選擇檔案的彈框就會出現多次，次數會疊加。所以，我們每次上傳完檔案後，一定要初始化顯示的彈框

 var ImageDialog = function (context) {
        var self = this;
        var ui = $.summernote.ui;

        var $editor = context.layoutInfo.editor;
        var options = context.options;
        var lang = options.langInfo;

        this.initialize = function () {
            var $container = options.dialogsInBody ? $(document.body) : $editor;

            var imageLimitation = '';
            if (options.maximumImageFileSize) {
                var unit = Math.floor(Math.log(options.maximumImageFileSize) / Math.log(1024));
                var readableSize = (options.maximumImageFileSize / Math.pow(1024, unit)).toFixed(2) * 1 +
                    ' ' + ' KMGTP'[unit] + 'B';
                imageLimitation = '<small>' + lang.image.maximumFileSize + ' : ' + readableSize + '</small>';
            }

            var body = '<div id="containerNote" class="form-group note-group-select-from-files container">' +
                '<label>' + lang.image.selectFromFiles + '</label>' +
                // '<div id="container_Id"><button class="btn btn-block btn-default" id="uploadPic"><i class="fa fa-plus"></i>選擇檔案</button></div>' +
                //'<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />' +
                '<button type="button" class="btn btn-primary" id="uploadImg" style="margin-left: 16px">選擇檔案</button>'+
                imageLimitation +
                '</div>' +
                '<div class="form-group note-group-image-url" style="overflow:auto;">' +
                '<label>' + lang.image.url + '</label>' +
                '<input class="note-image-url form-control col-md-12" type="text" />' +
                '</div>';
            var footer = '<button href="#" class="btn btn-primary note-image-btn disabled" disabled>' + lang.image.insert + '</button>';

            this.$dialog = ui.dialog({
                title: lang.image.insert,
                fade: options.dialogsFade,
                body: body,
                footer: footer
            }).render().appendTo($container);
        };

        this.destroy = function () {
            ui.hideDialog(this.$dialog);
            this.$dialog.remove();
        };

        this.bindEnterKey = function ($input, $btn) {
            $input.on('keypress', function (event) {
                if (event.keyCode === key.code.ENTER) {
                    $btn.trigger('click');
                }
            });
        };

        this.show = function () {
            context.invoke('editor.saveRange');
            this.showImageDialog().then(function (data) {
                // [workaround] hide dialog before restore range for IE range focus
                ui.hideDialog(self.$dialog);
                context.invoke('editor.restoreRange');

                if (typeof data === 'string') { // image url
                    context.invoke('editor.insertImage', data);
                } else { // array of files
                    context.invoke('editor.insertImagesOrCallback', data);
                }
            }).fail(function () {
                context.invoke('editor.restoreRange');
            });
        };


        var uploader11 = null;

        /**
         * show image dialog
         *
         * @param {jQuery} $dialog
         * @return {Promise}
         */
        this.showImageDialog = function () {

            // 初始化系統選擇檔案彈框 ！！！
            if($('#containerNote').length == 0) {
                // console.log('重新初始化！！！！！！！！')
                self.initialize();
            }
            var uploader11 = null;

            return $.Deferred(function (deferred) {
                var $imageInput = self.$dialog.find('.note-image-input'),
                    $imageUrl = self.$dialog.find('.note-image-url'),
                    $imageBtn = self.$dialog.find('.note-image-btn');
                ui.onDialogShown(self.$dialog, function () {
                    context.triggerEvent('dialog.shown');
                    // Cloning imageInput to clear element.
                    //此處是上傳圖片給後端的方法，後面改為上傳到七牛雲，這邊不用管，可刪掉，我只是保留自己筆記
                    // $imageInput.replaceWith($imageInput.clone().on('change', function(){
                    //         var files = this.files,formData = new FormData()
                    //         formData.append("img",files[0]);
                    //         console.log(files[0])
                    //         // $.ajax({
                    //         //     url:commFun.qiniuPath+commFun.newApi.imgUpload,
                    //         //     type:"POST",
                    //         //     data:formData,
                    //         //     dataType:"JSON",
                    //         //     cache:false,
                    //         //     processData:false,
                    //         //     contentType:false,
                    //         //     mimeType:'multipart/form-data',
                    //         // }).done(function(ret){
                    //         //     if(ret.code==200){
                    //         //         var Path = commFun.imgHost + ret.data[0].url;
                    //         //         deferred.resolve(Path);
                    //         //         setTimeout(()=>{
                    //         //             $(".Pcpreview").html($('.note-editable').html())
                    //         //             $(".Appcontent").html($('.note-editable').html())
                    //         //         },150)
                    //         //     }
                    //         // });
                    //     }).val(''));

                    var isUpLoad = false;
                    if(!isUpLoad) {
                        console.log('開啟image對話方塊')
                        uploader11 = Qiniu.uploader({
                            config: {
                                region: 'Qiniu.region.z2'
                            },
                            runtimes: "html5,flash,html4",
                            browse_button: "uploadImg",
                            get_new_uptoken: false,
                            container: "container",
                            max_file_size: "1mb",
                            multi_selection: false,
                            // flash_swf_url: 'path/of/plupload/Moxie.swf',
                            max_retries: 3,
                            dragdrop: false,
                            drop_element: "container",
                            chunk_size: "4mb",
                            auto_start: true, //自動上傳
                            uptoken: "", //這邊的token，我就去掉了，方便公開給遇到同樣問題的朋友，一般是後端生成，這樣安全一些
                            domain: "http://img.aworld.cn/",
                            filters: {
                                max_file_size: "1mb",
                                prevent_duplicates: false, //可選擇相同圖片
                                mime_types: [{
                                    title: "Image files",
                                    extensions: "jpg,gif,png,jpeg"
                                }]
                            },
                            unique_names: true,
                            save_key: false,
                            init: {
                                FilesAdded: function(up, files) {
                                    if(files.length > 0) {
                                        // that.isReady1 = true;
                                        $("#errTip").text("檔案已選擇，請點選確認上傳");
                                        // 圖片預覽
                                        // that.showPreview(files[0],1);
                                    }
                                    plupload.each(files, function(file) {
                                        var progress = new FileProgress(file, 'fsUploadProgress');
                                        progress.setStatus("等待...");
                                        progress.bindUploadCancel(up);
                                    });
                                },
                                BeforeUpload: function(up, file) {
                                    var progress = new FileProgress(file, 'fsUploadProgress');
                                    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                                    if(up.runtime === 'html5' && chunk_size) {
                                        progress.setChunkProgess(chunk_size);
                                    }
                                },
                                UploadProgress: function(up, file) {
                                    var progress = new FileProgress(file, 'fsUploadProgress');
                                    var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                                    progress.setProgress(file.percent + "%", file.speed, chunk_size);
                                    if(file.percent == 100) {
                                        // this.imgPercent1 = 100;
                                        isUpLoad = false;
                                    } else {
                                        isUpLoad = true;
                                    }
                                },
                                FileUploaded: function(up, file, info) {
                                    var res = JSON.parse(info);
                                    var Path = "http://img.aworld.cn/" + res.key;
                                    console.log(deferred)
                                    deferred.resolve(Path);
                                    console.log('圖片地址key：'+res.key);
                                    ui.hideDialog(self.$dialog);//上傳完畢，關閉對話方塊
                                    var progress = new FileProgress(file, 'fsUploadProgress');
                                    progress.setComplete(up, info);
                                    console.log('oooooooooooooooo')
                                },
                                Error: function(up, err, errTip) {
                                    //上傳出錯時，處理相關的事情
                                    // $("#errTip").text(errTip || "上傳圖片出錯");
                                    console.log("上傳圖片出錯");
                                    var progress = new FileProgress(err.file, 'fsUploadProgress');
                                    progress.setError();
                                    progress.setStatus(errTip);
                                },
                                UploadComplete: function() {
                                    //佇列檔案處理完畢後，處理相關的事情
                                }
                            }
                        });

                    } else {
                        uploader11 = null
                    }

                    $imageBtn.click(function (event) {
                        event.preventDefault();
                        deferred.resolve($imageUrl.val());
                    });

                    $imageUrl.on('keyup paste', function () {
                        var url = $imageUrl.val();
                        ui.toggleBtn($imageBtn, url);
                    }).val('').trigger('focus');
                    self.bindEnterKey($imageUrl, $imageBtn);
                });
                ui.onDialogHidden(self.$dialog, function () {
                    $imageInput.off('change');
                    $imageUrl.off('keyup paste keypress');
                    $imageBtn.off('click');
                    $('#containerNote').remove(); //移除彈框！！！這個也一定要有！

                    if (deferred.state() === 'pending') {
                        deferred.reject();
                    }
                });

                ui.showDialog(self.$dialog);

            });
        };
    };
 

版權宣告：
本人願意分享筆記給大家，但希望能夠尊重版權，謝謝！
作者：Luvia
連結：https://blog.csdn.net/LuviaWu/article/details/83781906
若要轉載，請說明作者和出處，謝謝！