Revel框架不内置富文本编辑器,需手动集成第三方编辑器:正确配置/assets/静态路径、绕过CSRF限制、用{{.Content|safe}}安全渲染、使用bluemonday过滤XSS、自定义上传路由并校验文件、注意Flash消息需后端重定向才能生效。

Revel 框架本身不内置富文本编辑器,所谓“为编辑器配置 Revel”实际是指:在 Revel 应用中正确引入、加载并提交第三方编辑器(如 ReactQuill、CKEditor 5、tinymce)的前端资源,并确保表单提交后服务端能安全接收和渲染内容。关键不在 Revel 做了什么,而在你如何绕过它的默认约束把编辑器接进去。
静态资源路径必须用 /assets/,不是 /public/
Revel 默认将 app/public/ 目录映射到 URL 路径 /assets/,不是 /public/。如果你把 quill.js 放进 app/public/js/quill.min.js,访问地址只能是 http://localhost:8080/assets/js/quill.min.js。
- 模板中引用必须写成:
<script src="/assets/js/quill.min.js"></script>,写/public/js/...会 404 - 检查
conf/app.conf是否禁用了静态文件服务:确认没有设置http.static.dir = ""或http.static.enable = false - 开发时改了
public/下的 JS 文件,Revel 不会自动重载——必须手动刷新浏览器,因为热重载只监听app/和conf/
表单提交需绕过 Revel 默认的 CSRF 拦截(或显式放行)
Revel 默认启用 CSRF 防护,对 POST 请求校验 _csrf token。但像 ReactQuill 这类 SPA 式编辑器常通过 fetch 提交 JSON,不会自动带这个字段,直接 403。
- 方案一(推荐):在控制器方法上加
revel.InterceptFunc(disableCSRF, revel.BEFORE, &YourController{}),其中disableCSRF函数调用c.Params.Set("csrf.token", "skip") - 方案二:前端提交时显式带上 token —— 先从页面 HTML 的
<meta name="csrf-token" content="xxx">里取值,再放进请求头X-CSRF-Token或请求体 - 切勿全局关闭 CSRF(如注释掉
revel.InterceptFunc(revel.PanicFilter, revel.BEFORE)),否则整个应用暴露
服务端接收富文本内容要防 XSS,不能直接 {{.Content}}
Revel 模板默认对 {{.Content}} 做 HTML 转义,所以如果你存的是带 <p><strong>Hello</strong></p> 的原始 HTML,直接渲染只会看到源码文字,而不是加粗效果。
- 要用
{{.Content|safe}}渲染(前提是内容已由服务端做过白名单过滤) - 绝对不要跳过过滤直接存用户输入的 HTML —— 推荐用
bluemonday库清洗:policy := bluemonday.UGCPolicy(); clean := policy.Sanitize(input) - 若用
ReactQuill的纯文本模式(readOnly: true, theme: 'bubble'),可存 Markdown,服务端转 HTML 再清洗,更可控
上传图片等附件需单独处理,Revel 不提供内置上传路由
像 ReactQuill 的图片上传功能,默认会发 POST /upload,但 Revel 不会自动创建该路由,也不解析 multipart/form-data 中的文件字段(除非你手动调用 c.Params.Files)。
- 必须在
app/controllers/UploadController.go中定义func (c Upload) Image() revel.Result,并在routes或init.go中注册POST /upload/image - 获取文件用:
file, header, err := c.Params.Files["image"];保存前务必校验header.Header.Get("Content-Type")和扩展名 - 上传成功后,返回 JSON:
return c.RenderJSON(map[string]string{"url": "/assets/uploads/" + filename}),供编辑器插入
最易被忽略的一点:Revel 的 Flash 消息机制依赖 Cookie,而富文本编辑器常走 AJAX 提交。如果提交成功后想跳转并显示 “保存成功”,不能靠前端 window.location.href,得让后端返回重定向响应(c.Redirect(...)),否则 Flash 数据丢失。这和普通表单提交行为不一致,容易漏测。


















