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还提供了其他很多的回调，我们可以按需使用