在这边我只对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.youkuaiyun.com/LuviaWu/article/details/83781906
若要转载，请说明作者和出处，谢谢！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
