首页 / 博客文章 / summernote编辑内容在前端的显示

前端处理

summernote编辑内容在前端的显示

前端处理  云邦 2023-04-17 00:56:46 235 0条

原因分析

summernote编辑器编辑的内容保存数据库时候是带有html标签的,导致直接页面回显会出现HTMl标签
有两钟处理方式,分别是前后端处理

后端处理

通过StringEscapeUtils.unescapeHtml4 双引号转义字符

  1. public String getContent() {
  2. if(StringUtils.isNotEmpty(content)){
  3. return StringEscapeUtils.unescapeHtml4(content);
  4. }
  5. return content;
  6. }

使用过程,如果出现这个类已经过期了,提醒使用新的替代类。通过查阅官方文档可知此工具类是移到了 org.apache.commons.text 这个包里面了,所以Maven换个依赖即可

  1. <dependency>
  2. <groupId>org.apache.commons</groupId>
  3. <artifactId>commons-text</artifactId>
  4. <version>1.1</version>
  5. </dependency>
前端处理

通过js将这段字符插入到html中,让html自己解析html标签,先将这些内容放在一个input中,给这个input一个hidden属性,然后通过js吧这段代码插入到textarea中,让html通过浏览器自己解析:

  1. //HTMl代码
  2. <textarea type="text" name="content" id="summernote"></textarea>
  3. <input type="hidden" id="content" value="{$obj.content}">
  4. //JS代码
  5. $(function(){
  6. var innerhtml = $("#content").val();
  7. $("#summernote").val(innerhtml);
  8. });

文章评论

置顶