13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉原因分析解决方案测试验证

13.14 SpringBoot集成JSP模板引擎:JSP页面样式乱掉

关键词:JS编码&解码&HTML转义escape , unescape

Blog功能模块,显示文章详情,文章内容中有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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hrscy

iOS 9 Storyboard 教程(二上)介绍Segue静态单元格(static cell)

Add Player 最终的设计看上去像下面这样:#接第一部分: 原帖地址 简书地址

2111
来自专栏腾讯IVWEB团队的专栏

React + Redux 组件化方案

在介绍组件化方案之前,先对 react 和 redux 做一个简单介绍。理想中的组件化,第一步应该就是组件的标签化, 例如有一个 Header 组件,无需关注...

6620
来自专栏cnblogs

Vuex原来可以这样上手

     在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使...

2055
来自专栏Flutter入门到实战

开发工具总结(5)之Markdown语法图文全面详解及其工具介绍

版权声明:本文为博主原创文章(少量文字参考他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/c0a2897a...

2194
来自专栏前端儿

前端神器之Sublime Text2/3简单明了使用总结

第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~)。一般IDE比如WebStorm(它也是一款神器来着),Aptan...

1042
来自专栏Kevin-ZhangCG

Intellij Idea 2018常用快捷键总结

快捷键列表 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码

5073
来自专栏Ryan Miao

idea快捷键总结

使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键。参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会...

28612
来自专栏葡萄城控件技术团队

三天学会HTML5 之第一天

引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

2207
来自专栏Java学习123

Eclipse快捷键最有用的快捷键

3417
来自专栏前端说吧

vue - 使用vue实现自定义多选与单选的答题功能

3032

扫码关注云+社区