如何为编辑器配置已安装的Revel框架?关联设置说明

陌雪小哥_3082

陌雪小哥_3082

2026-10-30

238人浏览

原创

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

如何为编辑器配置已安装的revel框架?关联设置说明

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 的 里取值,再放进请求头 X-CSRF-Token 或请求体
  • 切勿全局关闭 CSRF(如注释掉 revel.InterceptFunc(revel.PanicFilter, revel.BEFORE)),否则整个应用暴露

服务端接收富文本内容要防 XSS,不能直接 {{.Content}}

Revel 模板默认对 {{.Content}} 做 HTML 转义,所以如果你存的是带

Hello

Revel框架 0.19.0
Revel框架 0.19.0

Revel框架 0.19.0 版本源码包下载,适合关注 Referrer-Policy、vendor 识别、Gorp 事务抽象和 CSRF 修复的开发团队。

下载
的原始 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 数据丢失。这和普通表单提交行为不一致,容易漏测。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Golang Beego框架
Golang Beego框架

本专题聚焦 Golang 全栈式 Web 框架 Beego 的学习与实战,内容涵盖 MVC 模式、路由控制、ORM 数据库操作、模块化开发、日志管理与 RESTful API 构建。通过企业管理系统、电商后端与微服务架构等实战案例,帮助学员掌握使用 Beego 高效开发企业级应用的核心能力。

2025.08.27

3760

8

go语言 beego框架
go语言 beego框架

本专题整合了go语言中beego框架相关内容,阅读专题下的文章了解更多详细内容。

2025.09.10

7421

12

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

40

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

20

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

40

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

140

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

80

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

80

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

40

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.7万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 134.1万人学习