说起富文本编辑器，Summernote 是不少开发者常用的工具：轻量、易用、功能也够全。但在实际项目中，最常遇到的需求之一就是上传文件。如何让编辑器支持用户上传文档和图片，并在内容中正确显示？下面把这套流程拆开讲解。

准备工作

先把该准备的都备齐。确保项目中已引入 Summernote 的核心库和样式文件，以及它依赖的 jQuery、Bootstrap（按需）。

典型做法是在 HTML 页面里这样加载：

添加文件上传功能

1. 准备文件选择器

在编辑器附近放置一个文件输入框，用来触发文件选择。比如在工具条下方或页面任意位置，加上这样一句：

2. 编写上传逻辑

通过 Ja vaScript 监听文件选择事件。使用 FormData 组装文件，再通过 AJAX 提交到后端。以下是直接的实现参考：

document.getElementById('file-upload').addEventListener('change', function(event) {
    var file = event.target.files[0];
    var formData = new FormData();
    formData.append('file', file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'your-upload-url', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('File uploaded successfully');
        }
    };
    xhr.send(formData);
});

3. 在富文本中展示上传的文件

文件上传成功后，后端通常会返回一个 URL 或文件名。接下来把它插入到 Summernote 的内容区。比如上传的是文档，可以插入一个可点击的链接：

// 假设后端返回了文件名和链接
var fileName = 'example.txt';
var fileUrl = 'your-file-url';
// 使用 Summernote 的 API 插入链接
$('#summernote').summernote('editor.insertText', '' + fileName + '');

注意事项

服务器端处理

后端必须能接住上传请求。需要配置对应的路由、文件存储路径以及必要的响应处理。否则前端写得再漂亮也白搭。

安全性

文件上传是安全漏洞的高发区。建议对上传文件做严格的格式和大小限制。同时校验 MIME 类型，避免恶意脚本或危险文件混进来。搞个白名单过滤更靠谱。

《夸克》非常好用的免费AI浏览器

下载APP查看