加载中…
个人资料
iPan
iPan
  • 博客等级:
  • 博客积分:0
  • 博客访问:8,258
  • 关注人气:234
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

富文本编辑器Summernote自定义上传附件

(2022-04-17 22:25:59)
标签:

summernote

富文本

分类: 前端开发
实现思路:
1)使用自定义按钮;
2)点击按钮弹出上传窗口;
3)上传成功后返回下载链接以及附件名称;
4)在富文本编辑器中插入下载链接;

部分示例代码:
 // 自定义按钮
        var AttachmentButton = function (context) {
var ui = $.summernote.ui;
            // create button
            var button = ui.button({
contents: '',
                tooltip: '上传附件',
                click: function () {
// 弹窗上传文件窗口
openUpload();
                }
});
            return button.render();  // return button as jquery object
        };
// 上传附件
function openUpload() {
var uploadUrl = prefix + "/uploadAttachment";
layer.open({
                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);
                            }
                        }
                    });
                }
        });
}
// 插入富文本编辑器附件下载链接
function insertAttachment(text, url) {
// $('.summernote').summernote('insertNode', node); // 支持插入dom元素
$('.summernote').summernote('createLink', {
  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: {
attachment: AttachmentButton
            },
    placeholder: '请输入内容',
height : 300,
lang : 'zh-CN',
followingToolbar: false,
dialogsInBody: true,
fontNames: $.myapp.summernote.fontNames,
callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
});
// @param {String} fontName
// 参考 https://summernote.org/deep-dive/
    $('.summernote').summernote('fontName', '宋体');

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有