加载中…富文本编辑器Summernote自定义上传附件
(2022-04-17 22:25:59)
标签：
summernote富文本 |
分类： 前端开发 |
实现思路：
// 自定义按钮
var AttachmentButton = function (context)
{
// create
button
var button
= ui.button({
tooltip: '上传附件',
click: function () {
}
return
button.render(); // return button as jquery
object
};
type: 1,
area: ['800px',
'230px'],
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title:
'上传附件',
content:
$('#uploadTpl').html(),
btn: [' 上传', ' 取消'],
// 弹层外区域关闭
shadeClose: true,
btn1: function(index,
layero){
var file =
layero.find('#file').val().toLowerCase();
var fileExt =
file.substring(file.lastIndexOf("."));
if (file == '' ||
!$.myapp.checkFileExt(fileExt)){
$.modal.msgWarning("不支持的文件格式！");
return
false;
}
var index = layer.load(2, {shade: false});
$.modal.disable();
var formData = new
FormData(layero.find('form')[0]);
$.ajax({
url:
uploadUrl,
data:
formData,
cache:
false,
contentType: false,
processData: false,
type:
'POST',
success:
function (result) {
$.modal.enable();
if (result.code ==
web_status.SUCCESS) {
$.modal.closeAll();
layer.alert(result.msg, {
title: "系统提示",
btn: ['确认'],
btnclass: ['btn btn-primary'],
});
// 插入富文本编辑器文件链接
var srcFileName = result.srcFileName;
var fileUrl = result.url;
insertAttachment(srcFileName, fileUrl);
} else if (result.code ==
web_status.WARNING) {
layer.close(index);
$.modal.alertWarning(result.msg)
} else {
layer.close(index);
$.modal.alertError(result.msg);
}
}
});
}
});
text: "附件：" + text,
url: url,
isNewWindow: true
$('.summernote').summernote({
toolbar: [
['style',
['style']],
['font', ['bold',
'underline', 'clear']],
['fontsize',['fontsize']],
['fontname',
['fontname']],
['color',
['color']],
['para', ['ul', 'ol',
'paragraph']],
['table',
['table']],
['insert', ['hr',
'link', 'picture', 'video', 'attachment']],
['view', ['fullscreen',
'codeview', 'undo', 'redo', 'help']]
],
buttons: {
},
placeholder:
'请输入内容',
onImageUpload: function
(files) {
sendFile(files[0], this);
}
}
$('.summernote').summernote('fontName', '宋体');
1）使用自定义按钮；
2）点击按钮弹出上传窗口；
3）上传成功后返回下载链接以及附件名称；
4）在富文本编辑器中插入下载链接；
部分示例代码：
var ui = $.summernote.ui;
contents: '',
// 弹窗上传文件窗口
openUpload();
});
// 上传附件
function openUpload() {
var uploadUrl = prefix + "/uploadAttachment";
layer.open({
}
// 插入富文本编辑器附件下载链接
function insertAttachment(text, url) {
// $('.summernote').summernote('insertNode', node); //
支持插入dom元素
$('.summernote').summernote('createLink', {
});
}
// 富文本编辑器
attachment: AttachmentButton
height : 300,
lang : 'zh-CN',
followingToolbar: false,
dialogsInBody: true,
fontNames: $.myapp.summernote.fontNames,
callbacks: {
});
// @param {String} fontName
// 参考 https://summernote.org/deep-dive/
喜欢
0
赠金笔