开发喵星球

若依富文本编辑使用常见问题整理(九十七)

1、富文本编辑器文件上传

富文本控件采用的summernote,图片上传处理需要设置callbacks函数

$('.summernote').summernote({
    height : '220px',
    lang : 'zh-CN',
    callbacks: {
        onImageUpload: function(files, editor, $editable) {
            var formData = new FormData();
            formData.append("file", files[0]);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $(obj).summernote('editor.insertImage', result.url, result.fileName);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                error: function(error) {
                    $.modal.alertWarning("图片上传失败。");
                }
            });
        }
    }
});

2、富文本编辑器底部回弹

富文本控件采用的summernote,如果不需要底部回弹设置followingToolbar: false

$('.summernote').summernote({
    placeholder: '请输入公告内容',
    height : 192,
    lang : 'zh-CN',
    followingToolbar: false,
    callbacks: {
        onImageUpload: function (files) {
            sendFile(files[0], this);
        }
    }
});

3、富文本对话框回弹顶部

富文本控件采用的summernote,点击下方的各种按钮的弹框时,页面会回到顶部,滚到顶部会使用户体验很不好,如需要置于弹框的body中,可以设置dialogsInBody: true

$('.summernote').summernote({
    placeholder: '请输入公告内容',
    height : 192,
    lang : 'zh-CN',
    dialogsInBody: true,
    callbacks: {
        onImageUpload: function (files) {
            sendFile(files[0], this);
        }
    }
});
   
分类:Java/OOP 作者:无限繁荣, 吴蓉 发表于:2024-01-10 15:28:08 阅读量:205
<<   >>


powered by kaifamiao