thymeleaf模板获取markdown数据后，渲染到页面上（showdown.js）

我今天遇到一个问题，通过markdown输入数据保存到数据库中，然后前端无法渲染markdown数据，一直困惑了我几个小时，终于找到showdown.js插件。

没渲染前:

方法：
1.导入showdown.js,我这里采用的CDN方式

 <script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>

2.通过jquery获取页面上还未渲染的数据:

<div id="contents" class="typo m-content-padding  m-padd-index-large" th:text="${blog.content}"></div><script type="text/javascript">//页面一加载完毕就执行这个函数window.onload=function () {//onload:在页面加载完毕后就自动指定该函数var val = $("#contents").text();//得到还未转换md的数据var converter = new showdown.Converter(); //创建实例var html = converter.makeHtml(val);// 进行转换$('#contents').html(html);//重新渲染到页面上}</script>

3.效果:

thymeleaf模板获取markdown数据后，渲染到页面上（showdown.js）相关推荐

ajax获取数据后渲染到页面方法
$.ajax({url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:for ...
【实习小tip】多层dialog弹窗遮罩问题、elementUI的form表单组件的select框在只读的情况下没办法拿到传来的数据、从弹窗子组件获取数据后需要刷新页面
解决elementui多层dialog弹窗遮罩问题弹窗套娃出现了整个屏幕都是遮罩层的问题,需要鼠标点击一下才能正常. 在弹窗组件代码上加上 append-to-body 就可以了,表示这个弹窗是嵌在 ...
【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
html输出计算结果到文本框,在文本框中输入两个操作数和选择运算符后，在页面上显示输出结果...
需求说明: 在文本框中输入两个操作数和选择运算符后,在页面上显示输出结果实现思路: 单击"计算"按钮后,删除两个文本框左右两边的空格,删除空格后,判断输入框中是否都输入了内容,只 ...
关于后端数据无法显示在页面上的问题
问题出现:数据无法显示在页面上的问题 ,jsp中EL表达式在前端页面里被视为文本内容而显示出来原因分析:可能是xml配置问题,不支持EL表达式 web.xml内容如下: <!DOCTYPE w ...
vue从后台获取新数据后刷新_vue项目中实现定时刷新页面（重新渲染数据实时更新）...
需求: 每隔一分钟自动刷新一下当前页面,同时发送请求,重新渲染数据,以到达实时更新. 开始: js有两种定时器 setInterval(function(){}, milliseconds)--会不停 ...
vue 加载数据后渲染页面
问题描述: 在接口数据返回之前,页面开始渲染HTML,导致因为接口数据为undefined或' ' (空)报错. 解决方法: 等待接口数据返回后再渲染HTML 代码实现: 使用v-if来控制页面的渲染 ...
vue中拿到接口，并获取数据，渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法前提 ...
python获取网页数据后写入mysql_HTTP协议与使用Python获取数据并写入MySQL
一.Http协议二.Https协议三.使用Python获取数据 (1)urlib (2)GET请求 (3)POST请求四.爬取豆瓣电影实战 1.思路 (1)在浏览器中输入https://movi ...
Flutter笔记: 获取网络数据及渲染列表
本篇文章记录我在使用Flutter开发中如何请求后端接口获取数据, 使用到的包有http用来发送请求,async提供Future抽象类以及convert用来将json数据转换为dart里面的对象. 首 ...

thymeleaf模板获取markdown数据后，渲染到页面上（showdown.js）

thymeleaf模板获取markdown数据后，渲染到页面上（showdown.js）相关推荐

最新文章

热门文章