Spring Boot集成CKeditor：取回数据显示转义HTML标签致样式失效

这个问题我之前在整合Spring Boot和CKEditor的时候也踩过坑，核心原因就是HTML内容在存储、传输或渲染的某个环节被自动转义了，导致原本的标签变成了<h1>这种实体字符，没法被浏览器解析成样式。下面给你几个具体的排查和解决步骤：

1. 先检查前端渲染环节（最常见的原因） #

如果后端返回的内容其实是正确的HTML字符串，但前端显示的时候还是转义后的字符，大概率是模板引擎自动做了转义：

• 如果你用的是Thymeleaf，别用th:text="${content}"，改用th:utext="${content}"——前者会把HTML标签转义成实体字符，后者会直接渲染原始HTML。
• 要是用Freemarker，需要用${content?no_esc}来关闭转义。
• 前后端分离项目的话：Vue用v-html="content"，React用dangerouslySetInnerHTML={{__html: content}}，直接把HTML字符串插入DOM。

2. 确认后端接收参数时是否被转义 #

Spring MVC默认会对请求参数做HTML转义，导致你接收到的就是已经转义后的字符串，存到数据库自然也不对：

• 可以在接收参数的方法上，给对应的参数加上@RawValue注解（Spring 5.2+支持），告诉框架不要转义这个参数：

  @PostMapping("/save")
  public String saveContent(@RawValue String content) {
      // 直接保存content到数据库
      return "success";
  }
  

• 或者全局关闭HTML转义，在application.properties里加：

  spring.mvc.html-escaping=false
  

  不过全局关闭要注意XSS风险，建议只针对富文本接口做单独处理。

3. 检查数据库存储的内容是否正确 #

先直接看MySQL表里的字段值，如果已经是<h1>Heading</h1>，那说明存储前就被转义了。如果是原始的<h1>Heading</h1>，那问题就出在读取或渲染环节。

• 如果你用MyBatis，检查是否配置了自动转义的类型处理器，比如某些自定义的StringTypeHandler会自动转义HTML，需要调整配置。

4. 确认CKEditor的输出配置 #

有时候CKEditor本身会把输出的HTML转义，导致提交的就是转义后的内容：

• 初始化CKEditor的时候，确保htmlEncodeOutput设置为false（默认就是false，但可能被修改过）：

  ClassicEditor
    .create(document.querySelector('#editor'), {
      htmlEncodeOutput: false
    })
    .catch(error => {
      console.error(error);
    });
  

按这个顺序排查，一般都能解决问题——优先查前端渲染，这个是最容易忽略的点！

内容的提问来源于stack exchange，提问作者Zeusox