marked.js读取markdown文件,图片实现点击放大
作者:互联网
marked.js图片实现点击放大
一、基础配置
当前前端渲染markdown文件比较好的插件就是marked.js了。
import marked from 'marked'
const rendererMD = new marked.Renderer()
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
})
// 对应后端接口路径,或者本地路径
axios.get('/md' + this.$route.query.pageUrl).then(res => {
this.markedHtml = marked(res.data) // 解析好的markdown,直接在对应容器标签上传进v-html里面即可
})
二、设置回调
如果需要实现点击放大的功能,那就需要在所有img标签上绑定回调函数,获取到当前dom或者是src
刚好,markedjs给我们提供了img标签的回调
// marked解析过程中解析到图片的回调,为每个img标签绑定点击事件,并传递当前事件以及href图片链接
rendererMD.image = function(href, title, text) {
return `<img οnclick="showMarkedImage(event, '${href}')" src="${href}" alt="${text}" title="${
title ? title : ''
}">`
}
监听事件
我这里实现了投机取巧的方式,直接全屏显示了。
window.showMarkedImage = function(e, href) {
let el = e.target
let rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullScreen
if (rfs) {
rfs.call(el)
}
console.log(href)
}
三、最终代码
import marked from 'marked'
import axios from 'axios'
import highlight from 'highlight.js'
import 'highlight.js/styles/github.css' //css可以找自己喜欢的样式
export default {
name: 'index',
data() {
return {
markedHtml: ''
}
},
mounted() {
window.showMarkedImage = function(e, href) {
let el = e.target
let rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullScreen
if (rfs) {
rfs.call(el)
}
console.log(href)
}
this.mdConvert()
},
methods: {
mdConvert() {
const rendererMD = new marked.Renderer()
rendererMD.image = function(href, title, text) {
return `<img οnclick="showMarkedImage(event, '${href}')" src="${href}" alt="${text}" title="${
title ? title : ''
}">`
}
marked.setOptions({
renderer: rendererMD,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function(code) {
return highlight.highlightAuto(code).value
}
})
axios.get('/md' + this.$route.query.pageUrl).then(res => {
this.markedHtml = marked(res.data).replace(
/<pre>/g,
"<pre class='hljs'>"
)
})
}
}
}
四、优化方向
我们已经能够获取当前被点击图片的href链接,这样我们其实可以按照自己的想法或者是需求做很多事情,比如自己手动实现一个放大显示框、利用v-viewer实现放大效果等等
而且marked.js还提供了其他很多的回调,我们可以按需使用
标签:rfs,el,markdown,false,title,marked,js,href 来源: https://blog.csdn.net/weixin_43845090/article/details/121926937