13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
2017-09-13 14:31
525 查看
13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉
关键词:JS编码&解码&HTML转义escape , unescapeBlog功能模块,显示文章详情,文章内容中有jsp代码,页面乱掉。如下图所示
原因分析
在如下的HTML/JSP源代码中,有特殊字符(比如说,html标签,</textarea>)<textarea>HTML/JSP源代码</textarea>
导致页面样式乱。
解决方案
对“HTML/JSP源代码”这段文本进行escape编码。在js中再进行解码。jsp页面中对文本的输出进行escape编码,escapeXml="true":
<%--escapeXml:是否转换特殊字符--%> <textarea id="blogContent" style="display: none"><c:out value='${blog.content}' escapeXml="true"></c:out></textarea>
在js中对编码后的文本作解码unescape处理:
/** * Created by jack on 2017/3/29. */ define(function (require) { "use strict"; require('meditor'); $(function () { var parser = new Mditor.Parser(); // var blogContent = document.getElementById('blogContent').innerHTML;//这个遇到<>等特殊字符会被转译 var blogContent = document.getElementById('blogContent').value; //直接取原本的字符串。不会被转译,默认html页面中textarea区域text需要escape编码 blogContent = unescape(blogContent);//unescape解码 var html = parser.parse(blogContent); $('#rest-blog-body').append(html); hljs.initHighlightingOnLoad(); //源码高亮 $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); //编辑文章 $('#goEditBlog').on('click',function () { var blogId = $('#blogId').val(); location.href = 'goEditBlog?id=' + blogId; }); }); });
测试验证
验证OK。工程源码:https://github.com/Jason-Chen-2017/restfeel/tree/restfeel_jsp_escape_unescape_2017.5.7
相关文章推荐
- springmvc集成jsp和freemark两个模板引擎
- SpringBoot和JSP页面集成与设置首页-yellowcong
- 在JSP 页面中 添加CSS 样式
- 只有20行Javascript代码!手把手教你写一个页面模板引擎
- jsp页面下载java工程中已经有的excel模板
- 《Spring Boot极简教程》第7章 Spring Boot集成模板引擎
- 教你使用javascript简单写一个页面模板引擎
- 使用aspx页面作为模板引擎的一种实现
- 在Eclipse中修改Jsp页面的新增模板
- 详解SpringBoot集成jsp(附源码)以及遇到的坑
- SpringBoot访问JSP页面的完整代码
- jsp,velocity,freemark页面引擎的比较
- 关于jsp中bom头导致页面样式错乱(Safari)
- Spring 集成Velocity,代替JSP输出自定义页面
- 修改css文件后,jsp页面在IE8中预览部分样式突然失效的原因
- .NET中的模板引擎技术——StringTemplate(st(or HTML)模板+ASP.NET页面作为模板)
- 使用JST模板引擎加快页面交互内容开发
- springboot配置模板引擎thymeleaf
- 使用EJS(模板引擎)动态绑定页面中的数据